jquery多张单图自动轮播

最新推荐文章于 2020-09-08 17:13:24 发布

物以稀为贵yeah

最新推荐文章于 2020-09-08 17:13:24 发布

阅读量718

点赞数 1

分类专栏： Jquery 文章标签： jquery 轮播

本文链接：https://blog.csdn.net/github_38771368/article/details/74199750

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

物以稀为贵yeah

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery多张单图自动轮播

<!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">
复制链接

扫一扫