js实现淡入淡出轮播图

最新推荐文章于 2024-06-29 22:20:55 发布

mr_fzz

最新推荐文章于 2024-06-29 22:20:55 发布

阅读量3.9k

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/mr_fzz/article/details/53311917

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.图片淡入淡出自动轮播.
2.可以用按钮控制轮播.
效果图:
这里写图片描述
代码如下:
html+scc:

*{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
        }
        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 800px;
            height: 500px;
            overflow: hidden;
        }
        .list img{
            position: absolute;
            left: 0;
            top: 0;
            width: 800px;
            height: 500px;
            opacity: 0;
            z-index: 1;
            transition: all 1s;
        }
        .list img:first-child{
            opacity: 1;
            z-index: 2;
        }
        .buttons{
            position: absolute;
            left: 50%;
            bottom: 20px;
            margin-left: -90px;
            width: 180px;
            text-align: center;
            cursor: pointer;
            z-index: 2;
        }
        .buttons span{
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border-radius: 50%;
            background: #aaa;
            border: 1px solid #fff;
        }
        .buttons span:last-child{
            margin-right: 0;
        }
        .buttons .on{
            background: #000;
        }
        .arrow{
            display: none;
            position: absolute;
            top: 230px;
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.4);
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            color: #fff;
            z-index: 2;
        }
        .container:hover .arrow{
            display: block;
        }
        #pre{
            left: 0;
        }
        #next{
            right: 0;
        }
    </style>
</head>
<body>
<div id="container" class="container">
    <div id="list" class="list" >
        <img src="i/8绣春刀.jpg" alt="绣春刀">
        <img src="i/1当幸福来敲门.jpg" alt="当幸福来敲门">
        <img src="i/2蝙蝠侠黑暗骑士.jpg" alt="蝙蝠侠黑暗骑士">
        <img src="i/3后天.jpg" alt="后天">
        <img src="i/7无间道.jpg" alt="无间道">
    </div>
    <div id="buttonGroup" class="buttons">
            <span index="0" class="on"></span>
            <span index="1"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
    </div>
</div>

js:

function $(id) {
        return document.getElementById(id);
    }
    var buttonGroup=$("buttonGroup"),
        buttons=buttonGroup.getElementsByTagName('span'),
        list=$("list"),
        imgs=list.getElementsByTagName('img'),
        flag=0,
        container=$("container"),
        timer;
    function render(index){
        for(var i=0;i<imgs.length;i++){
            imgs[i].style.opacity="0";
            imgs[i].style.zindex="1";
        }
        imgs[index].style.zindex="2";
        imgs[index].style.opacity="1";
    }
    function bt_listen(event){
        if (event.target&&event.target.tagName.toLowerCase()=='span') {
            var index=event.target.getAttribute('index');
            flag=index;
            render(flag);
            showButton();
        }
    }
    function showButton(){
        for(var i=0;i<buttons.length;i++){
            buttons[i].className=buttons[i].className.replace(/\s*on/,"");
        }
        buttons[flag].className+=" on";
    }
    function play(){
        timer=setInterval(function(){
            if (flag==4) {
                flag=0;
            }else{
                flag++;
            }
            render(flag);
            showButton();
        },3000);
    }
    function stop(){
        clearInterval(timer);
    }   
    function start(){
        buttonGroup.addEventListener('click',bt_listen,false);
        container.addEventListener('mouseenter',stop,false);
        container.addEventListener('mouseleave',play,false);
        play();
    }   
    start();

思路:
让所有的图片都position:absolute,显示在一个容器内,设置除了第一张图片之外的所有图片opcity:0;将要显示的图片z-index设置为2,其他都设置为1.flag用来记录当前的索引值。
render(index)将索引为index的图片显示.
showButton()通过flag值来渲染当前图片对应的按钮.
bt_listen()为按钮的监听函数,取出当前被点击按钮的index属性,然后用render()函数来渲染图片,再调用showButton()渲染按钮.
play()为自动轮播函数,设置setInterval,当flag=4时,重置为0,否则flag++，然后调用render和showButton.