国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
簡單的原生js輪播圖

輪播圖我們在網(wǎng)站中經(jīng)常看到,主要就是為了在有限的空間內(nèi)展示出更多的內(nèi)容,同時也增加了界面的特效,讓頁面不是那么死版,讓界面動起來,看著更加舒服,話不多說,代碼如下:

效果:


HTML代碼:

  1. <div id="slide">
  2. <!-- 圖片區(qū) -->
  3.     <div id="pic">
  4.         <div class="current"><img src="images/0.jpg" alt=""></div>
  5.         <div><img src="images/1.jpg" alt=""></div>
  6.         <div><img src="images/2.jpg" alt=""></div>
  7.         <div><img src="images/3.jpg" alt=""></div>
  8.         <div><img src="images/4.jpg" alt=""></div>
  9.     </div>
  10.   <!-- 控制點 -->
  11.     <ol id="control">
  12.         <li class="current"></li>
  13.         <li></li>
  14.         <li></li>
  15.         <li></li>
  16.         <li></li>
  17.     </ol>
  18. <!-- 箭頭控制區(qū) -->
  19.     <div id="arrow">
  20.         <a class="arrow arrow-left" href="#"><img src="images/arr-left.png" alt=""></a>
  21.         <a class="arrow arrow-right" href="#"><img src="images/arr-right.png" alt=""></a>
  22.     </div>
  23. </div>

 CSS樣式:

  1. #slide{width: 500px; height: 313px; margin: 30px auto; position: relative;}//輪播區(qū)
  2. #pic div{width: 500px; height: 313px; display:none;}//輪播圖
  3. #pic div.current{display: block;}//當(dāng)前顯示輪播
  4. #control{list-style: none; position: absolute; left: 50%; margin-left: -50px; bottom: 15px;}//控制點
  5. #control li{width: 12px; height: 12px; margin-right: 10px; background: #ddd; border-radius: 50%;float: left;}
  6. #control li.current{background: #f00;}//當(dāng)前控制點樣式
  7. #control li:hover{cursor: pointer;}
  8. #arrow{position: absolute; top: 50%;width: 100%; display: none;}//箭頭指示器
  9. #arrow .arrow{display: inline-block; width: 32px; height: 32px; background: rgba(0,0,0,0.3);}
  10. #arrow .arrow.arrow-right{float: right;}

JS代碼:

  1. window.οnlοad=function(){
  2.     //輪播區(qū)
  3.     var slide=document.getElementById('slide');
  4.     //圖片區(qū)
  5.     var pic=document.getElementById('pic').getElementsByTagName('div');
  6.     //控制區(qū)
  7.     var lis=document.getElementById('control').getElementsByTagName('li');
  8.     //箭頭控制區(qū)
  9.     var arrows=document.getElementById('arrow');
  10.     var arrs=arrows.getElementsByClassName('arrow');
  11.     //自動輪播
  12.     var timer=setInterval(move,1000);
  13.     //定義初始化索引
  14.     var index=0;
  15.     //自動輪播
  16.     function move(){
  17.     //清除當(dāng)前索引樣式
  18.         pic[index].className='';
  19.         //清除當(dāng)前控制區(qū)樣式
  20.         lis[index].className='';
  21.         index++;
  22.         if(index==pic.length){
  23.             index=0;
  24.         }
  25.         pic[index].className='current';
  26.         lis[index].className='current';
  27.     }
  28.     //控制區(qū)控制輪播
  29.     for (var i=0; i<lis.length; i++){
  30.         //保存當(dāng)前索引
  31.         lis[i]._index=i;
  32.         lis[i].οnclick=function(){
  33.             //去除當(dāng)前樣式
  34.             lis[index].className='';
  35.             //隱藏當(dāng)前內(nèi)容區(qū)
  36.             pic[index].className='';
  37.             //修改當(dāng)前樣式
  38.             this.className='current';
  39.             //修改當(dāng)前圖片
  40.             pic[this._index].className='current';
  41.             //修改當(dāng)前索引
  42.             index=this._index;
  43.         }
  44.     }
  45.     //箭頭控制輪播
  46.     //上一張
  47.     arrs[0].οnclick=function(){
  48.         movePre();
  49.     }
  50.     //下一張
  51.     arrs[1].οnclick=function(){
  52.         move();
  53.     }
  54.     //鼠標(biāo)經(jīng)過輪播區(qū)停止輪播
  55.     slide.οnmοuseοver=function(){
  56.         clearInterval(timer);
  57.         arrows.style.display='inline-block';
  58.     }
  59.     //鼠標(biāo)離開繼續(xù)輪播
  60.     slide.οnmοuseοut=function(){
  61.         timer=setInterval(move,1000);
  62.         arrows.style.display='none';
  63.     }
  64.     function movePre(){
  65.         //清除當(dāng)前樣式
  66.         pic[index].className='';
  67.         lis[index].className='';
  68.         index--;
  69.         if (index==-1) {
  70.             index=pic.length-1;
  71.         }
  72.         pic[index].className='current';
  73.         lis[index].className='current';
  74.     }
  75. }

簡單的輪播就這么完成了,并沒有想象中的那么難,需要的拿去,不謝

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Jquery學(xué)習(xí)案例
原生js實現(xiàn)圖片切換
js常用基礎(chǔ)案例整理(持續(xù)更新)
瀑布流布局
隨心飛揚-網(wǎng)頁特效代碼
清爽簡潔的圖片交替導(dǎo)航效果lya
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服