欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

輪播圖我們在網(wǎng)站中經(jīng)?？吹?，主要就是為了在有限的空間內展示出更多的內容，同時(shí)也增加了界面的特效，讓頁(yè)面不是那么死版，讓界面動(dòng)起來(lái)，看著(zhù)更加舒服，話(huà)不多說(shuō)，代碼如下：

效果：

HTML代碼：

<div id="slide"> 
  <!-- 圖片區 -->
    <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>
  <!-- 控制點(diǎn) -->
    <ol id="control">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
   <!-- 箭頭控制區 -->
    <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;}//輪播區
#pic div{width: 500px; height: 313px; display:none;}//輪播圖
#pic div.current{display: block;}//當前顯示輪播
#control{list-style: none; position: absolute; left: 50%; margin-left: -50px; bottom: 15px;}//控制點(diǎn)
#control li{width: 12px; height: 12px; margin-right: 10px; background: #ddd; border-radius: 50%;float: left;}
#control li.current{background: #f00;}//當前控制點(diǎn)樣式
#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(){
    //輪播區
    var slide=document.getElementById('slide');
    //圖片區
    var pic=document.getElementById('pic').getElementsByTagName('div');
    //控制區
    var lis=document.getElementById('control').getElementsByTagName('li');
    //箭頭控制區
    var arrows=document.getElementById('arrow');
    var arrs=arrows.getElementsByClassName('arrow');
    //自動(dòng)輪播
    var timer=setInterval(move,1000);
    //定義初始化索引
    var index=0;
    //自動(dòng)輪播
    function move(){
    //清除當前索引樣式
        pic[index].className='';
        //清除當前控制區樣式
        lis[index].className='';
        index++;
        if(index==pic.length){
            index=0;
        }
        pic[index].className='current';
        lis[index].className='current';
    }
    //控制區控制輪播
    for (var i=0; i<lis.length; i++){
        //保存當前索引
        lis[i]._index=i;
        lis[i].οnclick=function(){
            //去除當前樣式
            lis[index].className='';
            //隱藏當前內容區
            pic[index].className='';
            //修改當前樣式
            this.className='current';
            //修改當前圖片
            pic[this._index].className='current';
            //修改當前索引
            index=this._index;
        }
    }
    //箭頭控制輪播
    //上一張
    arrs[0].οnclick=function(){
        movePre();
    }
    //下一張
    arrs[1].οnclick=function(){
        move();
    }
    //鼠標經(jīng)過(guò)輪播區停止輪播
    slide.οnmοuseοver=function(){
        clearInterval(timer);
        arrows.style.display='inline-block';
    }
    //鼠標離開(kāi)繼續輪播
    slide.οnmοuseοut=function(){
        timer=setInterval(move,1000);
        arrows.style.display='none';
    }
    function movePre(){
        //清除當前樣式
        pic[index].className='';
        lis[index].className='';
        index--;
        if (index==-1) {
            index=pic.length-1;
        }
        pic[index].className='current';
        lis[index].className='current';
    }
} 

簡(jiǎn)單的輪播就這么完成了，并沒(méi)有想象中的那么難，需要的拿去，不謝