jQuery实现轮播图（效果同 bilibili）

最新推荐文章于 2022-08-25 09:26:03 发布

原创最新推荐文章于 2022-08-25 09:26:03 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

前端专栏收录该内容

4 篇文章

订阅专栏

jQuery 实现轮播图

图片滚动（效果同 bilibili）

使用左浮动将所有图片拼接成一横条
通过整体滑动实现图片的切换效果
使用 overflow: hidden 将非当前显示图片隐藏

封装图片切换方法

            var leftX = 0;
            function changePic(el){
                el.addClass("on");
                el.siblings().removeClass("on");
                leftX = (-el.index())*400;
                $(".pic").animate({
                    left: leftX
                }, 500);
                $("#pic_title").text(imgTitleList[el.index()]);
            }

自动循环播放图片

            var timer;
            function autoPlay(el){
                timer = setInterval(function(){
                    if(el.index()>=4){
                        el = $(".trig>span").eq(0);
                    }else{
                        el = $(".trig>span").eq(el.index()+1);
                    }
                    changePic(el);
                }, 3000);
            }
            autoPlay($(".trig>span").eq(0));

添加鼠标点击切换事件

            $(".trig>span").click(function(){
                changePic($(this));
                clearInterval(timer);
                autoPlay($(this));
            });

完整源码

1、html 部分

		<div class="course_panel">
            <ul class="pic">
                <li>
                    <a href="javascript:;">
                        <img src="" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="" alt="">
                    </a>
                </li>
            </ul>
            <span id="pic_title">Web应用开发</span>
            <ul class="trig">
                <span class="on"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </ul>
        </div>

2、CSS 部分

.course_panel{
    position: relative;
    margin: 30px auto;
    width: 400px;
    height: 220px;
    overflow: hidden;
}
.pic{
    position: relative;
    width: 2000px;
    height: 220px;
}
.pic>li{
    list-style: none;
    width: 400px;
    height: 220px;
    float: left;
}
.pic>li>a>img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
#pic_title{
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0;
    background: -webkit-linear-gradient(transparent,rgba(0,0,0,.3));
    color: #fff;
    cursor: pointer;
    text-indent: 1em;
}
.course_panel .trig{
    position: absolute;
    right: 15px;
    bottom: 4px;
    cursor: default;
}
.course_panel .trig span{
    display: inline-block;
    margin-left: 8px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    background-image: url("../img/icons.png");
    background-position: -855px -790px;
    background-color: transparent;
    transition: none;
}
.course_panel .trig span:hover{
    background-position: -919px -790px;
}
.course_panel .trig span.on{
    background-position: -855px -727px;
    width: 18px;
    height: 18px;
}

3、Javascript 部分

       //    1、图片源
            var imgListUrl = ['1.png', '2.jpeg', '3.jpeg', '4.jpeg', '5.jpg'];
            var imgTitleList = ['Web程序设计', '移动开发', '大学物理', '计算机图形学', 'Python程序设计'];
            var imgList = $(".pic>li>a>img");
            for(let i = 0; i<5; i++){
                imgList.eq(i).attr("src","./img/"+imgListUrl[i]);
            }
            //  2、点击切换图片
            $(".trig>span").click(function(){
                changePic($(this));
                clearInterval(timer);
                autoPlay($(this));
            });
            var leftX = 0;
            function changePic(el){
                el.addClass("on");
                el.siblings().removeClass("on");
                leftX = (-el.index())*400;
                $(".pic").animate({
                    left: leftX
                }, 500);
                $("#pic_title").text(imgTitleList[el.index()]);
            }
        //    3、自动循环图片
            var timer;
            function autoPlay(el){
                timer = setInterval(function(){
                    if(el.index()>=4){
                        el = $(".trig>span").eq(0);
                    }else{
                        el = $(".trig>span").eq(el.index()+1);
                    }
                    changePic(el);
                }, 3000);
            }
            autoPlay($(".trig>span").eq(0));