JQuery 实现轮播图循环多张图片（二）

最新推荐文章于 2021-01-17 12:24:33 发布

凌冰_

最新推荐文章于 2021-01-17 12:24:33 发布

阅读量2.5k

点赞数 3

分类专栏： JQuery

本文链接：https://blog.csdn.net/hlx20080808/article/details/108472728

版权

JQuery 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

要求：

1、单击左边或右边滚动多张图片

2、鼠标悬停上左边或右边改变背景色

HTML页面


	<body>
		<div id="box">
			<!--左边-->
			<div id="left"> </div>

					<!--图片-->
					<div id="imgs">
						<ul class="aa">
							<li><img src="images/home_channel_elder.jpg" /></li>
							<li><img src="images/home_channel_friend.jpg" /></li>
							<li><img src="images/home_channel_pinwei.png" /></li>
							<li><img src="images/home_channel_rexiao.png" /></li>
							<li><img src="images/home_channel_tejia.png" /></li>
							<li><img src="images/home_channel_xinpin.png" /></li>
						</ul>
					</div>
					<!--右边-->
					<div id="right"> </div>
			</div>
	</body>

CSS样式：

	* {
				margin: 0;
				padding: 0
			}
			
			ul {
				list-style: none;
			}
			/*最大层*/
			#box {
				width: 1000px;
				height: 230px;
				margin: 100px auto;
				position: relative;
			}
			/*左右大小*/
			#left,#right {
				width: 20px;
				height: 40px;
				background: gainsboro;
				opacity: 0.5;
				text-align: center;
			}
			
			/*左右悬停上背景颜色*/
			#left:hover, #right:hover{
					background: pink;
			}
			/*左边绝对定位*/
			#left{	
				border-radius: 20px 0px 0px 20px;
				position: absolute;
				left: 32px;
				top:70px;
		
			}
			/*右边绝对定位*/
			 #right{
			 	border-radius: 0px 20px 20px 0px;
				position: absolute;
				right: 28px;
				top: 70px;
			}
			/*div ul*/
			#imgs {
				width: 900px;
				height: 180px;
				margin: auto;
				margin-top: 30px;
				overflow: hidden;
			}
			/* ul 大小*/
			.aa {
				width: 1240px;
				height: 180px;
			}
			
			/*li大小,其实就是图片的大小*/
			ul li {
				float: left;
				padding: 0px 7px;
				width: 288px;
				height:180px;
			}
			/*图片大小*/
			ul li img {
				width: 288px;
				height: 180px;
			}

JQuery 脚本

(function($){
    //原型对象
	$.fn.ScrollPic=function(obj){
        //参数
		var count = {
			num:3,   //张数
			time:500, //动画速度
			uls:".uls li",  //图片
			right:"#right", //右侧按钮
			left:"#left",    //左侧按钮
			parent:".uls"   //父级

		}
       //将对象合并到jquery中
		var ob = $.extend(count,obj);

       //图片的个数
 		lg = ob.num;

        //当前图片的宽度
 		imgW = $(ob.uls).innerWidth();   
 	 	
 	 	//点击右边
		$(ob.right).click(function(){
            //动画效果
			$(ob.parent).animate({"marginLeft":-imgW*lg},ob.time,function(){
               //移动0-n图片,添加到后面
				$(ob.uls).slice(0,lg).appendTo(ob.parent);
                //设置父为0px;
				$(ob.parent).css("marginLeft","0px");

			});
		});
		
		//点击左边
		$(ob.left).click(function(){
            //设置父为;
			$(ob.parent).css("marginLeft",-imgW*lg);
			//移动slice(-n)图片,从后往前移动;添加到之前
			$(ob.uls).slice(-lg).prependTo(ob.parent);
			//动画效果
			$(ob.parent).animate({"marginLeft":"0px"},ob.time);

		});

	}

})(jQuery);

在页面调用Jquery

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.ScrollPic.js"></script>
	<script>
		$(function() {

			//调用方法
			$("#box").ScrollPic({
				"num": 3, //张数
				"time": 500, //动画毫秒数
				"parent": ".aa", //父级
				"uls": ".aa li" //图片li

			});

		})
	</script>