js实现图片自动切换

最新推荐文章于 2024-07-19 11:13:21 发布

yanner_

最新推荐文章于 2024-07-19 11:13:21 发布

阅读量2.3k

点赞数 1

分类专栏： js动态效果文章标签： html javascript

本文链接：https://blog.csdn.net/yanner_/article/details/78408694

版权

js动态效果专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这里写图片描述
说明：通过计时器使得图片每间隔几秒可以自动切换，也可以通过鼠标的点击控制播放的图片。
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.onload=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].onclick=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>

css代码：

body{
background:#333;
}

.box{
width:400px;
height:500px;
margin:20px auto;
position:relative;
background-color:#fff;
}
.box img{
width:400px;
height:500px;
}
.box span{
width:400px;
height:30px;
top:0;
position:absolute;
line-height:30px;
text-align:center;
color:#fff; 
background:#000;
}
.box p{
width:400px;
height:30px;
bottom:0;
margin:0;
position:absolute;
line-height:30px;
text-align:center;
color:#fff; 
background:#000;
}
.box ul{
padding:0;
margin:0;
width:40px;
position:absolute; 
top:0; 
right:-50px; 
}
.box li { 
list-style:none; 
width:40px;
height:40px; 
margin-bottom:5px;
background:#666; 
}
.box .active { background:#FC3; }