js 切换轮播

2021-10-26 22:32:47 阅读：124 来源： 互联网

标签：function oDiv 轮播 js images num 切换 background var

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{padding:0;margin:0;}
    li{list-style:none;}
    div{height:200px;width:470px;position:relative;margin:100px auto;}
    span,p{height:25px;background:#000;text-align:center;line-height:25px;color:#fff;display:block;}
    img{display:block;height:150px;}
    ul{position:absolute;top:-60px;left:30px;}
    li{width:50px;height:50px;background:#333;margin-left:10px;float:left;}
    .red{background:red;}
</style>
<script>
    window.onload=function() {
        var oDiv=document.getElementById('div1');
        var oSpan=oDiv.getElementsByTagName('span')[0];
        var oImg=oDiv.getElementsByTagName('img')[0];
        var oP=oDiv.getElementsByTagName('p')[0];
        var oUl=oDiv.getElementsByTagName('ul')[0];
        var oLi=oDiv.getElementsByTagName('li');

        var arr1=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
        var arr2=['图片一','图片二','图片三','图片四','图片五'];
        var num=0;
        var old=null;
        var tim=null;


        for(var i=0;i<arr1.length;i++){
            oUl.innerHTML+='<li></li>';
        }
        function xx(){
            oSpan.innerHTML=1+num+'/'+arr1.length;
            oImg.src=arr1[num];
            oP.innerHTML=arr2[num];
            for(var i=0;i<oLi.length;i++){
                oLi[i].className = '';
            }
            oLi[num].className = 'red';
        }
        xx();
        for(var i=0;i<oLi.length;i++){
            oLi[i].index=i;
            oLi[i].onclick=function(){
                num=this.index;
                xx();

  /*              old.style.background='';
                old=this;
                this.style.background='red';*/

            }
        }
        function setIn(){
        tim=setInterval (function(){
            num++;
            num%=arr1.length;
            xx();
        },1000)}
        setIn()
        oDiv.onmouseover=function(){
            clearInterval(tim);
        };
        oDiv.onmouseout=setIn;

    }

</script>
<div id="div1">
     <span>数量正在加载</span>
     <img src="">
     <p>图片信息正在加载</p>
     <ul>

     </ul>
</div>
<body>
</body>
</html>

标签：function,oDiv,轮播,js,images,num,切换,background,var
来源： https://www.cnblogs.com/anans/p/15468203.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js 切换轮播