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