Teilen Sie den Beispielcode des JQuery-Karusselldiagramms-js-Tutorial-php.cn

Teilen Sie den Beispielcode des JQuery-Karusselldiagramms

零下一度

Freigeben： 2017-06-27 10:52:41

Original

1514 Leute haben es durchsucht

Wir sind heute immer noch Karussellbilder, und heute sprechen wir über Jquery-Karussellbilder!

Zunächst benötigen Sie ein Plug-in:

Bitte ignorieren Sie das Zepto-Plugin , es spielt keine Rolle!

Das ist es!

Dann ist da noch der Code!

<!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>

Nach dem Login kopieren

Das ist es, du lernst. Ist es schon fertig??

Das obige ist der detaillierte Inhalt vonTeilen Sie den Beispielcode des JQuery-Karusselldiagramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!