实战编写jq插件轮播图

最新推荐文章于 2023-07-25 15:29:45 发布

NeveFail

最新推荐文章于 2023-07-25 15:29:45 发布

阅读量428

点赞数

分类专栏： javascript 文章标签： css3 组件 jquery 轮播图

本文链接：https://blog.csdn.net/localhost_xiao/article/details/54340980

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
	*{padding: 0px;margin: 0px;list-style: none;border: none;vertical-align: middle;}
	.utl li img{float: left;}
	.utl{width: 2800px;height: 250px;position: absolute;left: 0;top: 0;}	
	.umhext{overflow: hidden;width: 700px;height:250px;margin: 50px auto; position: relative;}	
	.bordernone{position: absolute;bottom: 10px;left: 50%;}
	.bordernone i{border: 2px solid #000000;width: 15px;height: 15px;display: inline-block;border-radius: 50%;cursor: pointer;z-index: 1;margin-left: 5px;}
	.bordernone i.auctiy{
		border: 2px solid red;
		
	}
	</style>
	<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
	<body>
		<div class="umhext">
			<ul class="utl">
				<li><img src="1.png"/></li>
				<li><img src="2.png"/></li>
				<li><img src="1.png"/></li>
				<li><img src="2.png"/></li>
			</ul>
			<span class="bordernone"></span>
		</div>
		
		<script>
			(function($){
				// 初始化数据
				var CarouselRest = {
					auctiy:"auctiy",			//标签
					iI:"<i></i>",				//标签
					i:"i",						//类
					utl:".utl",					//标签
					bordernone:".bordernone",	//标签
					timer:1000,					//时间
					widthUmhext:700,			//img宽度
					widthUtl:2800,				//总宽度
					widthBordernone:80,			//iI总宽度
					height:250,					//img高度
					findLi:"li",				//标签	
					Fn:"Function",				//是否为函数
					fag:true					//是否开启定时器true开启 false关闭
				}	
				// 建立数据对象
				$.fn.Carousel = function(pm){
					// 如果参数就重新赋值否则就是默认
					var options = $.extend(true, CarouselRest, pm);
					
					var _self = $(this);
					//初始化索引
					var index = 0;
					
					return _self.each(function(){
						
						var len = _self.find(CarouselRest.findLi);
						
						//计算出所有的小圆圈
						for (var i = 0 ; i<len.length ; i++) {
							
							_self.find(CarouselRest.bordernone).append(CarouselRest.iI);
							
						}
						
						_self.find(CarouselRest.i).eq(0).addClass(CarouselRest.auctiy);
						
						//小圆圈居中
						_self.find(CarouselRest.bordernone).css({
							"left":"50%",
							"marginLeft":-CarouselRest.widthBordernone/2
						})
						
						
						
						//小圆圈事件操作
						_self.find(CarouselRest.i).on("click",function(){
							index = $(this).index();
							
							view(index);
							
						})
						
						
						//图片自动事件
						function auto(){
							index++;
							if(index>=len.length){
								index = 0;
							}
							
							view(index);
							
						}
						
						//在次进行封装
						function view(index){
							_self.find(CarouselRest.i).eq(index).addClass(CarouselRest.auctiy)
							.siblings(CarouselRest.i)
							.removeClass(CarouselRest.auctiy);
							
							
							_self.find(CarouselRest.utl).stop().animate({
								left:-CarouselRest.widthUmhext*index
							},230)
						}
						
						
						//开启定时器
						var stop=null
						if(CarouselRest.fag){
							stop = setInterval(auto,CarouselRest.timer);
							
							_self.hover(function(){
								clearTimeout(stop)								
							},function(){
								stop = setInterval(auto,CarouselRest.timer);
							})
						}
						
					})					
					
				}
				
			})(jQuery)
			
			$(".umhext").Carousel({
					auctiy:"auctiy",			//类
					iI:"<i></i>",				//标签
					i:"i",						//类
					utl:".utl",					//标签
					bordernone:".bordernone",	//类
					timer:1500,					//时间
					widthUmhext:700,			//img宽度
					widthUtl:2800,				//总宽度
					widthBordernone:80,			//iI总宽度
					height:250,					//img高度
					findLi:"li",				//标签	
					Fn:"Function",				//是否为函数
					fag:true					//是否开启定时器true开启 false关闭
			});
		</script>
		
	</body>
</html>

NeveFail

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实战编写jq插件轮播图

*{padding: 0px;margin: 0px;list-style: none;border: none;vertical-align: middle;} .utl li img{float: left;} .utl{width: 2800px;height: 250px;position: absolute;left: 0;top: 0;} .umhext{overflow: h
复制链接

扫一扫

专栏目录