简单轮播图1（从上往下）

最新推荐文章于 2023-06-15 21:01:09 发布

R_March

最新推荐文章于 2023-06-15 21:01:09 发布

阅读量2.2k

点赞数 1

分类专栏： js轮播图1 文章标签： js轮播图

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

版权

js轮播图1 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图1</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/轮播图.css" />
        <script type="text/javascript" src="../js/basics.js"></script>
        <script type="text/javascript" src="../js/轮播图2.js"></script>
    </head>
    <body>
        <div id="wrap">
            <div id='box'>
                <ul class="clear" id="list">
                    <li>
                        <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="aside">
                <ul>
                    <li>
                        <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;
    margin: 100px auto 0;
    position: relative;
}

#box{
    width: 900px;
    height: 400px;
    position:absolute;
    top:0;
    left: 0;
    border: solid 2px palegreen;
    overflow: hidden;
}

#box ul{
    position: absolute;
}
#box ul li{
    height: 400px;
    width: 900px;
}
#box ul li img{
    height: 400px;
    width: 900px;
    float: left;
}


#aside{
    width:100px;
    position:absolute;
    right: 0;
    top: 38px;
}
#aside ul li{
    margin: 5px 0;
    cursor: pointer;
}
#aside ul li img{
    height: 60px;
    width: 100px;
    display: block;
    opacity: 0.5;
    filter: aplha(opacity = 50);
}
#aside ul .liNone{
    display: none;
}

js部分

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


    oUl.appendChild(lis[0].cloneNode(true));  //克隆第一个节点

    oUl.style.height = lis[0].offsetHeight*lis.length + 'px';   //设置ul的高度


    var liHeight = lis[0].offsetHeight;       //单个li的高度
    var asideDiv = $('aside');                //旁边的图标栏
    var asideLis = asideDiv.getElementsByTagName('li');





    var i = 0;
    var timer = setInterval(function(){
        i++;  //定时器一开，则滑动到第二张图片
        move();

    },1000);


    function move(){

        if(i == lis.length){   
            oUl.style.top = 0 +'px';
            i = 1;   //从第二张图片开始滑动
        }

        animate(oUl,'top',liHeight*-i);  //自己封装的方法用于改变指定元素的指定属性

        if(i ==  asideLis.length){   //设置侧边栏图片透明度
            animateOpacity(asideLis[0].children[0],100);
            for(var j = 1; j < asideLis.length;j++){
                animateOpacity(asideLis[j].children[0],30);
            }
//          animateOpacity(asideLis[0].children[0],100,function(){  //这种方法就是一闪而过
//              animateOpacity(asideLis[0].children[0],30);
//          });

        }else{
            animateOpacity(asideLis[i].children[0],100);
            for(var j = 0; j < asideLis.length;j++){
                if(j != i){
                    animateOpacity(asideLis[j].children[0],30);
                }
            }
//          animateOpacity(asideLis[i].children[0],100,function(){
//              animateOpacity(asideLis[i].children[0],30);
//          });

        }



    }
    //鼠标在小图标上停住，离开继续动画
    for(var k = 0; k < asideLis.length;k++){
        asideLis[k].index = k;
        asideLis[k].onmouseover = function(){
            i = this.index;
            move();
            clearInterval(timer);

        }
        asideLis[k].onmouseout= function(){
            timer = setInterval(function(){
                i++;  //定时器一开，则滑动到第二张图片
                move();
            },1000);
        }
    }



    //鼠标滑到大图片上时停住
    box.onmouseover = function(){
        clearInterval(timer);
    };
    box.onmouseout = function(){
        timer = setInterval(function(){
            i++;  //定时器一开，则滑动到第二张图片
            move();
        },1000);
    };
};

第一种轮播图：
思路：
1、添加一个容器wrap
2、将ul设置为相对定位
3、将所有的图片垂直摆放
4、克隆ul的第一子节点（目的：当图片滑动到原来的最后一张时，不直接弹回第一张图片）加到ul的最后一个节点上并将所有li的高度和设置成ul的高度
5、设置一个定时器每隔指定时间，将ul的top值更新为 -i（用于记录li的个数）*单个li的高度（负号表示向下）.当i的值等于li的个数时，将ul的top值设为0px，将i的值设置为1（既从第二张图片开始继续轮播，因为最后一张（克隆的）和第一张图片是一样的）

以上的ul和li都是box中的
6、旁边的侧边栏（小图片）在图片轮播过程中，改变其对应的透明度。需注意，当i的值等于asideLis的长度时，改变第一个小图标的透明度
7、鼠标划入任意小图片，通过改变i的值，使i的值等于事件发生的位置，从而跳转到相应的大图。滑出时，再次开启定时器（若：小图标和大图在统一div中，并且给他们的包含块设置了移入删除定时器，移出添加定时器，则需注意当鼠标移除小图标时，是否会触发容器的鼠标事件）这里写图片描述

这里写图片描述

R_March

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简单轮播图1（从上往下）

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

扫一扫