jQuery实现一个简单的轮播图

最新推荐文章于 2024-04-09 14:54:37 发布

咳咳咳咳咳咳咳4444

最新推荐文章于 2024-04-09 14:54:37 发布

阅读量4.7k

点赞数 6

分类专栏：黑历史18-19

本文链接：https://blog.csdn.net/lincoco49/article/details/90247182

版权

黑历史18-19 专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一.轮播图内容组成

包括：4张图片，图片标号，向左翻页，向右翻页的几个部分，如下图所示：

二.实现功能

1.加载页面后，4张图片默认从第一张图片开始轮播，索引值为1。

2.当把鼠标over到图片上时，图片定住不动。

3.点击图片索引值可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播.

4.点击【向左翻页】/【向右翻页】可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播。

三.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="outer">
        <ul class="img">
            <li><img src="image/1.jpg"></li>
            <li><img src="image/2.jpg"></li>
            <li><img src="image/3.jpg"></li>
            <li><img src="image/4.jpg"></li>
        </ul>
        <ul class="num">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="btn_left button"> < </div>
        <div class="btn_right button"> > </div>

    </div>
</body>
</html>

四.CSS代码

1.图片的长宽与其父级div一致并填满div

        *{
            margin:0px;
            padding:0px;
        }
        
        .outer{
            position:relative;
            width:500px;
            height:300px;
            border:dashed cadetblue 2px;
            margin:0 auto;
        }
        ul li{
            list-style:none;
        }
        img{
            width:500px;
            height:300px;
            position:absolute;
            top:0px;
            left:0px;
        }
        .num{
            position:absolute;
            bottom:10px;
            font-size:0px;
            width:100%;
            text-align:center;
        }
        .num li{
            width:20px;
            height:20px;
            background-color:gray;
            border-radius:60%;
            text-align:center;
            line-height:20px;
            display:inline-block;
            font-size:10px;
            margin:3px;
            cursor:pointer;


        }
        .button{
            width:20px;
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:gray;
            opacity:0.6;
            position:absolute;
            top:50%;
            margin-top:-30px;
            font-size:20px;
            font-weight:bolder;
            display:none;
            cursor:pointer;
        }
        .btn_right{
            position:absolute;
            right:0px;
        }
        .outer:hover .button{
            display:block;
        }
        .outer .num li.current{
            background-color:red;
        }

五.js代码

        <script src="jquery-3.4.1.js"></script>
        <script>
        //初始时，索引1背景为红色，并显示第一张图片，
        $(".num li").first().addClass("current");
        $(".img li").first().show().siblings().hide();
        //鼠标over在索引值上时，切换图片，并将当前索引复制给全局变量i，便于接下来从当前图片开始轮播
        $(".num li").mouseover(function(){
            $(this).addClass("current").siblings().removeClass("current");
            var index=$(this).index();
            $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
            i=index;
        });
        i=0;//全局变量，记录当前轮播图的索引
        //播放下一张图片的函数
        function move(){
            i++;
            if (i>3){
                i=0;
            }
            $(".num li").eq(i).addClass("current").siblings().removeClass("current");
            $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);

        }
        //每2s播放下一张图片
        var time=setInterval(move,2000);
        //鼠标放在.outer区域时，轮播停止；离开时，轮播继续
        $(".outer").hover(function(){
            clearInterval(time)
        },function(){
            time=setInterval(move,2000);
        });
        //点击向右翻页

        $(".btn_right").click(function(){
            move();
        });

        //点击向左翻页时，先将i-2,再向右翻页
        $(".btn_left").click(function(){
            i=i-2;
            if (i<-1){
                i=2;
            }
            move();
        })

    </script>

咳咳咳咳咳咳咳4444

关注

6
点赞
踩
40

收藏

觉得还不错? 一键收藏
3
评论
jQuery实现一个简单的轮播图

一.轮播图内容组成包括：4张图片，图片标号，向左翻页，向右翻页的几个部分，如下图所示：二.实现功能1.加载页面后，4张图片默认从第一张图片开始轮播，索引值为1。2.当把鼠标over到图片上时，图片定住不动。3.点击图片索引值可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播.4.点击【向左翻页】/【向右翻页】可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播...
复制链接

扫一扫