jquery自动无缝轮播代码

jquery自动无缝轮播代码

1. css样式
2. body里的布局
3. jquery的代码

---

1. css样式

*{margin:0px auto;padding:0px;}
ul{list-style: none;}
a{text-decoration: none;}
.box{width: 730px;height: 454px;margin-top:100px;position: relative;overflow: hidden;}
.box-in{width: 6000px;position: absolute;top:0px;left: 0px;}
.box-in li{float: left;}
.btn{width: 730px;height: 30px;position: absolute;top:50%;left: 50%;margin-left: -365px;margin-top: -15px;}
.btn a{width: 50px;height: 70px;background: pink;color: #fff;line-height: 70px;text-align: center;font-size: 30px;}
.zuo{float: left;}
.you{float: right;}
.circle{width: 150px;height: 30px;bottom: 10px;right:10px;position: absolute;}
.circle span{width: 18px;height: 18px;border-radius: 50%;background-color: white;float: left;text-align: center;line-height: 18px;margin-right: 5px;cursor: pointer;}
.circle span.current{background: purple;}

2. body里的布局

<div class="box">
       <ul class="box-in">
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
            <li><img src="images/6.jpg"></li>
     </ul>
       <div class="btn">
            <a href="javascript:;" class="zuo">&lt;</a>
            <a href="javascript:;" class="you">&gt;</a>
       </div>
       <div class="circle">
           <span class="current">1</span>
           <span>2</span>
           <span>3</span>
           <span>4</span>
           <span>5</span>
           <span>6</span>
       </div>
   </div>

3.jquery的代码

$(document).ready(function(){
            var nowimg=0;
            var timer=null;
            // 克隆第一张图片，并且放到最后
            $(".box-in li:first").clone().appendTo('.box-in')
            // 右按钮业务
            $(".you").click(rightFunc)
                function rightFunc(){

                if(nowimg<5){
                    nowimg++
                    $(".box-in").animate({"left":nowimg*-730},1000)
                }else{
                    nowimg=0
                    $(".box-in").animate({"left":6*-730},1000,function(){
                        $(".box-in").css("left",0)

                    })
                }
                $(".circle span").eq(nowimg).addClass('current').siblings().removeClass('current')

            }
            // 左按钮业务
            $(".zuo").click(function(){
                if(nowimg>0){
                    nowimg--
                    $(".box-in").animate({"left":nowimg*-730},1000)
                }else{
                    nowimg=5
                    $(".box-in").css({"left":6*-730},1000)
                    $(".box-in").animate({"left":nowimg*-730},1000)
                }
                $(".circle span").eq(nowimg).addClass('current').siblings().removeClass('current')
            })
            // 小圆点业务
            $(".circle span").click(function(){
                 nowimg=$(this).index()
           $(".circle span").eq(nowimg).addClass('current').siblings().removeClass('current')
                 $(".box-in").animate({"left":nowimg*-730}, 1000)
            });

            // 自动轮播

            timer=setInterval(rightFunc,2000)

            $(".box").mouseenter(function(){
                clearInterval(timer)
            })
            $(".box").mouseout(function(){
                clearInterval(timer)
                timer=setInterval(rightFunc,2000)
            })

        })

注意一定要引进jquery的包，格式为：

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>

src里面的是jquery的版本，不一定是3.1.1,其他版本也可以