最簡單的JavaScript圖片輪播代碼(兩種方法)

2019-11-20 10:59:22

字體：大中小

供稿：網(wǎng)友

通過改變每個圖片的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=; //中間量，統(tǒng)一聲明； var play=null; console.log(box,uls,imgs,btn);//獲取正確 //圖片切換, 淡入淡出效果我是用（transition: opacity .s linear）做的,不糾結(jié)、簡單 在css里面 function show(a){  //方法定義的是當(dāng)傳入一個下標(biāo)時，按鈕和圖片做出對的反應(yīng)  for(i=;i<btn.length;i++ ){  btn[i].className=''; //很容易看懂吧？每個按鈕都先設(shè)置成看不見，然后把當(dāng)前按鈕設(shè)置成可見。  btn[a].className='current';  }  for(i=;i<imgs.length;i++){ //把圖片的效果設(shè)置和按鈕相同  imgs[i].style.opacity=;  imgs[a].style.opacity=;  } } //切換按鈕功能，響應(yīng)對應(yīng)圖片 for(i=;i<btn.length;i++){  btn[i].index=i; //不知道你有沒有發(fā)現(xiàn)，循環(huán)里的方法去調(diào)用循環(huán)里的變量體i，會出現(xiàn)調(diào)到的不是i的變動值的問題。所以我先在循環(huán)外保存住  btn[i].onmouseover=function(){  show(this.index);  clearInterval(play); //這就是最后那句話追加的功能  } } //自動輪播方法 function autoPlay(){  play=setInterval(function(){ //這個paly是為了保存定時器的，變量必須在全局聲明 不然其他方法調(diào)不到 或者你可以調(diào)用auto.play 也許可以但是沒時間試了  index++;  index>=imgs.length&&(index=);//可能有優(yōu)先級問題，所以用了括號，沒時間測試了。  show(index);  },) } autoPlay();//馬上調(diào)用，我試過用window.onload調(diào)用這個方法，但是調(diào)用之后影響到了其他方法，使用autoPlay所以只能這樣調(diào)用了 //div的鼠標(biāo)移入移出事件 box.onmouseover=function(){  clearInterval(play); }; box.onmouseout=function(){  autoPlay(); }; //按鈕下標(biāo)也要加上相同的鼠標(biāo)事件，不然圖片停止了，定時器沒停，會突然閃到很大的數(shù)字上。 貌似我可以直接追加到之前定義事件中。 </script> </body> </html>

代碼二：

首先第一步，下載好一個jquery庫的插件，jquery.js 網(wǎng)上很多隨處可以下載．下載的插件要放在目錄下．然后在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>　//上面的ｌｉ要設(shè)定為顯示，因為是第一張圖片． <li style="background:green;"></li> <li style="background:gray;"></li> <li style="background:orange;"></li> </ul> </div>

由于方便各位網(wǎng)友下載能夠清晰明了，我就沒有用圖片路徑了，因為到你們電腦上就看不到了，這里用背景顏色．

第三步，就到了寫CSS的時候了．下面的CSS懂基礎(chǔ)的人都看得懂．

#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//這里是給整個大的ＤＩＶ設(shè)定屬性．#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ屬性．#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ屬性．注意：display:none;因為要將所有的ｌｉ隱藏了先．當(dāng)點(diǎn)擊的時候在顯示出來． .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是鼠標(biāo)經(jīng)過的效果．

第四步，就是ｊｑｕｅｒｙ代碼了！也很簡單．先將代碼看一遍，你就會用了！

<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(); });//到這里分開！上面的是上一張點(diǎn)擊的效果代碼，下面的是下一張點(diǎn)擊的效果代碼． $(".subr").click(function(){//獲取類名的點(diǎn)擊事件． if(i==0){i=len+1;}i--;$("#scroll ul li").eq(i).fadeIn().siblings().hide(); }); }); /*輪播*/</script>

四步輕松搞定一個簡單的輪！

欲了解更多特效源碼知識，請關(guān)注小編微信公眾號哦！