jQuery实现一个简单的轮播图

一.轮播图内容组成

包括: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>

 

  • 6
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值