用Jquery做图片轮播

最新推荐文章于 2023-09-14 18:36:20 发布

lyx_lyq

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量387

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
margin: 0 auto;
width: 770px;
height: 300px;
position: relative;
overflow: hidden;
}
</style>
<script src="js/jquery-1.12.2.js"></script> //应用一个jQuery的文件
</head>
<body>
<input type="button" value="纯js轮播效果" οnclick="setTimeout(imgmove, 2000)"/>

使用jquery实现div内部的图片移动并消失，类似轮播效果
<div id="divimg">
<img id="img7" src="images/ad7.jpg" alt="广告"/>
<img id="img6" src="images/ad6.jpg" alt="广告"/>
<img id="img5" src="images/ad5.jpg" alt="广告"/>
<img id="img4" src="images/ad4.jpg" alt="广告"/>
<img id="img3" src="images/ad3.jpg" alt="广告"/>
<img id="img2" src="images/ad2.jpg" alt="广告"/>
<img id="img1" src="images/ad1.jpg" alt="广告"/>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script>
function imgmove(){
//使用循环来使每张图片按顺序进行移动，移动的时间设置为300毫秒
$("#divimg img").each(function(i){
//使用自定义动画来使每张图片都进行平移
$(this).animate({
left:parseInt($(this).css("left"))+770
},300,"swing",function(){
//移动完毕后执行判断，如果向右移出了可见范围，则重新到最左边排序
if(parseInt($(this).css("left"))>=770){
$(this).css("left",6*(-770)+"px");
}
});
});
//移动完毕后再次调用函数，但是时间间隔必须把移动所使用的时间也要计算在内
setTimeout(imgmove, 2300);
}
$(function(){
//页面加载完成后将图片设置样式和坐标
$("#divimg img").css("position","absolute").each(function(i){
$(this).css("left",i*(-770)+"px");
});
});
</script>
</body>
</html>