首页 > web前端 > js教程 > 正文

分享jquery轮播图的实例代码

零下一度
发布: 2017-06-27 10:52:41
原创
1529 人浏览过

咱们今天还是轮播图,今天说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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板