jQuery实现层叠式炫酷图片轮播组件

最新推荐文章于 2026-05-05 08:55:11 发布

原创最新推荐文章于 2026-05-05 08:55:11 发布 · 6k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

jQuery 专栏收录该内容

14 篇文章

订阅专栏

该博客介绍了如何使用jQuery实现一个功能丰富的图片轮播组件，包括每4秒自动切换图片、点击箭头左右切换、点击横线按钮精确切换以及点击图片切换。在实现过程中，主要应用了CSS3的position: absolute、transform、transform-origin等特性，以实现平滑的动画效果和灵活的布局。同时，博主分享了不同于传统轮播图的实现思路，并提供了代码仓库链接供读者参考和交流。

实现效果

实现功能

功能一：进入界面，每4s图片切换

功能二：点击前后箭头能左右切换图片

功能三：点击下边的横线按钮能准确切换

功能四：点击相应图片也能切换

利用html+css3页面布局，其中用到了几个重要概念

1.position:absolut 脱离文档流概念

2.css3的新特性transform中的translate，使得图片能平滑平移，缩放

3.css3新特性transform-origin属性，改变图片位置的基准点

4.当然，还有最常见的水平垂直居中

思路

之前普通的轮播图思路：滑到那个横线，找到其对应的index；就将此index的图片设置成选定的css样式，其余的兄弟节点都移除选中样式。

这个轮播图不能用上边的思路，因为每个位置都有自己的样式，把index对应的图片设置成选定的样式，其余也得设置成相应的样式。所以用了arr数组对应样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播插件</title>
    <style type="text/css" rel="stylesheet">
        *{
            margin: 0;
            padding: 0;
        }
        /*想要图片出现重叠的效果*/
        .content{
            width: 100%;
            height: 420px;
            margin-top: 40px;
        }
        .list{
            width: 1200px;
            height: 300px;
            overflow: hidden;   /*溢出的隐藏掉，默认的是：内容不会被修剪，会呈现在元素框之外。*/
            position: absolute;
            left: 50%;
            margin-left: -600px;
        }
        li{
            list-style: none;
            position: absolute;   /*一定要设置这个*/
            top: 0;
            left: 0;
            opacity: 0;
            transition: all 0.3s ease-out;
        }
        img{
            border: none;
            width: 730px;
            height: 336px;
            float: left;
        }

        .p5{
            transform: translate3d(-224px,0,0) scale(0.81);
            transform-origin: 100% 25%;
            opacity: 0.8;
            z-index: 2;
        }
        .p4{
            transform:translate3d(224px,0,0) scale(1);
            z-index: 3;
            opacity: 1;
        }
        .p3{
            transform: translate3d(449px,0,0) scale(0.81);
            transform-origin: 100% 25%; /*改变基准的*/
            opacity: 0.8;
            z-index: 2;
        }
        .p2{
            transform:translate3d(672px,0,0) scale(0.81);
        }
        .p1{
            transform:translate3d(896px,0,0) scale(0.81);
        }
        .pre{
            left: 224px;
        }
        .next{
            right: 244px;
        }
        .button{
            position: absolute;
            top:35%;
            text-decoration: none;
            font-size: 70px;
            color: #ffffff;
            z-index: 5;
            }
        a:active{
            color: #000;
            opacity:0.5;
        }

        .buttons{
            position: absolute;
            width: 1200px;
            height: 30px;
            top:50%;
            left:50%;
            margin-top: -15px;
            margin-left: -600px;
            text-align: center;
        }
        .buttons a{
            display: inline-block;
            width: 35px;
            height: 5px;
            padding-top: 4px;
            cursor: pointer;
        }
        span{
            width: 35px;
            height: 1px;
            background: red;
            display: block;
        }
        .blue{
            background: blue;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="list">
        <ul>
            <li class="p5"><a href="#"><img src="images/1.jpg" alt=""></a></li>
            <li class="p4"><a href="#"><img src="images/2.jpg" alt=""></a></li>
            <li class="p3"><a href="#"><img src="images/3.jpg" alt=""></a></li>
            <li class="p2"><a href="#"><img src="images/4.jpg" alt=""></a></li>
            <li class="p1"><a href="#"><img src="images/5.jpg" alt=""></a></li>
        </ul>
        <a href="javascript:;" class="pre button"><</a>
        <a href="javascript:;" class="next button">></a>
    </div>


    <!--下面的横线按钮-->
    <div class="buttons">
        <a href="javascript:;"><span class="blue"></span></a>
        <a href="javascript:;"><span></span></a>
        <a href="javascript:;"><span></span></a>
        <a href="javascript:;"><span></span></a>
        <a href="javascript:;"><span></span></a>

    </div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/imagePlayer.js"></script>
</body>
</html>

jQuery代码，其中有详细注释就不细说了

var cArr = ["p5","p4","p3","p2","p1"];
var $s = $(".buttons span");
var $a = $(".buttons a");
var index=0;
$(".next").click(function () {
    nextImg();

});
$(".pre").click(function () {
    preImg();
});
function nextImg() {
    cArr.unshift(cArr[4]);//向开头添加p1
    cArr.pop();//把最后的p1删掉，最终数组是【p1,p5,p4,p3,p2】
    $("li").each(function (i, e) {
        $(e).removeClass().addClass(cArr[i]);
    })
    index++;
    if (index>4){
        index = 0;
    }
    show();
}
function preImg() {
    cArr.push(cArr[0]);//向数组末尾添加p5
    cArr.shift();//把开头的p5删掉，最终数组是【p4,p3,p2,p1,p5】
    $("li").each(function (i, e) {
        $(e).removeClass().addClass(cArr[i]);
    })
    index--;
    if(index<0){
        index = 4;
    }
    show();
}
//改变底下按钮的背景色
function show(){
    $($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
    //$($s).eq(index).addClass("blue").parent()意思是当前的span添加上蓝色之后，他的父元素a
    //$($s).eq(index).addClass("blue").parent().siblings() 这个找到除了自己之外的所有的a
    //$($s).eq(index).addClass("blue").parent().siblings().children()  所有a下边的span
}

//点下边的按钮切换图片
//这个思路一开始感觉毫无头绪，可是后才参考资料，琢磨，还真想出来一个
//按钮的index与前一次点击图片的index相减；判断这个差值dip和之前的相差多少
//是正数的话就是next图片，负数的话就是pre图片。dip是多少就循环几次
$a.each(function () {

    $(this).click(function () {

        var myIndex = $(this).index();
        var dipIndex = myIndex-index;
        if (dipIndex >= 0){
            for(var i=0;i<dipIndex;i++){
                cArr.unshift(cArr[4]);//向开头添加p1
                cArr.pop();
            }

        }
        else if (dipIndex < 0){
            for(var i=0;i<-dipIndex;i++){
                cArr.push(cArr[0]);//向数组末尾添加p5
                cArr.shift();//把开头的p5删掉，最终数组是【p4,p3,p2,p1,p5】
            }
        }
        $("li").each(function(i,e){
            $(e).removeClass().addClass(cArr[i]);
        })
        index = myIndex;
        show();
    });

});

//点击图片能切换的功能
//点击class为p3的图片
$(document).on("click",".p3",function(){
    nextImg();
});
//点击class为p5的图片
$(document).on("click",".p5",function(){
    preImg();
});

//自动播放功能
//			鼠标移入box时清除定时器
$(".content").mouseover(function(){
    clearInterval(timer);
})

//			鼠标移出box时开始定时器
$(".content").mouseleave(function(){
    timer=setInterval(nextImg,4000);
})

//			进入页面自动开始定时器
timer=setInterval(nextImg,4000);

代码地址：https://github.com/yingzi4773/imagePlayer

欢迎大家批评指正