jquery轮播图

来源：互联网发布：mysql 常用语句use 编辑：程序博客网时间：2024/06/16 16:08
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery轮播图</title>    <style>        *{margin:0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}        html,body {            width: 100%;  /*设置body，html宽度为全屏*/        }        body {            font: 16px/20px 'Microsoft yahei,微软雅黑';            color: #aacc25;        }        .clear:before,.clear:after {                content: "";            display: table;            clear: both;            height: 0;            overflow: hidden;        }        .all {            width: 100%; /*容器为body宽度*/            height: 560px;            margin: 0 auto;            overflow: hidden;        }        ul {            list-style: none;            width: 400%;            position: relative; /*设置相对定位，小圆点相对此元素进行绝对定位*/            height: 100%;   /*为ul设置高度，防止img超出高度*/            z-index: 333;        }        ul li {            position: relative; /*li相对定位，方便设置其left值*/            left: 0;            top: 0;            float: left;            width: 25%;         /*   transition: left 1s;*/        }        ul li img {            display:block;            width: 100%;            height: 100%;        }        .all p {            position: absolute;            left: 25px;            bottom: 15px;        }        .all p span {            display: inline-block;            width: 25px;            height: 25px;            border-radius: 50%;            -moz-border-radius: 50%;            background: #777777;            margin-right: 15px;            cursor: pointer;            z-index: 9999;        }        p span.current {            background: #006688;            cursor:default;        }    </style></head><body><div class="all">    <ul class="clear">        <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>        <p><span class="current"></span><span></span><span></span><span></span></p>    </ul></div><script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script><script>    var isRight=false,currentIndex= 0,distance=$(document).width(),isFast=false,speed=2000;    $("body").width(distance);    //alert("当前文档的宽度是："+distance);    var liLength=$("ul li").length;    var moveImg=null;    $(function(){      var  $target=$("ul li");        /*开启自动轮播*/        function start(){                moveImg=setInterval(function(){                    //点击的点的索引大于当前的索引就是向右，否则向左                    if(currentIndex>=0&¤tIndex<liLength-1){                        move($target);                        currentIndex++;                    }                    else if(currentIndex==0){                        $target.animate({"left":distance*3},500);                        currentIndex=3;                    }else if(currentIndex==3){                        $target.animate({"left": 0},500);                        currentIndex=0;                    }                    $("p span").eq(currentIndex).addClass("current").siblings().removeClass("current");                },speed);            if(isFast){               speed=2000;            }         console.log("speed:"+speed);        }        /*移动*/        function move(obj){            distance=isRight?distance:(-Math.abs(distance)); //Math.abs(distance);保证此数是正数。使用-distance会把全局的distance变为负数,导致distance得到的值不对            var leftDistance=distance*(currentIndex+1);            $(obj).animate({"left":leftDistance},500);        }        //当鼠标移动到li上时停止移动       $target.hover(function(){           clearInterval(moveImg);        },function(){            start();        });        /*点击小圆点时触发事件*/       $("p span").click(function(){            //判断点击的是不是带有current样式的点           var $this=$(this);            if(!$this.hasClass("current")){                /*判断左移还是右移动*/                $target.stop();                var thisIndex=$this.index();                isRight=thisIndex>currentIndex?false:true;//如果当前点击的索引大于currentIndex则是右移动，否则左移动                currentIndex=thisIndex-1;                isFast=true;                speed=1000;            }            else {                return false;            }        });        $(window).resize(function(){            distance=$(document).width();        });        start();    });</script></body></html>
1 0