用jQuery实现旋转木马效果的轮播图及解决按钮的闪烁问题

2024-03-08 23:06:58

总效果：

代码主结构：

<body>
<div class="slide-warp">
    <ul class="list">
        <li><a href="###"><img src="images/slidepic5.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic8.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic9.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic6.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic2.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic4.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic7.jpg" alt=""></a></li>
    </ul>
    <div class="arrow">
        <i class="left-btn"></i>
        <i class="right-btn"></i>
    </div>
</div>
</body>

解决按钮闪烁问题：

问题代码:
鼠标在 li 上按钮不会闪烁，但当鼠标移动到按钮上时，按钮不停闪烁

// 3. 鼠标移入 .slide-warp大盒子的时候，要显示左右按钮 ,离开大盒子，要隐藏左右按钮
        $(".slide-warp>ul>li").mouseenter(function () {
            arrow.show();
        }).mouseleave(function () {
            arrow.hide();
        });

解决：
在之前代码的前提下，当鼠标移动到按钮上时，它已经不满足出发 li 的鼠标事件了，此时鼠标进入的时 .arrow 的 div 里。所以把对象换成 .slide-warp 大盒子就OK 啦（利用到冒泡）

$(".slide-warp").mouseenter(function () {
           arrow.show();
       }).mouseleave(function () {
           arrow.hide();
       });

总代码：

思路：

要记得把图片都脱离文档里才可以移动；
把每张图片的位置效果(css)放在一个数组pos里，到时候通过点击左右按钮来改变数组的顺序，然后再把图片放到对应的位置即可；
要先了解数组的删除、追加方法：
点右按钮（效果）：图片左移——删除 pos 数组第一个并追加到最后；
点做按钮：图片右移——删除数组最后一个并添加到数组第一个的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转木马</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .slide-warp {  //这个可以不脱离文档流，自己随意
            position: absolute;
            top: 50px;
            left: 13%;
            width: 1000px;
            height: 300px;
            margin: 0 auto;
            box-sizing: border-box;
            /*border: 1px solid #ddd;*/
            overflow: hidden;
        }

        ul {
            list-style: none;
            position: relative;
            left: 210px;
            top: 0;
        }
        ul li{
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 15px;
        }
        li img{
            width: 100%;
            height: 100%;
            border-radius: 15px;
        }

        .arrow{
            display: none;
            width: 100%;
        }

        .left-btn {
            background: url("images/left-btn.png") no-repeat;
            width: 40px;
            height: 50px;
            position: absolute;
            top: 40%;
            left:0;
            cursor: pointer;
            z-index: 100;
        }

        .right-btn {
            background: url("images/right-btn.png") no-repeat right;
            width: 40px;
            height: 50px;
            position: absolute;
            top: 40%;
            right: 0;
            cursor: pointer;
            z-index: 100;
        }

    </style>
</head>
<script src="../../jQuery版本/jquery-1.12.4.min.js"></script>
<script>
    $(function () {
     //把每张图片的位置效果(css)放在一个数组pos里，到时候通过点击左右按钮来改变数组的顺序，然后再把图片放到对应的位置即可
        var pos = [
            {//1
                width: 504,
                height: 261,
                top:20,
                left:-315,
                opacity: 0,
                z: 1
            },
            {//2
                width: 504,
                height: 261,
                top:20,
                left:-210,
                opacity: 0.8,
                z: 2
            },
            {//3
                width: 580,
                height: 300,
                top:0,
                left:0,
                opacity: 1,
                z: 3
            },
            {//4
                width: 504,
                height: 261,
                top:20,
                left:286,
                opacity: 0.8,
                z: 2
            },
            {//5
                width: 504,
                height: 261,
                top:20,
                left:391,
                opacity: 0,
                z: 1
            },
            {//6
                width: 504,
                height: 261,
                top:20,
                left:496,
                opacity: 0,
                z: 1
            },
            {//7
                width: 504,
                height: 261,
                top:20,
                left:690,
                opacity: 0,
                z: 1
            }
        ];

        // 获得要操作的对象
        var lis = $(".slide-warp>ul>li");
        var arrow=$(".arrow");
        var flag = true;


        // 让每个li标签走到指定的位置
        assign();

        function assign() {
            $.each(pos, function (index, ele) {
                // index是索引号  ele是数组中的对象
                lis.eq(index).css("zIndex", ele.z).stop().animate(ele, 500, function () {
                    flag = true;
                });
            });
        }


        // 鼠标移入大盒子的时候，要显示左右按钮 ,离开大盒子，要隐藏左右按钮
        //用 $(".slide-warp>ul>li,.arrow")===加上.arrow的作用是防止按钮图片闪烁
        // 或者用：$(".slide-warp")
        $(".slide-warp").mouseenter(function () {
            arrow.show();
        }).mouseleave(function () {
            arrow.hide();
        });


		// 给右侧按钮注册事件
       $(".left-btn").on("click", function () {
            if (flag) {
                flag = false;
                pos.push(pos.shift());
                // 数组现在是重新排列的了，再让li标签根据新的数组，重新生成自己的样式
                assign();
            }
        });
        

        // 给左侧按钮注册事件
        $(".right-btn").on("click", function () {
            if (flag) {
                flag = false;
                pos.unshift(pos.pop());
                assign();
            }
        });
        
    });
</script>
<body>
<div class="slide-warp">
    <ul class="list">
        <li><a href="###"><img src="images/slidepic5.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic8.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic9.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic6.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic2.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic4.jpg" alt=""></a></li>
        <li><a href="###"><img src="images/slidepic7.jpg" alt=""></a></li>
    </ul>
    <div class="arrow">
        <i class="left-btn"></i>
        <i class="right-btn"></i>
    </div>
</div>
</body>
</html>

码农公寓

总效果：

代码主结构：

解决按钮闪烁问题：

总代码：

相关文章