封装的多张轮播图片滚动插件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0px;
			padding: 0px;
		}
		.father{
			position: relative;
			width: 1500px;
			height: 450px;
			left: 12%;
			overflow: hidden;
		}
		.clearfix:after{
			content: "";
			clear: both;
			display: block;
		}
		.son{
			display: inline-block;
			width: 6500px;
			height: 450px;
			overflow: hidden;
		}
		span{
			display: inline-block;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			color: white;
			background: black;
		}
		.ht{
			position: absolute;
			left: 0px;
			top: 45%;
			z-index: 999;
		}
		.qj{
			position: absolute;
			left: 1475px;
			top: 45%;
			z-index: 999;
		}
		.jj{
			display: inline-block;
			width: 6500px;
			height: 450px;
		}
		img:gt(1){
			display: none;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">
			<img src="image/T1AwdvBTxQ1RCvBVdK.jpg" alt="">
			<img src="image/T1edYbB7Dv1RCvBVdK.jpg" alt="">
			<img src="image/T1GpLbBjJv1RCvBVdK.jpg" alt="">
			<img src="image/T1hcxQB4C_1RCvBVdK.jpg" alt="">
			<img src="image/T1PoDjB7W_1RCvBVdK.jpg" alt="">
			<img src="image/T1ttDsBsDT1RCvBVdK.jpg" alt="">
			<img src="image/T1W.CsBgbv1RCvBVdK.jpg" alt="">
			<img src="image/T13kJsB5Ev1RCvBVdK.jpg" alt="">
		</div>
		<span class="qj">></span>
		<span class="ht"><</span>

	</div>
</body>
	<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$.extend({
			one:function(){
			//首先在原先第一张图片前面插入最后一张图片，使之成为第一张图片
			var a = $("img:first").before($("img:last"));
			//设置第一张图片的样式为-750px
			a.css({"margin-left":"-750px"});
			//设置第一个图片的动画
			a.animate({
			//每一次第一张图片向右移动
			"margin-left": "0px"			
			}, 500,function(){
                //恢复不是第一张图片的原始位置
				$("img").eq(1).animate({
					"margin-left": "0px"
				},500);
			})

			},two:function(){
			//实现思路使第一张图片向左移动
			var a = $("img:first");
			a.animate({
				"margin-right":"-750px"
			},500,function(){
				//移除一张图片使之成为最后一张图片
				$(".son").append(a);
                //每次要恢复成为最后一张图片的原始位置
				$("img:last").css({"margin-right":"0px"});
			});
			}
		})


		$(".qj").click(function(){
			$.one();
		})

		$(".ht").click(function(){
			$.two();
		})
	</script>
</html>
封装的多张轮播图片滚动插件

猜你喜欢
