当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery:无焦点轮播图,鼠标经过停止,移开继续

jQuery:无焦点轮播图,鼠标经过停止,移开继续

2020年08月10日  | 萬仟网IT编程  | 我要评论
jQuery:无焦点轮播图,鼠标经过停止,移开继续首先每个图片的宽度都是100%,高度500px,一共4个图片。4个图片外层div,class=“imgs”,宽度=100%*4,高度500px。imgs外层有一个div,class=“show”,宽度是一张图片的宽度100%,height=500px。<style>#show{width: 100%;height: 500px;position: relative;border: 1px solid #d9d9

首先每个图片的宽度都是100%,高度500px,一共4个图片。
4个图片外层div,id=“imgs”,宽度=100%*4,高度500px。
imgs外层有一个div,id=“show”,宽度是一张图片的宽度100%,height=500px。

<style>
	#show{
		width: 100%;
		height: 500px;
		position: relative;
		border: 1px solid #d9d919;
		overflow: hidden;
	}
	#imgs{
		width: 400%;
		height: 500px;
		position: relative;
		left: 0;
	}
	#imgs>img{
		width: 100%;
		height: 500px;
		float: left;
	}
</style>
<div id="show">
	<div id="imgs">
		<img src="../img/1.jpg" /><img src="../img/2.jpg" /><img src="../img/10.jpg"/><img src="../img/3.jpg" />
    </div>
</div>

注意:imgs的css设置必须有position,否则后面jquery设置动画没有办法设置left的值。
jquery代码:

i=setInterval(scrolls,2000);
function scrolls(){
	$("#imgs").animate({"left":"-100%"},1000,function(){
	    $(this).append($(this).children("img:first"));//将第一张图片移到最后一张
		$(this).css("left","0");
	});
}
$("#show").mouseenter(function(){
    clearInterval(i);
})
$("#show").mouseleave(function(){
	scrolls();
})

本文地址:https://blog.csdn.net/qq_43798927/article/details/107890944

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1