輪播圖我們在網(wǎng)站中經(jīng)常看到,主要就是為了在有限的空間內(nèi)展示出更多的內(nèi)容,同時也增加了界面的特效,讓頁面不是那么死版,讓界面動起來,看著更加舒服,話不多說,代碼如下:
效果:
HTML代碼:
- <div id="slide">
- <!-- 圖片區(qū) -->
- <div id="pic">
- <div class="current"><img src="images/0.jpg" alt=""></div>
- <div><img src="images/1.jpg" alt=""></div>
- <div><img src="images/2.jpg" alt=""></div>
- <div><img src="images/3.jpg" alt=""></div>
- <div><img src="images/4.jpg" alt=""></div>
- </div>
- <!-- 控制點 -->
- <ol id="control">
- <li class="current"></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ol>
- <!-- 箭頭控制區(qū) -->
- <div id="arrow">
- <a class="arrow arrow-left" href="#"><img src="images/arr-left.png" alt=""></a>
- <a class="arrow arrow-right" href="#"><img src="images/arr-right.png" alt=""></a>
- </div>
- </div>
CSS樣式:
- #slide{width: 500px; height: 313px; margin: 30px auto; position: relative;}//輪播區(qū)
- #pic div{width: 500px; height: 313px; display:none;}//輪播圖
- #pic div.current{display: block;}//當(dāng)前顯示輪播
- #control{list-style: none; position: absolute; left: 50%; margin-left: -50px; bottom: 15px;}//控制點
- #control li{width: 12px; height: 12px; margin-right: 10px; background: #ddd; border-radius: 50%;float: left;}
- #control li.current{background: #f00;}//當(dāng)前控制點樣式
- #control li:hover{cursor: pointer;}
- #arrow{position: absolute; top: 50%;width: 100%; display: none;}//箭頭指示器
- #arrow .arrow{display: inline-block; width: 32px; height: 32px; background: rgba(0,0,0,0.3);}
- #arrow .arrow.arrow-right{float: right;}
JS代碼:
- window.οnlοad=function(){
- //輪播區(qū)
- var slide=document.getElementById('slide');
- //圖片區(qū)
- var pic=document.getElementById('pic').getElementsByTagName('div');
- //控制區(qū)
- var lis=document.getElementById('control').getElementsByTagName('li');
- //箭頭控制區(qū)
- var arrows=document.getElementById('arrow');
- var arrs=arrows.getElementsByClassName('arrow');
- //自動輪播
- var timer=setInterval(move,1000);
- //定義初始化索引
- var index=0;
- //自動輪播
- function move(){
- //清除當(dāng)前索引樣式
- pic[index].className='';
- //清除當(dāng)前控制區(qū)樣式
- lis[index].className='';
- index++;
- if(index==pic.length){
- index=0;
- }
- pic[index].className='current';
- lis[index].className='current';
- }
- //控制區(qū)控制輪播
- for (var i=0; i<lis.length; i++){
- //保存當(dāng)前索引
- lis[i]._index=i;
- lis[i].οnclick=function(){
- //去除當(dāng)前樣式
- lis[index].className='';
- //隱藏當(dāng)前內(nèi)容區(qū)
- pic[index].className='';
- //修改當(dāng)前樣式
- this.className='current';
- //修改當(dāng)前圖片
- pic[this._index].className='current';
- //修改當(dāng)前索引
- index=this._index;
- }
- }
- //箭頭控制輪播
- //上一張
- arrs[0].οnclick=function(){
- movePre();
- }
- //下一張
- arrs[1].οnclick=function(){
- move();
- }
- //鼠標(biāo)經(jīng)過輪播區(qū)停止輪播
- slide.οnmοuseοver=function(){
- clearInterval(timer);
- arrows.style.display='inline-block';
- }
- //鼠標(biāo)離開繼續(xù)輪播
- slide.οnmοuseοut=function(){
- timer=setInterval(move,1000);
- arrows.style.display='none';
- }
- function movePre(){
- //清除當(dāng)前樣式
- pic[index].className='';
- lis[index].className='';
- index--;
- if (index==-1) {
- index=pic.length-1;
- }
- pic[index].className='current';
- lis[index].className='current';
- }
- }
簡單的輪播就這么完成了,并沒有想象中的那么難,需要的拿去,不謝