jq实现轮播图

轮播图的实现
在轮播图最后面克隆第一张图片，在到最后一张图是令轮播图的左边距瞬间归零，以实现无缝轮播；
首先为html

 <div class="banner">
        <ul class="hot">
            <li><a href="#"><img src="./1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./5.jpg" alt=""></a></li>
        </ul>
        <ul class="dot">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="arrow">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
    </div>

克隆第一张图片 firstimg = $(’.hot li ').first().clone();
追加到hot 中 在扩大hot的 宽度

$('.hot').append(firstimg).width($('.hot li').length * width);

width 为图片的宽度 我们设为300
timer 为 轮播 里面设有 isCarack();图片轮播
dotChange();按钮轮播
当我们鼠标移入时候 箭头 消失 ，点击 左右按钮 图片和按钮同时变化；

$(function(){
    var width = 300;
    var firstimg = $('.hot li').first().clone();
    $('.hot').append(firstimg).width($('.hot li').length * width);
    var timer = null;
    var delay = 1000;
    timer = setInterval(imgChange, delay);
    var i = 0;//图片的位置
    function imgChange(){
        i++;
        isCarack();//图片轮播
        dotChange();//按钮变化
    }
    var speed = 400; //动画时间
    function isCarack(){
        if(i == $('.hot li').length){
            i=1;
            $('.hot').css('left','0'); //到最后一张图片 hot 一定到0
        }
        $('.hot').stop().animate({
            left: -i * width + 'px'   // 进行动画
        },speed);
    }
    function dotChange(){
        if(i == $('.hot li').length -1 ){//当为最后一张图片时 第一个按钮实现
            $('.dot li').eq(0).addClass('on').siblings().removeClass('on');    
        } 
        else{
            $('.dot li').eq(i).addClass('on').siblings().removeClass('on');
        }
    }
    $('.banner').hover(function(){
        clearInterval(timer);//鼠标经过时 清楚动画
    },function () {
        timer = setInterval(imgChange,delay);//鼠标离开时 动画开始
      })
      $('.dot li').mouseover(function () {
          i = $(this).index();//获得按钮下标
            $('.hot').stop().animate({
                left: - i * width +'px'//图片切换到相应下标
            },speed);
            dotChange();
        })
        $('.banner').hover(function () {
            $('.arrow').show();//箭头出现
          },function(){
              $('.arrow').hide();//箭头隐藏
          });
          $('.next').click(function () {
              imgChange();
            })
            $('.prev').click(function () {
                i--;
                if(i == -1){
                    i = $('.hot li').length -2;//倒数第二个图片下标
                    $('.hot').css({
                        left:-(($('.hot li').length ) * width -1 )+ 'px'
                    });//切换到最后一张图
                }
                $('.hot').stop().animate({
                    left: -i * width + 'px'
                },speed);
                dotChange();
              })
})

这样实现 全功能轮播图
css代码如下.banner{ position: relative; margin: auto; width: 300px; height: 200px; overflow: hidden; } .hot{ margin: 0; padding: 0; list-style: none; width: 500%; position: absolute; } .hot li{ float: left; width: 300px; } .hot li img{ width: 100%; height: 200px; } .dot{ margin: 0; padding: 0; list-style: none; position: absolute; bottom: 0; left: 50%; width: 200px; transform: translateX(-50%); } .dot li{ float: left; width: 30px; height: 30px; border-radius: 50% 50%; background-color: white; border: 1px solid black; margin-right: 10px; } .dot li:last-child{ margin-right: 0; } .on{ background-color: orange!important; } .arrow .prev{ position: absolute; left:0; font-size: 40px; top: 50%; transform: translateY(-50%); opacity: .5; cursor: pointer; } .arrow .next{ position: absolute; right:0; font-size: 40px; top: 50%; transform: translateY(-50%); opacity: .5; cursor: pointer; }