jquery实现轮播图，banner图demo（带下标与左右）

最新推荐文章于 2021-06-09 22:26:07 发布

勾勾g

最新推荐文章于 2021-06-09 22:26:07 发布

阅读量405

点赞数

分类专栏：杂记

本文链接：https://blog.csdn.net/qq_44114279/article/details/106402926

版权

杂记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

在这里插入图片描述

直接复制即可完美运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #img-box {
            position: relative;
            border: 25px solid #ccc;
            margin: 100px auto;
        }

        #img-box img {
            position: absolute;
            display: block;
            opacity: 0;
            float: left;
            cursor:pointer;
        }

        #img-box #img-left,
        #img-box #img-right{
            position: absolute;
            width: 65px;
            height: 120px;
            border: 4px solid thistle;
            border-radius: 6px;
            background-color: black;
            opacity: 0.6;
            cursor: pointer;
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 120px;
        }

        #img-box #img-left {
            left: 1px;
            top: 31%;
        }

        #img-box #img-right {
            right: 1px;
            top: 31%;
        }
        #img-box #img-num{
            position:absolute;
            width:500px;
            height:50px;
            /* border:2px solid red; */
            bottom:0px;
            left:15%;
            display:flex;
            flex-direction:row;
            justify-content:space-around;
        }
        #img-box #img-num li{
            display:inline-block;
            list-style:none;
            font-size:14px;
            color:#fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            width:45px; 
            height:40px;
            border-radius: 50%;
            background-color:black;
        }
    </style>
<script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        var imgLeath = $("img").length;
        var liLeath = $("li").length;
        // console.log(imgLeath)
        // 显示图片的下标 (全局变量)
        var n = 0;
        //设置定时器timer
        var timer = setInterval(time, 4000);
        // 轮播函数
        // index 为 隐藏图片 ondex为显示的图片
        function time() {
            n++;
            if (n == imgLeath) {
                n = 0;
            }
            for(var i=0; i<imgLeath; i++) {
                $("#img-box img").eq(i).fadeTo(0,0);
            }
            $("#img-box img").eq((n)).delay(50).fadeTo(500, 1);
           
        }
        //设置点击切换效果 (右)
        var rightteum;
        $("#img-right").click(function () {
            for (var i = 0; i < imgLeath; i++) 
            {
                if ($("#img-box img").eq(i).css("opacity") != '0') 
                {
                    // 获取当前图片显示的下标
                    righteum = i;
                }
                
            }
            if(righteum == 5) 
            {
                righteum = 5;
            }
            n = (righteum);
            time();
        });
        // 设置点击切换效果 (左)
        var lefteum;
        $("#img-left").click(function () {
            for(var i=0; i<imgLeath; i++){
                if($("#img-box img").eq(i).css("opacity") != '0'){
                    // 获取当前图片的下标
                    lefteum = i;
                } 
            }
            if(lefteum == 0){
                lefteum = 6;
            }
            n = (lefteum-2);
            time();
        });
        // 当鼠标移入框内 轮播图停止
        $("#img-box").mouseover(function(){
            clearInterval(timer);
        });
        //当鼠标移出框内 轮播图进行
        $("#img-box").mouseout(function(){
            timer = setInterval(time,4000);
        });

        //点击li序号  图片就切换到那一张
        for(var i=0; i<liLeath; i++) {
            //闭包问题
            (function(i){
                $("#img-num li").eq(i).click(function(){
                    // i为切换图片的下标
                    console.log(i);
                    //把 (i-1) 传给 n 因为在 time() 函数中 要进行 n++
                    n = (i-1);
                    time();
                });
            })(i)
        }
    })
</script>
</head>
<body>
    <div id="img-box" style="width:700px; height:350px;">
        <img style="opacity: 1;" width="700px" height="350px" id="imgis" alt="《雪人奇缘》动画电影桌面壁纸"
            src="https://img.ivsky.com/img/bizhi/pre/201909/25/abominable-003.jpg">
        <img width="700px" height="350px" id="imgis" alt="葱翠的竹林图片"
            src="https://img.ivsky.com/img/tupian/pre/201902/13/zhulin.jpg">
        <img width="700px" height="350px" id="imgis" alt="汹涌的海浪图片"
            src="https://img.ivsky.com/img/tupian/pre/201903/14/hailang-001.jpg">
        <img width="700px" height="350px" id="imgis" alt="计时的沙漏图片"
            src="https://img.ivsky.com/img/tupian/pre/201903/14/shalou-002.jpg">
        <img width="700px" height="350px" id="imgis" alt="油菜花图片"
            src="https://img.ivsky.com/img/tupian/pre/201902/13/youcaihua-002.jpg">
        <img width="700px" height="350px" id="imgis" alt="紫乐多肉图片"
            src="https://img.ivsky.com/img/bizhi/pre/201906/27/yingguo_duanmaomao-008.jpg">
        <div id="img-left"> < </div> 
        <div id="img-right"> > </div>
        <div id="img-num">
                <li class="num-one">0</li>
                <li class="num-two">1</li>
                <li class="num-three">2</li>
                <li class="num-four">3</li>
                <li class="num-five">4</li>
                <li class="num-six">5</li>
        </div>
    </div>
</body>
</html>

勾勾g

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现轮播图，banner图demo（带下标与左右）

直接复制即可完美运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.
复制链接

扫一扫

专栏目录