2018.08.07jQuery实现焦点轮播图

jQuery实现焦点轮播图（十张图片）

一、html代码

 <div class="banner_box">
    <div class="banner_images">
        <div class="banner_img"><a href=""><img src="../jeep/index/img/1.jpg" alt="bannerOne"></a></div>
        <div class="banner_img"><a href=""><img src="../jeep/index/img/2.jpg" alt="bannerTwo"></a></div>
        <div class="banner_img"><a href=""><img src="../jeep/index/img/3.jpg" alt="bannerThree"></a></div>
        <div class="banner_img"><a href=""><img src="../jeep/index/img/4.jpg" alt="bannerFour"></a></div>
        <div class="banner_img"><a href=""><img src="../jeep/index/img/5.jpg" alt="bannerFive"></a></div>
        <div class="banner_img"><a href=""><img src="../jeep/index/img/6.jpg" alt="bannerSix"></a></div>
        <div class="banner_img"><a href=""><img src="../jeep/index/img/7.jpg" alt="bannerSeven"></a></div>
        <div class="banner_img"><a href=""><img src="../jeep/index/img/8.jpg" alt="bannerEight"></a></div>
        <div class="banner_img"><a href=""><img src="../jeep/index/img/9.jpg" alt="bannerNine"></a></div>
        <div class="banner_img"><a href=""><img src="../jeep/index/img/10.jpg" alt="bannerTen"></a></div>
   </div>
 <!--左右点击切换图片的箭头-->
    <div class="switcher">
        <p class="prev">←</p>
        <p class="next">→</p>
    </div>
 <!--底部圆点-->
    <ul class="points">
        <li class="point_on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

二、css代码

*{
    margin: 0;
    padding: 0;
    border: none;
}
.banner_box{
    position: relative; /*attention*/
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.banner_images{
    position: absolute; /*attention*/
    left: 0;
    width: 1000%; /*attention please*/
}
.banner_img{
    float: left;
    width: 10%; /*attention please*/
    height: 500px;
}
.banner_img img{
    width: 100%;
    height: 500px;
}
 
.switcher{
    position: absolute;
    top: 285px;
    width: 100%;
    display: none;
}
.switcher p{
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    background: rgba(0, 0, 0, .8);
    border-radius: 50%;
    cursor: pointer;
}
.switcher .prev{
    float: left;
    margin-left: 50px
}
.switcher .next{
    float: right;
    margin-right: 50px;
}
.banner_box:hover .switcher{
    display: block;
}
.points{
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 400px;
    margin-left: -81px;
    overflow: hidden;

}
.points li{
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, .8);
    float: left;
    border-radius: 5px;
    list-style: none;
    cursor: Crosshair;
    margin-left: 3px;
}
.points li.point_on{
    background: #C92027;
}
三、js代码

$(function(){
    var img_length = $('.banner_img').length; //图片的张数
    var i  = 1;
 
    function banner(){ //轮播函数
        if(i < 0){
            i = img_length - 1;
        }
        if(i >= img_length){
            i = 0;
        }
        $('.banner_images').animate({'left': (-i*100)+'%'});
        $('.points li').eq(i).addClass('point_on').siblings().removeClass();
        i++;
    }
    var banner_timer = setInterval(banner, 3000);
 
    $('.switcher p').hover(function(){    //鼠标移入左右切换箭头清除定时器使轮播停止
        clearInterval(banner_timer);
    },function(){    //鼠标移出切换箭头还原定时器，这里为避免定时器重复 还将定时器赋值给上边定义的banner_timer变量
        banner_timer = setInterval(banner, 3000);
    });
 
    $('.switcher p').click(function(){    //点击左右箭头使图片左右切换
        if($(this).attr('class') == 'prev'){
            i-=2;
            banner();
        }else{
            i+=1;
            banner();
        }
    })
 
    $('.points li').click(function(){    //点击相应的焦点跳转到对应图片
        i = $(this).index();
        banner();
    });
});