jQuery 图片轮播

HTML

<div class="carousel">
    <ul class="car-img">
        <li><img src="images/imgs1.jpg"></li>
        <li><img src="images/imgs2.jpg"></li>
        <li><img src="images/imgs1.jpg"></li>
        <li><img src="images/imgs2.jpg"></li>
        <li><img src="images/imgs1.jpg"></li>
        <li><img src="images/imgs2.jpg"></li>
    </ul>
    <div class="navgation">
        <span class="nav-prev"><</span>
        <span class="nav-next">></span>
    </div>
    <ul class="car-btn">
        <li class="lihover"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

*{
    margin:0;
    padding:0;
    border:0;
    box-sizing:border-box;
}
li{
    list-style:none;
}
.carousel{
    position:relative;
    width:100%;
    height:600px;
}
.carousel .car-img{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
}
.carousel .car-img li{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.carousel .car-img li img{
    border:0;
    width:100%;
    height:100%;
}
.carousel .navgation{
    position:absolute;
    top:295px;
    width:100%;
    color:#fff;
    font-size:30px;
    line-height:45px;
}
.carousel .navgation .nav-prev{
    display:inline-block;
    width:30px;
    height:50px;
    background:rgba(51,51,51,.5);
}
.carousel .navgation .nav-next{
    float:right;
    display:inline-block;
    width:30px;
    height:50px;
    background:rgba(51,51,51,.5);
}
.carousel .navgation .nav-prev.btnhover,.carousel .navgation .nav-next.btnhover{
    color:red;
    cursor:pointer;
}
.carousel .car-btn{
    position:absolute;
    bottom:20px;
    width:auto;
    margin-left: calc(50% - 120px);
    overflow:hidden;
}
.carousel .car-btn li{
    float:left;
    margin:10px;
    width:20px;
    height:20px;
    border-radius:20px;
    background:rgba(102,255,0,1);
}
.carousel .car-btn li.lihover{
    float:left;
    margin:10px;
    width:20px;
    height:20px;
    border-radius:20px;
    background:rgba(255,0,0,1);
}

jQuery

$(function(){
    var isPagerClick=false,        //判断底下的小按钮
        isPrevClick=false,        //判断左右滑动的按钮
        index=0,    //目标值
        pre=0,
        handid;
    start();
    function start(){
        init();    //初始化函数
        $(".car-img li").eq(0).fadeIn().siblings().fadeOut();
        handid = setInterval(play,2000);    //轮播
    }
    function init(){
        $(".car-btn li").bind("click",pagerClick);    //给小按钮绑定点击事件
        $(".navgation span").bind("click",btnClick);//给左右按钮绑定点击事件
        $(".navgation span").hover(btnMouseOver,btnMouseOut);
    }
    function pagerClick(){        //小按钮的点击事件
        isPagerClick=true;        //已经点击
        clearInterval(handid);    //消除setInterval
        var oPager=$(this).index();    //获取点击按钮的索引值
        if(oPager != pre)    //判断点击按钮的位置
        {
            index=oPager - 1;    
            play();
        }
    }
    function btnClick(){
        if($(this).hasClass("nav-prev")){ //判断点击按钮的 左 或者是 右
            isPrevClick=true;
            clearInterval(handid);
            if(index==0 || index==1)
            {
                if(index==0){index=$(".car-img li").length-2;}
                else{index=$(".car-img li").length-1;}
            }else
            {
                index-=2;
            }
            play();
        }
        else{
            isPrevClick=true;
            clearInterval(handid);
            play();
        }
    }
    function btnMouseOver(){
        $(this).addClass("btnhover");
    }
    function btnMouseOut(){
        $(this).removeClass("btnhover");
    }
    function play(){
        index++;
        if(index == $(".car-img li").length)
        {
            index = 0;
        }
        $(".car-img li").eq(pre).fadeOut(100,function(){
            $(".car-img li").eq(index).fadeIn(500,function(){
                if(isPagerClick)    //判断是否点击了
                {
                    handid=setInterval(play,2000);    //重新设置setInterval
                    isPagerClick=false;
                };
                if(isPrevClick)
                {    
                    handid=setInterval(play,2000);
                    isPrevClick=false;
                }
            }).siblings().fadeOut();
            $(".car-btn li").eq(index).addClass("lihover");
            $(".car-btn li").eq(pre).removeClass("lihover");
            pre=index;
        });
    }
})

效果图

转载于:https://www.cnblogs.com/ricesm/p/5033980.html