Jquery淡入淡出轮播图

Posted 2020-11-26 hb88

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery淡入淡出轮播图相关的知识，希望对你有一定的参考价值。

Jquery淡入淡出轮播图

因为代码不多所以我就写一个html文件里了

html代码

<div class="banner">
　　<ul>
　　　　<li><a href="javascript:;"><img src="./1 (1).png" /></a></li>
　　　　<li><a href="javascript:;"><img src="./1 (2).png" /></a></li>
　　　　<li><a href="javascript:;"><img src="./1 (3).png" /></a></li>
　　　　<li><a href="javascript:;"><img src="./1 (4).png" /></a></li>
　　　　<li><a href="javascript:;"><img src="./1 (5).png" /></a></li>
　　</ul>
　　<div class="arrow">
　　　　<span class="arrow-l"><</span>
　　<span class="arrow-r">></span>
　　</div>
　　<ol>
　　　　<li class="dot"></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　</ol>
</div>

css代码

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background-color:#fff;
    }
    li{
        list-style:none;
    }
    .banner{
        width:1920px;
        height:450px;
        margin:100px auto;
        position:relative;
    
    .banner ul li{
        display:none;
        position:absolute;
    }
    .banner ul li:first-child{
        display:block;
    }
    .banner ul li a{
        display:block;
    }
    .banner ul li a img{
        width:1920px;
        height:auto;
    
    .arrow span {
        width:20px;
        height:30px;
        background:rgba(0,0,0,0.05);
        color:#fff;
        position:absolute;
        top:50%;
        transform:translate(0,-50%);
        line-height:30px;
        text-align:center;
        font-size:20px;
        cursor:pointer;
    }
    .arrow-l{
        left:20px;
    }
    .arrow-r{
        right:20px;
    }
    .banner ol{
        position:absolute;
        bottom:20px;
        right:60px;
    }
    .banner ol li {
        float: left;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(0,0,0,0.4);
        margin-left:12px;
        cursor:pointer;
        border:2px solid rgba(255,255,255,0.3);
    }
    .banner ol li.dot{
        border:2px solid rgba(0,0,0,0.4);
        background:#fff;
    }
</style>

javascript代码

<script>
    //切换图片函数
    function bannerImg(count,Img,dot) {
        //让索引为count的li元素显示出来,siblings其他li元素隐藏
        $(Img).eq(count).stop("slow").fadeIn().siblings("li").stop().fadeOut("slow");
        //切换当前索引的小圆点样式
        $(dot).eq(count).addClass("dot").siblings("li").removeClass("dot");
    }
    $(function () {
        var count = 0;
        var banImg = $(".banner ul li");
        var bandot = $(".banner ol li");
        //下一张
        $(".arrow-r").click(function () {
            count++;
            if (count == banImg.length) {
                count = 0;
            }
            bannerImg(count, banImg, bandot);
        });
        //上一张
        $(".arrow-l").click(function () {
            count--;
            if (count < 0) {
                count = banImg.length - 1;
            }
            bannerImg(count, banImg, bandot);
        });
        //小圆点控制轮播
        $(bandot).click(function () {
            count = $(this).index();
            bannerImg(count, banImg, bandot);
        })
        //定时器轮播
        var adTimer;
        adTimer = setInterval(function () {
            count++;
            if (count == banImg.length) {
                count = 0;
            }
            bannerImg(count, banImg, bandot);
        }, 3000);
        //鼠标移入停止轮播
        $(".banner").mouseover(function () {
            clearInterval(adTimer);
        });
        //鼠标移出开始轮播
        $(".banner").mouseout(function () {
            adTimer = setInterval(function () {
                count++;
                if (count == banImg.length) {
                    count = 0;
                }
                bannerImg(count, banImg, bandot);
            }, 3000);
        });
    }) 
</script>

完整的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body{
                background-color:#fff;
            }
            li{
                list-style:none;
            }
            .banner{
                width:1920px;
                height:450px;
                margin:100px auto;
                position:relative;
            }

            .banner ul li{
                display:none;
                position:absolute;
            }
            .banner ul li:first-child{
                display:block;
            }
            .banner ul li a{
                display:block;
            }
            .banner ul li a img{
                width:1920px;
                height:auto;
            }

            .arrow span {
                width:20px;
                height:30px;
                background:rgba(0,0,0,0.05);
                color:#fff;
                position:absolute;
                top:50%;
                transform:translate(0,-50%);
                line-height:30px;
                text-align:center;
                font-size:20px;
                cursor:pointer;
            }
            .arrow-l{
                left:20px;
            }
            .arrow-r{
                right:20px;
            }
            .banner ol{
                position:absolute;
                bottom:20px;
                right:60px;
            }
            .banner ol li {
                float: left;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: rgba(0,0,0,0.4);
                margin-left:12px;
                cursor:pointer;
                border:2px solid rgba(255,255,255,0.3);
            }
            .banner ol li.dot{
                border:2px solid rgba(0,0,0,0.4);
                background:#fff;
            }
        </style>
</head>
<body>
    <div class="banner">
        <ul>
            <li><a href="javascript:;"><img src="./1 (1).png" /></a></li>
            <li><a href="javascript:;"><img src="./1 (2).png" /></a></li>
            <li><a href="javascript:;"><img src="./1 (3).png" /></a></li>
            <li><a href="javascript:;"><img src="./1 (4).png" /></a></li>
            <li><a href="javascript:;"><img src="./1 (5).png" /></a></li>
        </ul>
        <div class="arrow">
            <span class="arrow-l"><</span>
            <span class="arrow-r">></span>
        </div>
        <ol>
            <li class="dot"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
<!-- 引入JQ框架 -->
<script src="./jquery-1.9.1.js"></script>
<script>
    //切换图片函数
    function bannerImg(count,Img,dot) {
        //让索引为count的li元素显示出来,siblings其他li元素隐藏
        $(Img).eq(count).stop("slow").fadeIn().siblings("li").stop().fadeOut("slow");
        //切换当前索引的小圆点样式
        $(dot).eq(count).addClass("dot").siblings("li").removeClass("dot");
    }
    $(function () {
        var count = 0;
        var banImg = $(".banner ul li");
        var bandot = $(".banner ol li");
        //下一张
        $(".arrow-r").click(function () {
            count++;
            if (count == banImg.length) {
                count = 0;
            }
            bannerImg(count, banImg, bandot);
        });
        //上一张
        $(".arrow-l").click(function () {
            count--;
            if (count < 0) {
                count = banImg.length - 1;
            }
            bannerImg(count, banImg, bandot);
        });
        //小圆点控制轮播
        $(bandot).click(function () {
            count = $(this).index();
            bannerImg(count, banImg, bandot);
        })
        //定时器轮播
        var adTimer;
        adTimer = setInterval(function () {
            count++;
            if (count == banImg.length) {
                count = 0;
            }
            bannerImg(count, banImg, bandot);
        }, 3000);
        //鼠标移入停止轮播
        $(".banner").mouseover(function () {
            clearInterval(adTimer);
        });
        //鼠标移出开始轮播
        $(".banner").mouseout(function () {
            adTimer = setInterval(function () {
                count++;
                if (count == banImg.length) {
                    count = 0;
                }
                bannerImg(count, banImg, bandot);
            }, 3000);
        });
    }) 
</script>
</body>
</html>

以上是关于Jquery淡入淡出轮播图的主要内容，如果未能解决你的问题，请参考以下文章

jQuery淡入淡出的轮播图

首页大屏广告效果 jquery轮播图淡入淡出

JQuery图片自适应窗口轮播图（淡入淡出效果）

js原生 JavaScript轮播图渐变淡入淡出效果实现（附代码）

淡入淡出轮播图

淡入淡出轮播图怎么解决闪白的问题