jQuery_轮播图_淡入淡出效果（如何用jQuery实现一个淡入淡出轮播图）

最新推荐文章于 2024-09-18 14:12:23 发布

田江

最新推荐文章于 2024-09-18 14:12:23 发布

阅读量1.1w

点赞数 10

分类专栏： jQuery 文章标签： jQuery 轮播图淡入淡出

本文链接：https://blog.csdn.net/jiang7701037/article/details/79149321

版权

jQuery 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

解释：

jQuery做的轮播图，淡入淡出效果，没有使用面向对象

效果图：

思路图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        #box{
            position:relative;
            width:400px;
            height:300px;
        }
        img{
            position:absolute;
            width:400px;
            height:300px;
        }
        #imgId1{
            opacity:1;
        }
        #imgId2{
            opacity:0;
        }
        #imgId3{
            opacity:0;
        }
        #imgId4{
            opacity:0;
        }
        #imgId5{
            opacity:0;
        }
        ul{
            position:absolute;
            right:20px;
            bottom:10px;
            height:40px;
        }
        li{
            float:left;
            margin-left:10px;
            width:20px;
            height:20px;
            border-radius:50%;
            background-color:orange;
        }
        #leftArrow{
            position: absolute;
            left:0px;
            top:50%;
        }
        #rightArrow{
            position: absolute;
            right:0px;
            top:50%;
        }
    </style>
</head>
<body style="height:1000px;">
<div id="box">
    <img id="imgId1" src="img/timg1.jpg" />
    <img id="imgId2" src="img/timg2.jpg" />
    <img id="imgId3" src="img/timg3.jpg" />
    <img id="imgId4" src="img/timg4.jpg" />
    <img id="imgId5" src="img/timg5.jpg" />
    <ul id="btns">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="leftArrow" style="font-size: 50px">＜</div>
    <div id="rightArrow" style="font-size: 50px">＞</div>
</div>

</body>
</html>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

var arr=["timg1.jpg","timg2.jpg","timg3.jpg","timg4.jpg","timg5.jpg"];
var ord = 0;//代表当前图片的序号，从0开始。
var myTimer = null;

function  initUI() {
    $("#box li:first").css({"backgroundColor":"red"});
}

function  initEvent() {
    $("#box").mouseenter(function () {
        stopPlay();
    });

    $("#box").mouseleave(function () {
        autoPlay();
    });

    $("#box li").click(function () {
        goImg($("#box li").index(this));
    });

    $("#leftArrow").click(function () {
        let transord =ord-1;
        transord = transord<0?arr.length-1:transord;
        goImg(transord);
    });

    $("#rightArrow").click(function () {
        let transord =ord+1;
        transord = transord>arr.length-1?0:transord;
        goImg(transord);
    });
}

//1、自动播放
function autoPlay() {
    myTimer = setInterval(function () {
        //一、改变数据
        // 1、记录当前序号（淡出的图片序号）
        let outOrd = ord;
        //2、改变要显示的图片的序号（淡出图片序号加一）
        ord++;
        if(ord>arr.length-1){
            ord=0;
        }
        //二、改变外观
        let $img = $("#box img");
        //1、淡入淡出效果
        //让一张(outOrd)淡出 当前消失
        $img.eq(outOrd).animate({"opacity":0},2000);
        //让一张(ord)淡入下一张图片显示
        $img.eq(ord).animate({"opacity":1},2000);
        //2、改变豆豆的颜色；
        $("#box li").eq(ord).css({"backgroundColor":"red"}).siblings().css({"backgroundColor":"orange"});
    },3000);
}

//2、停止播放
function stopPlay() {
    window.clearInterval(myTimer);
}

//3、跳转到指定的图片
function  goImg(transOrd) {
    //一、改变数据
    // 1、记录当前序号（淡出的图片序号）
    let outOrd = ord;
    //2、改变要显示的图片的序号（传入的图片序号）
    ord=transOrd;
    if(ord>arr.length-1){
        ord=0;
    }
    //二、改变外观
    let $img = $("#box img");
    //1、淡入淡出效果
    //让一张(outOrd)淡出 当前消失
    $img.eq(outOrd).animate({"opacity":0},2000);
    //让一张(ord)淡入下一张图片显示
    $img.eq(ord).animate({"opacity":1},2000);
    //2、改变豆豆的颜色；
    $("#box li").eq(ord).css({"backgroundColor":"red"}).siblings().css({"backgroundColor":"orange"});
}

$(function () {
    //1、初始化界面
    initUI();
    //2、绑定事件
    initEvent();
    //3、自动播放
    autoPlay();
});

</script>