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,其他版本也可以