用jquery实现图片轮播

用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="data:image/pic1.png" alt=""></a></li>

        <li><a href="#"><img src="data:image/pic2.png" alt=""></a></li>

        <li><a href="#"><img src="data:image/pic3.png" alt=""></a></li>

        <li><a href="#"><img src="data:image/pic4.png" alt=""></a></li>

        <li><a href="#"><img src="data: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>
未完待续。。。
巴特西

用jquery实现图片轮播

最新文章

热门文章
