HTML+CSS+JavaScript實現輪播圖

從mooc網站嗶哩嗶哩上學到的：視頻BV號為BV16W41127aQ和BV1hW411y79J，up:紅點工廠

HTML

<div class="lunboContainer">
                    <div class="lunboLeft"><!--輪播圖向左移動-->
                        <img src="選擇您的路徑/icon-slides.png" id="leftImg">
                    </div>
                    <div class="lunboRight"><!--輪播圖向右移動-->
                        <img src="選擇您的路徑/icon-slides.png" id="rightImg">
                    </div>
                    <ul id="imgList">
                        <li class="item active"><img src="選擇您的路徑/1.jpg"></li>
                        <li class="item"><img src="選擇您的路徑/2.jpg"></li>
                        <li class="item"><img src="選擇您的路徑/3.jpg"></li>
                        <li class="item"><img src="選擇您的路徑/4.jpg"></li>
                        <li class="item"><img src="選擇您的路徑/5.jpg"></li>
                    </ul>
                    <ul id="pointList"><!-- 輪播圖下面的小點點，點哪個點顯示對應的圖片-->
                        <li class="point active" data-index='0'></li>
                        <li class="point" data-index='1'></li>
                        <li class="point" data-index='2'></li>
                        <li class="point" data-index='3'></li>
                        <li class="point" data-index='4'></li>
                    </ul>
                </div>

 

CSS

.lunboContainer{
    width:100%;
    height:400px;
    margin:0 auto;
    position:relative; 
}
.lunboLeft{
    position:absolute;
    z-index:10;
    margin-left:0px;
    margin-top:130px;
    width:60px;
    height:100px;
    overflow:hidden;
}
.lunboLeft img{
    height:100px;
    margin-left:-120px;
}
.lunboRight{
    position:absolute;
    z-index:10;
    right:0px;
    margin-top:130px;
    width:60px;
    height:100px;
    overflow:hidden;
}
.lunboRight img{
    height:100px;
    margin-left:-180px;
}
#imgList{
    width:100%;
    height:400px;
    padding:0;         /* padding 設置0 */
    margin:0;        /* margin 設置0 */
    position:relative;
}
.item{
    position:absolute;
    width:100%;
    list-style-type: none;
    height:100%;
    float: left;
    opacity:0;
    transition:opacity 1s;
}
.lunboContainer ul img{
    width:100%;
    height:100%;
}
.item.active{
    opacity:1;
    z-index:5;
}
#pointList{
    padding:0;
    list-style-type: none;
    position:absolute;
    right:20px;
    bottom:20px;
    z-index:10;
}
.point{
    width:8px;
    height:8px;
    border-radius:100%;
    background-color:rgb(10,10,10);
    float:left;
    z-index:10;
    margin-right:18px;
    border-style:solid;
    border-width:2px;
    border-color:white;
    cursor:pointer;
}
.point.active{
    background-color:rgba(255,255,255,0.6);
}//為正在顯示的點點設置特殊樣式

 

Javascript

var index=0;
var imgs=document.getElementsByClassName("item");//圖片
var leftImg=document.getElementById("leftImg");//向左
var rightImg=document.getElementById('rightImg');//向右
var points=document.getElementsByClassName("point");//小點點
var timeOut=0;
function clearActive(){
    for(var i=0;i<imgs.length;i++){
        imgs[i].className='item';
        points[i].className='point';
        }
}
function goNext(){
    clearActive();
    index++;
    index=index%imgs.length;
    imgs[index].className='item active';
    points[index].className='point active';
    timeOut=0;
}
function goPre(){
    clearActive();
    index--;
    if(index<0){
        index=imgs.length-1;
    }
    imgs[index].className='item active';
    points[index].className='point active';
}
/*當鼠標懸停在向左向右的圖片上方時需要改變圖片樣式使用戶得到相應的反饋，這里學習了小米商城主頁輪播圖的做法，只用一張圖片，通過改變這張圖片到邊界的距離實現樣式改變*/
function preHover(){
    leftImg.style.marginLeft="0px";
}
function nextHover(){
    rightImg.style.marginLeft="-60px";
}
function preHout(){
    leftImg.style.marginLeft="-120px";
}
function nextHout(){
    rightImg.style.marginLeft="-180px";
}
/*************************************************/
function jmpByPoint(pointIndex){
    clearActive();
    index=pointIndex;
    imgs[index].className="item active";
    points[index].className='point active';
    timeOut=0;
}
for(var i=0;i<points.length;i++){
    points[i].addEventListener('click',function(){
        var pointIndex=this.getAttribute("data-index");
        jmpByPoint(pointIndex);
    })
}
leftImg.addEventListener('click',function(){
    goPre();
})
leftImg.addEventListener('mouseover',function(){
    preHover();
})
leftImg.addEventListener('mouseout',function(){
    preHout();
})
rightImg.addEventListener('click',function(){
    goNext();
})
rightImg.addEventListener('mouseover',function(){
    nextHover();
})
rightImg.addEventListener('mouseout',function(){
    nextHout();
})
setInterval(function(){ 
    timeOut++;
    if(timeOut==10){
        goNext();
        timeOut=0;
    }
},500)/*此方法使得timeOut參數每隔0.5（500ms）秒加一，當timeOut加到10時（即5秒）顯示下一張圖片，同時timeOut清零，
使用timeOut參數而不直接使用setInterval(fun(),5000)函數定時的目的在於：
假設當用戶點擊點點跳到某張圖片時，距離到達5000毫秒只剩一絲絲時間，那張圖片就馬上跳走了，而用戶可能還沒來得及看清除圖片，
使用timeOut定時后，當用戶通過點跳轉之后，將timeOut參數清零，可實現重新計時，就不會馬上跳走，見function jmpByPoint(pointIndex)；*/
 

小米官網輪播圖左右導航圖連接：http://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png