js 切换轮播

2021/10/26 23:16:43

编程Tag： js 切换 function var 轮播 background Num images oDiv

本文主要是介绍js 切换轮播，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>

这篇关于js 切换轮播的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js 切换轮播

相关编程文章