jquery轮播图

Posted 2020-09-25 ITandYT

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery轮播图相关的知识，希望对你有一定的参考价值。

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

首先,要有个插件:

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

就是这两个啦!

然后就是代码!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<!--引入插件-->
	<script src="../上月插件/jquery-3.1.1.min.js"></script>
	<script src="../课件/课件/zepto.js"></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轮播图的主要内容，如果未能解决你的问题，请参考以下文章

jquery简单自动轮播图代码怎么写

怎么用jquery做轮播图效果

轮播图

Vue轮播图的实现及其与jQuery轮播图的简单对比|饥人谷前端教程

jQuery实现轮播图效果

jquery自动轮播图代码只能出现一张图片第二三张就空白了轮播正常播放