jQuery系列（十三）：实现轮播

1、轮播一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .slider-list{

            width: 580px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        .slider-list .slider-wrapper{
            height: 470px;
        }
        .slider-wrapper ul{
            height: 100%;

            position: relative;

        }
        .slider-wrapper ul li{
            float: left;
            width: 590px;
            height: 470px;

        }
        .slider-wrapper ul li a{
            display: block;
            width: 100%;
            height: 100%;
        }
        .focus-img{
            width: 590px;
            height: 470px;
        }
        button{
            position: absolute;
            width: 24px;
            height: 40px;
            top: 50%;
            line-height: 40px;
            text-align: center;
            background-color: rgba(0,0,0,.2);
            color: white;
            font-size: 30px;
            border: 0;
            outline: none;
            cursor: pointer;
            z-index: 99;
        }
        button.next{
            right: 0;
        }
        button.prev{
            left: 0;
        }
        .slider-index{
            position: absolute;
            bottom: 10px;
            left:250px;
            z-index: 2;

        }
        .slider-index span{
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 2px solid red;
            border-radius: 50%;
        }
        .slider-index span.active{
            background-color: orange;
        }

    </style>
</head>
<body>
<div class="slider-list">
    <div class="slider-wrapper">
        <ul>

        </ul>
    </div>
    <button class="next">></button>
    <button class="prev"><</button>
    <div class="slider-index">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    $(function(){
        // 1.获取本地图片数据 590*470
        let imgArr = ['./5.jpg','./1.jpg','./2.jpg','./3.jpg','./4.jpg','./5.jpg','./1.jpg'];

        // 获取图片的宽度
        let imgWidth = 590;
        let len = $('span').length;

        // 2.遍历数据 将图片添加到ul中
        for(let i = 0;i < imgArr.length;i++){
            let width = i*imgWidth;
            $(`<li>
                    <a href="javascript:;">
                        <img src=${imgArr[i]} alt=${i}>
                    </a>
                </li>`).appendTo('.slider-wrapper ul').addClass('slider-item')

        }
        // 设置图片的类名
        $('img').addClass('focus-img');
        // 设置父盒子的总宽度
        $('.slider-wrapper').width((imgArr.length+1)*imgWidth);
        $('.slider-wrapper ul').width((imgArr.length+1)*imgWidth);
        // 初始化
        // 默认显示第一张图片
        init();
        function init(){
            $("ul").css("left",-imgWidth);
        }
        // 下一张
        $('button.next').click(function(event) {
            next();
        });

        // 控制图片显示第几张
        let count  = 1;
        function next(){

            if (count ===len+1) {
                count  = 2;
                $("ul").css("left",-imgWidth);
            }else{
                count++;
            }
            $('.slider-wrapper ul').stop().animate({left:-count*imgWidth},200);
            // 控制轮播图索引改变颜色
            if (count>len) {
                $("span").eq(0).addClass("active").siblings("span").removeClass("active");
            }else{

                $("span").eq(count-1).addClass("active").siblings("span").removeClass("active");
            }

        }
        // 给小圆圈添加点击事件
        $('span').click(function(){
            //自己的样式
            $(this).addClass("active").siblings("span").removeClass("active");
            count = $(this).index()+1;
            $("ul").animate({"left":-count*imgWidth},200);
        });
        setInterval(next,2000);
    })
</script>
</body>
</html>

2、轮播二

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul,ol{ list-style: none;}
        .wrapper{
            width: 580px;
            height: 240px;
            margin: 100px auto;
            /*overflow: hidden;*/
            position: relative;
        }
        .wrapper ul{
            width: 100%;
            height: 240px;
            overflow: hidden;

        }
        .wrapper ul li{
            float: left;
            width: 580px;
            height: 240px;
        }
        ol{
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 190px;
        }
        ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            background-color: #abc;
        }
        ol li.current{
            background-color: pink;
        }
    </style>
    <script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 根据ol下li的索引号，匹配ul下相对应li的索引号
            $(".wrapper ol li").mouseenter(function () {
                $(this).addClass("current").siblings().removeClass("current");
                $(".wrapper ul li").eq($(this).index()).stop().fadeIn("fast").siblings().stop().fadeOut();
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul>
        <li><img src="./1.png" alt=""/></li>
        <li><img src="./2.png" alt=""/></li>
        <li><img src="./3.png" alt=""/></li>
        <li><img src="./4.png" alt=""/></li>
        <li><img src="./5.png" alt=""/></li>
    </ul>
    <ol>
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
</html>

jQuery系列（十三）：实现轮播

猜你喜欢