分享jquery轮播图的实例代码-js教程-PHP中文网

分享jquery轮播图的实例代码

零下一度

发布： 2017-06-27 10:52:41

原创

1514 人浏览过

咱们今天还是轮播图,今天说jquery的轮播图!

首先,要有个插件:

请无视Zepto插件,他没起到任何作用!

就是这两个啦!

然后就是代码!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<!--引入插件-->
	<script src="../上月插件/jquery-3.1.1.min.js?1.1.11"></script>
	<script src="../课件/课件/zepto.js?1.1.11"></script>
	<!--CSS样式-->
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		img{
			width: 400px;
			height: 230px;
		}
		ul{	
			/*计算全部图片的宽度*/
			width:1600px;
			height: 230px;
			list-style: none;
			/*定位*/
			position: absolute;

		}
		div{
			width: 400px;
			height: 230px;
			overflow: hidden;
			/*定位*/
			position: relative;
		}
		li{	
			/*单独图片宽度*/
			width:400px;
			float: left;
		}
	</style>
</head>
<body>
<div>
	<ul>
		<!--图片-->
		<li><img src="../img/2d.jpg"/></li>
		<li><img src="../img/2d.jpg"/></li>
		<li><img src="../img/2d.jpg"/></li>
		<li><img src="../img/2d.jpg"/></li>
	</ul>
</div>
<script type="text/javascript">
		var x = 0,TimerId;
		function strTimer(){
			TimerId = setInterval(function(){
				//判断,如果是第三张图片的时候,那么就变成第一张图片,实现循环的效果
				if(x == -1200){
					x = 0;
					$("ul :first").css("left",0 + "px");
				}
				if(x % 400 == 0){
					stop(1);
				}				
				$("ul:first").css("left",x-- + "px");
			},10);
		}
			function stop(n){
				if(n == 1){
					clearInterval(TimerId);
					setTimeout(strTimer,500);
				}else{
					clearInterval(TimerId);
				}
			}
			
		strTimer();
		(zepot);
</script>
</body>
</html>

登录后复制

　　就是这样,你学会了吗??

以上是分享jquery轮播图的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！