js定时器的练习（一）淘宝广告效果

来源：互联网发布：股票同花顺软件下载编辑：程序博客网时间：2024/05/22 01:41

这几天在学习定时器，写了几个小练习！现在贴上来

一.要实现的效果

1.点击按钮切换图片
2.图片的自动切换

二.效果图片

这里写图片描述

三.代码

css部分

<style type="text/css">ul{ margin: 0; padding: 0; }li{ list-style: none; }#div1{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; }#div1 #L{ float: left; }#div1 #R{ float: right; }#div1 li{ width: 48px; height: 26px; border: 1px #ffadad solid; background: #fff7f7; color: #333; line-height: 26px; margin-bottom: 2px; cursor: pointer; }#div1 img{ height: 206px; width: 188px; }#div1 .active{ background: #ff8494; color: #fff }</style>

html

<body>    <div id="div1">        <ul id="L"></ul>        <img src="">        <ul id="R"></ul>    </div></body>

js

<script type="text/javascript">    window.onload=function(){        var div1=document.getElementById('div1');        var oUl=div1.getElementsByTagName('ul');        var oImg=div1.getElementsByTagName('img')[0];        var oLi=[];        var oL=oUl[0].getElementsByTagName('li');        var oR=oUl[1].getElementsByTagName('li');        /*这里的图片可以自换*/        var arrImg=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/1.png','img/2.png','img/3.png','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/1.png'];        var arrText=['海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼'];        var len=arrImg.length;        var oldNum=0;        var timer=null;        /*创建左右的li*/        for (var i = 0; i < len/2; i++) {            oUl[0].innerHTML+='<li>'+arrText[i]+'</li>';            oUl[1].innerHTML+='<li>'+arrText[i+ len/2]+'</li>';        }        /*将创建的li添加到数组oLi中*/        for (var i = 0; i < oL.length; i++) {            oLi.push(oL[i]);        }        for (var i = 0; i < oR.length; i++) {            oLi.push(oR[i]);        }        /*将图片加入--函数初始化*/        function fn(n){            oImg.src=arrImg[n];            oLi[oldNum].className='';            oLi[n].className='active';            oldNum=n;        }        fn(0);        /*点击li切换图片*/        for (var i = 0; i < len; i++) {            oLi[i].index=i;            oLi[i].onmouseover=function(){                fn(this.index);            }        }        /*定时切换图片*/        function show(n){            timer=setInterval(function(){                if (n==len-1) {                    speed=-1;                }else if (n==0) {                    speed=1;                }                n+=speed;                fn(n)            },1000)        }        show(0);        /*移入移出*/        div1.onmouseover=function(){            clearInterval(timer);        }        div1.onmouseout=function(){            show(oldNum);        }    }</script>

阅读全文

0 0