jquery多张单图自动轮播

来源：互联网发布：哪个软件可以买双色球编辑：程序博客网时间：2024/06/07 14:13
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />        <meta name="renderer" content="webkit|ie-comp|ie-stand">        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">        <meta name="format-detection" content="telephone=no" />        <title>单图轮播</title>        <style>            * {                margin: 0;                padding: 0;                border: none;                box-sizing: border-box;            }            ul li {                list-style: none;            }            a {                text-decoration: none;            }            .clear {                clear: both;                overflow: hidden;            }            .lunboBox {                width: 232px;                height: 225px;                position: relative;                margin: 20px auto;            }            .lunbo {                width: 176px;                overflow: hidden;                height: 225px;                margin: 0 auto;                position: relative;            }            .lunbo ul {                width: 538px;                position: absolute;                top: 0;            }            .lunbo ul li {                float: left;                width: 176px;            }            .lunBo_img {                width: 110px;                height: 161px;                margin: 0 auto;            }            .lunBo_img img {                display: inline-block;                width: 110px;                height: 161px;            }            .lunboBox a.leftArrow,            .lunboBox a.rightArrow {                cursor: pointer;                display: inline-block;                width: 23px;                height: 37px;                position: absolute;                top: 64px;            }            .leftArrow {                left: 0;            }            .rightArrow {                right: 0;            }        </style>    </head>    <body>        <div class="lunboBox">            <a class="leftArrow">                <img src="images/left_arrow.png">            </a>            <div class="lunbo">                <ul class="clear">                    <li>                        <div class="lunBo_img">                            <a href="" class="lunboTitle">                                <img src="images/3-1.jpg" onerror="">                            </a>                        </div>                    </li>                    <li>                        <div class="lunBo_img">                            <a href="" class="lunboTitle">                                <img src="images/3-2.jpg" onerror="">                            </a>                        </div>                    </li>                    <li>                        <div class="lunBo_img">                            <a href="" class="lunboTitle">                                <img src="images/3-3.jpg" onerror="">                            </a>                        </div>                    </li>                </ul>            </div>            <a class="rightArrow">                <img src="images/right_arow.png">            </a>        </div>        <script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>        <script>            // 单图轮播js            var currentPositon = 0, // 点击之后要跳转的位置                currentPage = 0, // 点击之后要跳转到的页面（0, 1, 2）                imgLength = $('.lunBo_img img').length, // 轮播图片数量                step = $(".lunbo ul li").width(); // 移动的距离                isClick = 0; // 是否点击箭头进行跳转            // 点击左箭头            $(".leftArrow").click(function () {                currentPage--;                isClick = 1;                if(currentPage < 0) {                    currentPage = imgLength - 1;                    //移动到最后一张                    currentPositon = -step * (imgLength - 1);                } else {                    currentPositon += step;                }                //清除定时器                clearInterval(autoPlay);                changeTo(currentPositon);            });            // 点击右箭头            $(".rightArrow").click(function () {                currentPage++;                isClick = 1;                if(currentPage > imgLength - 1) {                    currentPage = 0;                    //移动到第一张                    currentPositon = 0;                } else {                    currentPositon += -step;                }                //清除定时器                clearInterval(autoPlay);                changeTo(currentPositon);            });            //移动位置            function changeTo(position) {                $(".lunbo ul").animate({                    left: position + "px"                }, 500, function() {                    console.log('进来了')                })                //如果当前是点击，则继续自动播放                if(isClick == 1) {                    isClick = 0;                    autoPalyAgain();                }            }            // 定时器自动变换3秒每次            var autoPlay = setInterval(function() {                currentPage++;                if(currentPage > imgLength - 1) {                    currentPage = 0;                    currentPositon = 0;                } else {                    currentPositon += -step;                }                changeTo(currentPositon);            }, 3000);            //再次自动播放            function autoPalyAgain() {                autoPlay = setInterval(function() {                    currentPage++;                    if(currentPage > imgLength - 1) {                        currentPage = 0;                        currentPositon = 0;                    } else {                        currentPositon += -step;                    }                    changeTo(currentPositon);                }, 3000);            }        </script>    </body></html>
阅读全文
1 0