广告轮播

2017-12-06 14:53:00
admin
原创
311
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最简单的轮播广告</title>
    <style>
        body, div, ul, li {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        body {
            background: #000;
            text-align: center;
            font: 12px/20px Arial;
        }

        #box {
            position: relative;
            width: 492px;
            height: 172px;
            background: #fff;
            border-radius: 5px;
            border: 8px solid #fff;
            margin: 10px auto;
        }

        #box .list {
            position: relative;
            width: 490px;
            height: 170px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        #box .list li {
            position: absolute;
            top: 0;
            left: 0;
            width: 490px;
            height: 170px;
            opacity: 0;
            transition: opacity 0.5s linear
        }

        #box .list li.current {
            opacity: 1;
        }

        #box .count {
            position: absolute;
            right: 0;
            bottom: 5px;
        }

        #box .count li {
            color: #fff;
            float: left;
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-right: 5px;
            overflow: hidden;
            background: #F90;
            opacity: 0.7;
            border-radius: 20px;
        }

        #box .count li.current {
            color: #fff;
            opacity: 0.7;
            font-weight: 700;
            background: #f60
        }
    </style>
</head>
<body>
<div id="box">
    <ul class="list">
        <li class="current" style="opacity: 1;"><img src="http://www.ybao.org/data/upload/201711/f_160d2c7f63fb114a4dafa118f5c7ce05.jpg" width="490" height="170"></li>
        <li style="opacity: 0;"><img src="http://www.ybao.org/data/upload/201711/f_674f16f3c119e914a23be05ad6ef7354.jpg" width="490" height="170"></li>
        <li style="opacity: 0;"><img src="http://www.ybao.org/data/upload/201711/f_8bcb33e0e806e89c10ebce10697908ad.jpg" width="490" height="170"></li>
        <li style="opacity: 0;"><img src="http://www.ybao.org/data/upload/201711/f_c4d8f6241029f2fe7cd9e583380b8adf.jpg" width="490" height="170"></li>
        <li style="opacity: 0;"><img src="http://www.ybao.org/data/upload/201711/f_abb8d9b71abefb372259a79f8056f68e.jpg" width="490" height="170"></li>
    </ul>
    <ul class="count">
        <li class="current">1</li>
        <li class="">2</li>
        <li class="">3</li>
        <li class="">4</li>
        <li class="">5</li>
    </ul>
</div>


<script>
    var box=document.getElementById('box');
    var uls=document.getElementsByTagName('ul');
    var imgs=uls[0].getElementsByTagName('li');
    var btn=uls[1].getElementsByTagName('li');
    var i=index=0;  //中间量,统一声明;
    var play=null;
    console.log(box,uls,imgs,btn);//获取正确

    //图片切换, 淡入淡出效果我是用(transition: opacity 0.8s linear)做的,不纠结、简单 在css里面
    function show(a){               //方法定义的是当传入一个下标时,按钮和图片做出对的反应
        for(i=0;i<btn.length;i++ ){
            btn[i].className='';       //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。
            btn[a].className='current';
        }
        for(i=0;i<imgs.length;i++){  //把图片的效果设置和按钮相同
            imgs[i].style.opacity=0;
            imgs[a].style.opacity=1;
        }
    }
    //切换按钮功能,响应对应图片
    for(i=0;i<btn.length;i++){
        btn[i].index=i;    //不知道你有没有发现,循环里的方法去调用循环里的变量体i,会出现调到的不是i的变动值的问题。所以我先在循环外保存住
        btn[i].onmouseover=function(){
            show(this.index);
            clearInterval(play); //这就是最后那句话追加的功能
        }
    }

    //自动轮播方法
function autoPlay(){
            play=setInterval(function(){  //这个paly是为了保存定时器的,变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
            index++;
            index>=imgs.length&&(index=0);//可能有优先级问题,所以用了括号,没时间测试了。
            show(index);
        },1000)
    }
    autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了

    //div的鼠标移入移出事件
    box.onmouseover=function(){
        clearInterval(play);
    };
    box.onmouseout=function(){
        autoPlay();
    };
    //按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。

</script>
</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227