js定时器的练习（一）淘宝广告效果_淘宝中基于js的商品广告-优快云博客

本文介绍了一个简单的图片轮播器的实现过程，包括HTML结构、CSS样式和JavaScript交互逻辑。通过左右按钮切换不同图片，并实现了自动播放和鼠标悬停暂停功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一.要实现的效果

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>