用jquery实现图片轮播

╰+攻爆jí腚メ 2023-10-09 11:01 41阅读 0赞

用jquery简单实现图片轮播效果，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            ul {
                list-style: none;
            }
    
            .slideShow {
                width: 600px;
                height: 350px; /*其实就是图片的宽度和高度*/
                border: 1px #eeeeee solid;
                margin: 100px auto;
                position: relative;
                overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
            }
    
            .slideShow ul {
                width: 3000px;
                position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
            }
    
            .slideShow ul li {
                float: left; /*让五张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
                width: 600px;
            }
    
            .slideShow .showNav {
                position: absolute; /*用绝对定位给数字按钮进行布局*/
                right: 10px;
                bottom: 5px;
                text-align: center;
                font-size: 12px;
                line-height: 20px;
            }
    
            .slideShow .showNav span {
                cursor: pointer;
                display: block;
                float: left;
                width: 20px;
                height: 20px;
                background: #ff5a28;
                margin-left: 2px;
                color: #fff;
            }
    
            .slideShow .showNav .active {
                background: #b63e1a;
            }
        </style>
    </head>
    <body>
    <div class="slideShow">
        <ul>
            <li><a href="#"><img src="image/pic1.png" alt=""></a></li>
            <li><a href="#"><img src="image/pic2.png" alt=""></a></li>
            <li><a href="#"><img src="image/pic3.png" alt=""></a></li>
            <li><a href="#"><img src="image/pic4.png" alt=""></a></li>
            <li><a href="#"><img src="image/pic5.png" alt=""></a></li>
        </ul>
        <div class="showNav">
            <span class="active">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var slideShow = $(".slideShow"),    //获取最外层框架的名称
                    ul = slideShow.find('ul'),
                    showNumber = slideShow.find('.showNav span'),   //获取按钮
                    oneWidth = slideShow.find('ul li').eq(0).width();   //获取每个图片的宽度
                var timer = null;   //定时器返回值，主要用于关闭定时器
                var iNow = 0;   //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
                showNumber.on('click', function () {     //为每个按钮绑定一个点击事件
                    $(this).addClass('active').siblings().removeClass('active');    //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
                    var index = $(this).index();    //获取哪个按钮被点击，也就是找到被点击按钮的索引值
                    iNow = index;
                    ul.animate({'left': -oneWidth * iNow,})   //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
                });
    
                function autoplay() {
                    timer = setInterval(function () {   //打开定时器
                        iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
                        if (iNow > showNumber.length - 1) {  //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
                            iNow = 0;
                        }
                        showNumber.eq(iNow).trigger('click');   //模拟触发数字按钮的click
                    }, 2000);    //2000为轮播的时间
                }
    
                autoplay();
                slideShow.hover(function () {
                    clearInterval(timer);
                }, autoplay())
            })
        </script>
    </div>
    </body>
    </html>

未完待续。。。

转载于:https://www.cnblogs.com/Black-rainbow/p/9153751.html