一个简单的banner

绝地灬酷狼 2022-09-23 04:51 157阅读 0赞

源码：

<html>  
<head>  
<title>一个简单banner</title>  
<style>  
\*\{margin:0;padding:0;\}  
.banner\{height:200px;width:200px;height:120px;background-size:cover;margin:100px 0 0 200px;\}  
li\{float:left;\}  
.right\{margin-top:-180px;margin-left:352px;height:120px;width:50px;cursor:pointer;\}  
.left\{margin-top:-180px;margin-left:0px;height:120px;width:50px;cursor:pointer;\}  
img\{width:400px;height:300px;\}  
</style>  
</head>  
<body>  
<div class="banner">  
<img src="images/01.jpg" id="pc"/>  
<img type="button" src="images/right.jpg" class="right" οnclick="r\_change()" />  
<img src="images/left.jpg" class="left" οnclick="l\_change()" />  
</div>  
<script type="text/javascript">  
var index = 1;  
window.οnlοad=function()\{  
var p = document.getElementById("pc");  
p.src="images/01.jpg";  
\}  
  
  
//左切换  
function r\_change()\{  
var p = document.getElementById("pc");  
index++;  
var x = index % 6;  
if(x == 0)\{   
index = 1;  
\}  
else\{  
index = x;  
\}  
p.src="images/0"+index+".jpg";  
\}  
  
//右切换  
function l\_change()\{  
var p = document.getElementById("pc");  
index--;  
var x = index % 6;  
if(x == 0)\{   
index = 5;  
\}  
else\{  
index = x;  
\}  
p.src="images/0"+index+".jpg";  
\}  
</script>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关使用javas实现简单banner

html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

爱被打了一巴掌/ 2024年04月17日 21:39/ 0 赞/ 48 阅读

相关 openwrt banner

`./package/base-files/files/etc/banner` 为console登录欢迎横幅。 [http://www.network-science.de

墨蓝/ 2023年01月20日 05:58/ 0 赞/ 6 阅读

相关 banner.txt

利用banner.txt可以输出系统的配置信息 ![在这里插入图片描述][2020082514094566.png_pic_center] banner.txt

柔光的暖阳◎/ 2022年12月01日 01:18/ 0 赞/ 199 阅读

相关怎样实现banner自动播放html,jquery实现简单的banner轮播效果【实例】

朋友给我看了一个轮播效果，把js下载一看，丫丫的一个这么简单的效果，这么的就能写个几百行的，严重影响浏览器加载速度嘛，以为人家宽带流量不要钱玩的哦。。无奈之下给他写了个简单的，

水深无声/ 2022年10月05日 09:58/ 0 赞/ 172 阅读

相关怎样实现banner自动播放html,HTML+CSS实现简单banner轮播（推荐PC端）

PC端banner如果没有跳转页面的要求，可以使用这个方法来实现简单展示banner的需求，减少页面的体积，浏览页面更加快速。 1.先写两个div,把需要轮播的图片放进去

﹏ヽ暗。殇╰゛Y/ 2022年10月05日 09:58/ 0 赞/ 322 阅读

相关一个简单的banner

源码： <html> <head> <title>一个简单banner</title> <style> \\{margin:0;padding:0;\}

绝地灬酷狼/ 2022年09月23日 04:51/ 0 赞/ 158 阅读

相关 Banner欣赏

![uisdc-banner-20161230-0.webp][] 1. 构图构图是一个banner设计中最基础的部分，在做banner排版的时候，首先要根据bann

小咪咪/ 2022年06月18日 05:10/ 0 赞/ 250 阅读

相关打造一个轻量级,简单,易用的Android Banner框架

打造一个轻量级,简单,易用的Android Banner框架由于本人在写一个项目(项目地址: [https://github.com/xfhy/Daily][https

亦凉/ 2022年06月07日 07:47/ 0 赞/ 396 阅读

相关 Banner框架的简单使用（实现轮播图）

[\[-\]][-] 1. [效果展示][Link 1] 2. [使用步骤][Link 2] 1. [Step 1依赖banner Gradle de

ゝ一纸荒年。/ 2022年06月07日 07:07/ 0 赞/ 414 阅读

相关简单HTML、CSS、JS实现的banner横幅轮播效果

直接上代码吧 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

女爷i/ 2022年01月22日 23:21/ 0 赞/ 539 阅读