JQuery中的轮播图demo

JQuery库中的插件来写轮播图，虽然其库用起来甚是方便，简介 ，提高了工作 效率。下边我就为大家提供一种JQuery的轮播图：

index.html 文件结构如下：

//一定要先引入js文件、css文件
 <div class="con_wrap">
        <div class="tit_wrap">
            <h1>JS原生轮播图</h1>
           <div class="box">
                <ul id="ul">
                    <li><img src="images/1.jpg" alt=""></li>
                    <li><img src="images/2.jpg" alt=""></li>
                    <li><img src="images/3.jpg" alt=""></li>
                    <li><img src="images/4.jpg" alt=""></li>
                </ul>
                <div class="box-arrow">
                    <span id="arr-left">&lt;</span>
                    <span id="arr-right">&gt;</span>
                </div>
                <ul class="box-circle"></ul>
            </div>
        </div>

style.css 文件如下：

body {
/*初始化样式*/
    margin: 0;
    padding: 0;
}

.box {
    /*给盒子定义样式*/
    width: 1100px;
    height: 400px;
    overflow: hidden;
    position: relative;//相对定位
}

.box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
}

.box li {
    float: left;
    width: 1100px;
    height: 400px;
}

.box ul img {
    width: 100%;
    height: 100%;
    display: block;
}

.box-arrow {
    position: absolute;//绝对定位
    left: 0;
    top: 50%;
    margin-top: -35px;
    width: 100%;
    display: none;
}

.box-arrow span {
    color: white;
    font-size: 40px;
    cursor: pointer;
    display: block;
    background-color: black;
    width: 30px;
    text-align: center;
    /*禁用用户选中文本*/
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

#arr-left {
    float: left;
}

#arr-right {
    float: right;
}

.box-circle {
    position: absolute;
    bottom: 20px;
    left: 50%;
}
.box-circle li {
    width: 20px;
    height: 20px;
    text-align: center;
    position: relative;
    left: -50%;
    background-color: black;
    cursor: pointer;
    color: white;
    font-size: 12px;
    line-height: 15px;
    font-family: 'Microsoft YaHei';
    margin-right: 10px;
    border-radius: 11px;
}
.box-circle li.hover {
    background-color: orangered;
}

index.js

$(function(){
    //切换显示箭头
    $('.box').on('mouseover',function(){//鼠标覆盖时，显示箭头，关闭自动轮播
        clearInterval(timer);
        $('.box-arrow').show();
    }).on('mouseleave',function(){//鼠标离开时，隐藏箭头，开启自动轮播
        $('.box-arrow').hide();
        autoPlay();
    });
    //目标索引值
    var targetIndex = 0;
    //定时器句柄
    var timer=null;
    //是否执行轮播的标识
    var flag = true;
    //轮播时，操作位置的元素
    var ul = $('#ul');
    //每个图片的宽度
    var width = 0 - $('.box li:eq(0)').width();
    //复制第一个li元素，append到最后
    $('#ul').append($('#ul li:eq(0)').clone()).width(Math.abs(width)*$('#ul>li').length);
    var count = $('#ul>li').length;
    //轮播图片的方法
    function play(){
        if(flag){//标识为true时，执行轮播
            flag=false;//执行轮播前，将标识符设为false
            //计算小圆点索引
            var circleIndex = targetIndex;
            if(targetIndex>(count-2)){
                circleIndex = 0;
            }
            if(targetIndex<0){
                circleIndex = count-2;
            }
            //根据索引，修改小圆点样式
            $('.box-circle li:eq('+circleIndex+')').addClass('hover')
                .siblings().removeClass('hover');
            //使用animate方法轮播图片
            $(ul).animate({'left':targetIndex*width+'px'},500,function(){
                flag=true;//执行轮播完毕后，将标识符设为true
            });
        }
    }
    //点击向右移动
    $('#arr-right').on('click',function(){
        if(!flag){//当标识符为false时，禁止更改目标索引值和执行轮播动画
            return;
        }
        if(targetIndex+1 > count-1){
            targetIndex = 1;
            $(ul).css('left','0px');
        }else{
            targetIndex++;
        }
        play();
    });
    //点击向左移动
    $('#arr-left').on('click',function(){
        if(!flag){//当标识符为false时，禁止更改目标索引值和执行轮播动画
            return;
        }
        if(targetIndex-1 < 0){
            targetIndex = count-2;
            $(ul).css('left',(targetIndex+1)*width+'px');
        }else{
            targetIndex--;
        }
        play();
    });
    //自动轮播的方法
    function autoPlay(){
        timer = setInterval(function(){
            $('#arr-right').trigger('click');
        },2000);
    }
    //执行自动轮播
    autoPlay();
   //循环创建小圆点
    for(var i=0; i<count-1; i++){//因为count包含克隆的元素，所以需要count-1
        var hoverClass = '';
        if(i==0){
            hoverClass = 'hover';
        }
        $('.box-circle').append('<li class="'+hoverClass+'">'+(i+1)+'</li>');//向页面添加小圆点
    }
   //小圆点的鼠标覆盖事件
    $('.box-circle li').on('mouseover',function(){
        $(this).addClass('hover').siblings().removeClass('hover');//切换样式
        //索引检测，当索引在最后一张克隆图片上、覆盖到第一个小圆点的时候，直接切换回第一张
        if($(this).index()==0&&targetIndex==(count-1)){
            ul.css('left','0px');
        }
        targetIndex = $(this).index();//修改目标索引为当前鼠标覆盖小圆点的索引值
        //轮播图片
        play();
    });
});

本篇文章的内容只是我个人经验总结；分享出来，希望可以帮都大家。