js实现图片自动切换

本文链接： https://blog.csdn.net/weixin_45747808/article/details/102689892

HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="qiehuan2.css">

<script>
window.οnlοad=function(){
    var oDiv=document.getElementById("box");
    var oImg=oDiv.getElementsByTagName("img")[0];
    var oSpan=oDiv.getElementsByTagName("span")[0];
    var oP=oDiv.getElementsByTagName("p")[0];
    var oUl=oDiv.getElementsByTagName("ul")[0];
    var oLi=oUl.getElementsByTagName("li");

    var arrUrl=['1.png','2.png','3.png','4.png'];
    var arrText=['图片一','图片二','图片三','图片四'];
    var num=0;

    //初始化
    function fnTab(){
        oImg.src=arrUrl[num];
        oSpan.innerHTML=1+num+'/'+arrUrl.length;
        oP.innerHTML=arrText[num];
        for(var i=0;i<oLi.length;i++){
            oLi[i].className='';
        }
        oLi[num].className='active';
    }
    fnTab();

    //计时
    var timer=null;
    function show(){
        num++;
        num%=arrText.length; //计算播放哪张图片
        fnTab();
    }

    function autoPlay(){
        timer=setInterval(show,1000); //图片播放间隔为1秒
    }

    setTimeout(autoPlay,1000); //1秒后自动播放

    function stopPlay(){
        clearTimeout(timer);
    }
    oDiv.onmouseover = stopPlay;

    oDiv.onmouseout = autoPlay;

    for(var i=0;i<oLi.length;i++){
        oLi[i].index=i;
        oLi[i].οnclick=function (){
            num=this.index;
            fnTab();
        };
    }

};
</script>
</head>

<body>
<div id="box" class="box">
<img src=""/>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

CSS代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片自动切换</title>
<link rel="stylesheet" type="text/css" href="qiehuan2.css">

<script>
window.οnlοad=function(){
    var oDiv=document.getElementById("box");
    var oImg=oDiv.getElementsByTagName("img")[0];
    var oSpan=oDiv.getElementsByTagName("span")[0];
    var oP=oDiv.getElementsByTagName("p")[0];
    var oUl=oDiv.getElementsByTagName("ul")[0];
    var oLi=oUl.getElementsByTagName("li");

    var arrUrl=['1.png','2.png','3.png','4.png'];
    var arrText=['图片一','图片二','图片三','图片四'];
    var num=0;

    //初始化
    function fnTab(){
        oImg.src=arrUrl[num];
        oSpan.innerHTML=1+num+'/'+arrUrl.length;
        oP.innerHTML=arrText[num];
        for(var i=0;i<oLi.length;i++){
            oLi[i].className='';
        }
        oLi[num].className='active';
    }
    fnTab();

    //计时
    var timer=null;
    function show(){
        num++;
        num%=arrText.length; //计算播放哪张图片
        fnTab();
    }

    function autoPlay(){
        timer=setInterval(show,2000); //图片播放间隔为2秒
    }

    setTimeout(autoPlay,2000); //2秒后自动播放

    function stopPlay(){
        clearTimeout(timer);
    }
    oDiv.onmouseover = stopPlay;

    oDiv.onmouseout = autoPlay;

    for(var i=0;i<oLi.length;i++){
        oLi[i].index=i;
        oLi[i].οnclick=function (){
            num=this.index;
            fnTab();
        };
    }

};
</script>
</head>

<body>
<div id="box" class="box">
<img src=""/>
<span>数量正在加载中...</span>
<p>文字说明正在加载中...</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

js实现图片自动切换

猜你喜欢