简单轮播图3（淡入淡出）

最新推荐文章于 2022-01-20 18:30:13 发布

R_March

最新推荐文章于 2022-01-20 18:30:13 发布

阅读量337

点赞数

分类专栏： js简单轮播图3 文章标签： js轮播图片

本文链接：https://blog.csdn.net/cainiao_xiao_bai/article/details/77856975

版权

js简单轮播图3 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

html部分

<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图淡入淡出</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/轮播图4.css" />
        <script type="text/javascript" src="../js/basics.js"></script>
        <script type="text/javascript" src="../js/轮播图4.js"></script>
    </head>
    <body>
        <div id="wrap">
            <div id='box'>
                <ul class="clear" id="list">
                    <li class="active">
                        <img src="../img/1504579720226.jpg" />
                    </li>
                    <li>
                        <img src="../img/1504579756992.jpg" />
                    </li>
                    <li>
                        <img src="../img/1504579814977.jpg" />
                    </li>
                    <li>
                        <img src="../img/1504579832741.jpg" />
                    </li>
                    <li>
                        <img src="../img/1504579877857.jpg" />
                    </li>
                </ul>
            </div>
            <div id='box2'>
                <ul class="clear">
                    <li class="active2">
                        <img src="../img/1504579720226.jpg"  />
                    </li>
                    <li>
                        <img src="../img/1504579756992.jpg" />
                    </li>
                    <li>
                        <img src="../img/1504579814977.jpg" />
                    </li>
                    <li>
                        <img src="../img/1504579832741.jpg" />
                    </li>
                    <li>
                        <img src="../img/1504579877857.jpg" />
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS部分

#wrap{
    width: 900px;
    height: 600px;
    margin: 100px auto 0;
}
#box{
    height: 450px;
    width: 800px;
    border: solid 2px #0000FF;
    position: relative;
}
#box ul li{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

#box ul li img{
    height: 450px;
    width: 800px;
    display:block;
}
#box ul .active{
    opacity: 1;
    filter: alpha(opacity=1);
}
#box2{
    margin-top: 20px;
    height: 150px;
    width: 800px;
}
#box2 ul li{
    float: left;
    margin-right: 75px;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

#box2 ul li:last-child{
    margin-right: 0;
}
#box2 ul li img{
    width: 100px;
    height: 90px;

}
#box2 ul .active2{
    opacity: 1;
    filter: alpha(opacity=100);
}

js部分

window.onload = function(){
    var box = $('box');
    var oUl = $('list');
    var lis = oUl.getElementsByTagName('li');

    var box2 = $('box2');
    var lis2 = box2.getElementsByTagName('li');
    var i = 0;
    var timer = setInterval(function(){
        i++;
        move();
    },1000);

    function move(){
        if(i == lis.length){
            i = 0;
        }
        //相等是同时改变二者的透明度
        for(var j = 0;j < lis.length;j++){
            if(j == i){
                animateOpacity(lis2[j],100);//封装的改变透明度的方法
                animateOpacity(lis[j],100);
            }else{
                animateOpacity(lis2[j],30);
                animateOpacity(lis[j],0);
            }
        }       
    }

    for(var k = 0; k < lis2.length;k++){
        lis2[k].index = k;
        lis2[k].onmouseover = function(){
            i = this.index;
            move();
            clearInterval(timer);
        };
        lis2[k].onmouseout = function(){
            timer = setInterval(function(){
                i++;
                move();
            },1000);
        };
    }

    box.onmouseover = function(){
        clearInterval(timer);
    };
    box.onmouseout = function(){
        timer = setInterval(function(){
            i++;
            move();
        },1000);
    };
};

注意事项：
1、与前面两个轮播图相似，只是改变了li的透明度
2、这里只是将所有的li叠加在一起，并没有添加字节点

R_March

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单轮播图3（淡入淡出）

html部分<html> <head> <meta charset="UTF-8"> <title>轮播图淡入淡出</title> <link rel="stylesheet" type="text/css" href="../css/reset.css" /> <link rel="stylesheet" type="text
复制链接

扫一扫