js定时器的练习(一)淘宝广告效果

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

一.要实现的效果

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

二.效果图片

js定时器的练习(一)淘宝广告效果_第1张图片

三.代码

css部分


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+='
  • '+arrText[i]+'
  • '
    ; oUl[1].innerHTML+='
  • '+arrText[i+ len/2]+'
  • '
    ; } /*将创建的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>

    你可能感兴趣的:(学习日记)