1 用jquery书写
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
text-align:center;
}
div{
/* background-color:blue; */
margin-top:100px;
margin-left:auto;
margin-right:auto;
width:400px;
height:400px;
}
div img{
width:100%;
height:100%;
}
</style>
<script type="text/javascript">
// var pic=document.getElementById("picShow"); //此为null，因为此时，picShow类还没有加载。
//ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件),onload必须所有的都要加载完成。
$(document).ready(function(){
var imgs=$(".picShow img");
var length=imgs.length;
imgs.hide();//全部隐藏
var i=0;
imgs.eq(i).show();//第一个显示
setInterval(function(){
imgs.eq(i).hide();
i++;
if(i==length){
i=0;
}
imgs.eq(i).show();
},3000);
});
function hideImage(){
var imgShow=document.getElementById("imgShow");
imgShow.style.display="none";
}
function showImage(){
var imgShow=document.getElementById("imgShow");
imgShow.style.display="block";
}
</script>
<body>
<div class="picShow">
<img src="./images/1.jpg" alt="无法显示图片1"/>
<img src="./images/2.jpg" alt="无法显示图片2"/>
<img src="./images/3.jpg" alt="无法显示图片3"/>
<img src="./images/4.jpg" alt="无法显示图片4"/>
</div>
<hr/>
<br/>
<img id="imgShow" src="./images/1.jpg" alt="无法显示图片1" width="100px" height="100px"/>
<input type="button" value="图片隐藏" οnclick="hideImage()"/>
<input type="button" value="图片隐藏" οnclick="showImage()"/>
</body>
2 用纯的JS书写
function rollImage(){
var divT=document.getElementById("picShowTwo");
var imgs=divT.getElementsByTagName("img");
var length=imgs.length;
var i=0;
for(i=0;i<length;i++){
imgs[i].style.display='none'; //全部隐藏
}
i=0;
imgs[i].style.display='block'; //全部隐藏
setInterval(function(){
imgs[i].style.display="none";
i++;
if(i==length){
i=0;
}
imgs[i].style.display="block";
},4000);
}
</script>
<input type="button" value="开始为4个图片，点击后下部图片开始翻转" οnclick="rollImage()"/>
<div id="picShowTwo">
<img src="./images/1.jpg" alt="无法显示图片1"/>
<img src="./images/2.jpg" alt="无法显示图片2"/>
<img src="./images/3.jpg" alt="无法显示图片3"/>
<img src="./images/4.jpg" alt="无法显示图片4"/>
</div>
3347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
