js 实现图片切换

最新推荐文章于 2023-08-08 00:14:46 发布

xkf520

最新推荐文章于 2023-08-08 00:14:46 发布

阅读量471

点赞数

本文链接：https://blog.csdn.net/xkf520/article/details/50177381

版权

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul li{
list-style: none;
}
ul li img{
width: 350px;
height: 300px;
}
</style>
<script src="./zepto.min.js"></script>
</head>
<body style="margin:0px;">
<ul>
<li>
<img src="./img/1.jpg">
</li>
<li>
<img src="./img/2.jpg" style="display: none">
</li>
<li>
<img src="./img/3.jpg" style="display: none">
</li>
</ul>

<script type="text/javascript">
function slide(dom){
//1.判断dom,dom应该是一个数组，每个元素为要轮番的图片
//2.页面上应该显示一张图片
//3.随着时间来滚动图片
var args=[].slice.call(dom)||[],len=args.length,count=0;
/*// 显示一张图片,应该写在html中，不应该js来控制
args.forEach(function(item,index){
if(index!==0){
$(item).hide();
}
});*/

setInterval(function(){
args.forEach(function(item,index){
if(index===count){
$(item).show()
}else{
$(item).hide();
}
});
count++;
if(count===len){
count=0;
}
},1000);
}
var dom = document.getElementsByTagName('img');
slide(dom);

</script>
</body>
</html>