最简单的JavaScript图片轮播代码(两种方法)

2019-11-20 10:59:22

字体：大中小

来源：转载

供稿：网友

通过改变每个图片的opacity属性：

素材图片：

代码一：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style>  body, div, ul, li {  margin: ;  padding: ;  }  ul {  list-style-type: none;  }  body {  background: #;  text-align: center;  font: px/px Arial;  }  #box {  position: relative;  width: px;  height: px;  background: #fff;  border-radius: px;  border: px solid #fff;  margin: px auto;  }  #box .list {  position: relative;  width: px;  height: px;  overflow: hidden;  border: px solid #ccc;  }  #box .list li {  position: absolute;  top: ;  left: ;  width: px;  height: px;  opacity: ;  transition: opacity .s linear  }  #box .list li.current {  opacity: ;  }  #box .count {  position: absolute;  right: ;  bottom: px;  }  #box .count li {  color: #fff;  float: left;  width: px;  height: px;  cursor: pointer;  margin-right: px;  overflow: hidden;  background: #F;  opacity: .;  border-radius: px;  }  #box .count li.current {  color: #fff;  opacity: .;  font-weight: ;  background: #f  } </style> </head> <body> <div id="box"> <ul class="list">  <li class="current" style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>  <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>  <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>  <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>  <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li> </ul> <ul class="count">  <li class="current"></li>  <li class=""></li>  <li class=""></li>  <li class=""></li>  <li class=""></li> </ul> </div> <script> var box=document.getElementById('box'); var uls=document.getElementsByTagName('ul'); var imgs=uls[].getElementsByTagName('li'); var btn=uls[].getElementsByTagName('li'); var i=index=; //中间量，统一声明； var play=null; console.log(box,uls,imgs,btn);//获取正确 //图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面 function show(a){  //方法定义的是当传入一个下标时，按钮和图片做出对的反应  for(i=;i<btn.length;i++ ){  btn[i].className=''; //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。  btn[a].className='current';  }  for(i=;i<imgs.length;i++){ //把图片的效果设置和按钮相同  imgs[i].style.opacity=;  imgs[a].style.opacity=;  } } //切换按钮功能，响应对应图片 for(i=;i<btn.length;i++){  btn[i].index=i; //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住  btn[i].onmouseover=function(){  show(this.index);  clearInterval(play); //这就是最后那句话追加的功能  } } //自动轮播方法 function autoPlay(){  play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了  index++;  index>=imgs.length&&(index=);//可能有优先级问题，所以用了括号，没时间测试了。  show(index);  },) } autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了 //div的鼠标移入移出事件 box.onmouseover=function(){  clearInterval(play); }; box.onmouseout=function(){  autoPlay(); }; //按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。 </script> </body> </html>

代码二：

首先第一步，下载好一个jquery库的插件，jquery.js 网上很多随处可以下载．下载的插件要放在目录下．然后在html文档中链接好<script type="text/javascript" src="jQuery.js"></script>

第二步，布局好一个DIV,如：

<div id="scroll"> <p class="subl">上一张<p/> <p class="subr">下一张<p/> <ul> <li style="background:red;display:block;"></li>　//上面的ｌｉ要设定为显示，因为是第一张图片． <li style="background:green;"></li> <li style="background:gray;"></li> <li style="background:orange;"></li> </ul> </div>

由于方便各位网友下载能够清晰明了，我就没有用图片路径了，因为到你们电脑上就看不到了，这里用背景颜色．

第三步，就到了写CSS的时候了．下面的CSS懂基础的人都看得懂．

#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的ＤＩＶ设定属性．#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ属性．#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：display:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来． .subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性．注意一个绝对定位． .subr{position:absolute;bottom:20px; right:40%;width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; }//下一张按钮的属性．注意一个绝对定位．.subr:hover{ background:yellow;border-radius:10px;}.subl:hover{ background:yellow;border-radius:10px;}//以上两个hover是鼠标经过的效果．

第四步，就是ｊｑｕｅｒｙ代码了！也很简单．先将代码看一遍，你就会用了！

<script type="text/javascript">/*轮播*/ $(function(){ var i=0; var len=$("#scroll ul li").length-1; $(".subl").click(function(){ if(i==len){i=-1;}i++;$("#scroll ul li").eq(i).fadeIn().siblings().hide(); });//到这里分开！上面的是上一张点击的效果代码，下面的是下一张点击的效果代码． $(".subr").click(function(){//获取类名的点击事件． if(i==0){i=len+1;}i--;$("#scroll ul li").eq(i).fadeIn().siblings().hide(); }); }); /*轮播*/</script>

四步轻松搞定一个简单的轮！

欲了解更多特效源码知识，请关注小编微信公众号哦！