Jquery封装轮播图插件

最新推荐文章于 2023-08-09 11:13:53 发布

rc980209

最新推荐文章于 2023-08-09 11:13:53 发布

阅读量239

点赞数

文章标签：轮播图 jq插件封装 jquery封装无缝轮播图

本文链接：https://blog.csdn.net/weixin_43318297/article/details/88654397

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	
</head>
<style>
	*{
	    margin: 0px ;padding: 0px;
	}
	.content{
		width: 600px;height: 350px;
		margin: 0px auto;margin-top: 100px;
		position: relative;
		background: pink;
		overflow: hidden;
		border-radius: 20px;
	}
	#ulBox{
		width: 1000%;
		height: 350px;
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
	}
	li{
	    list-style: none;
	}
	#ulBox>li{
		float: left;
		width: 600px;
		height: 350px;
	}
	#liItem{
		float: left;
		height: 20px;
		position: absolute;
		left: 50%;
		top: 90%;
		transform: translate(-50%,-90%);
		z-index: 999;
	}
	#liItem>li{
		margin-right: 10px;
		border: 1px solid pink;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		float: left;
	}
	.active{
		background: red;
	}
	.click{
		width: 40px;
		height: 60px;
		position: absolute;
		top: 50%;
		transform: translate(0%,-50%);
		font-size: 20px;
		line-height: 60px;
		text-align: center;
		opacity: 0.3;
		cursor: pointer;
	}
	.click:hover{
		background: pink;
		opacity: 0.5;
	}
	.left{
	    left: 0%;
		z-index: 9999;
	}
	.right{
	   right: 0%;
	   z-index: 9999;
	}
</style>
<body>
	<div class="content">
		<ul id="ulBox">
			<li><img src="img/pic1.png"  height="350" width="600"></li> 
			<li><img src="img/pic2.png"  height="350" width="600"></li> 
			<li><img src="img/pic3.png"  height="350" width="600"></li>
			<li><img src="img/pic4.png"  height="350" width="600"></li>
			<li><img src="img/pic5.png"  height="350" width="600"></li>
		</ul>
		<ul id="liItem">
		</ul>
		<div class="click left">&gt;</div>
		<div class=" click right">&lt;</div>
		
	</div>
</body>
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.js"></script>
<script>
	$.fn.extend({							//给jquery实例上添加方法
		swriper:function(){
			//var self=this;
			var ulBox=this.children('#ulBox'); //获取img的容器
			var liItem=this.children('#liItem');//获取对应小圆点的li容器
			var maxlength=ulBox.children().length;//保存img容器中li的长度
			var maxwidth=parseInt(this.css('width'));//获取容器的宽度值
			var leftclick=this.children('.left');//获取左边点击按钮
			var rightclick=this.children('.right');//获取右边点击按钮
			var indexs=0;							//声明一个全局indexs值
			var timer=null;							//声明一个全局的timer用来存储定时器
			var obj={								//声明的一个对象
				init(){								//声明一个init函数,函数集中式执行,
					this.createulBox(maxlength);	//执行创建节点标签和添加图片前后克隆节点
					this.ulBoxclick(liItem);		//给小圆点的li容器添加事件委托
					this.lfclick(leftclick);		//左按钮点击事件
					this.rgclick(rightclick);		//右按钮点击事件	
					this.showImg(indexs);			//图片默认显示第二张 indexs=0 ,showImg()中自增了一所以是第二张
					this.aotuplay();				//开启定时器
					//console.log(maxwidth)
				},
				createulBox(max){					//图片添加和小圆点添加
					var $first=ulBox.children().first();//克隆添加前后图片
					var $last=ulBox.children().last();	
					ulBox.append($first.clone());
					$first.before($last.clone());
					for(var i=0;i<max/*传递的是添加图片之前保存的值*/;i++){			//小圆点添加
						liItem.append('<li></li>')
					}
				},
				ulBoxclick(dom){				//小圆点容器点击委托事件
					var self=this;
					dom.on('click','li',function(){	
						var index=$(this).index();
						clearInterval(timer);
						self.aotuplay();
						self.showImg(index);
					})
				},
				showImg(index){					//根据传入的参数进行判断来改变图片的定位
					console.log(index)
					if(index<0){				//判断图片是否小于0
						indexs=maxlength-1;		//条件成立容器定位跳到最后一张图片的位置
						ulBox.css('left',-(indexs+2)*(maxwidth));
						
					}else if(index>maxlength-1){ //条件成立跳到第一张图片的位置
						indexs=0;
						ulBox.css('left',0)
					}else{
						indexs=index
					};
					
					//console.log(indexs)
					for(var i=0;i<maxlength;i++){		//清空所有小圆点的active属性
						liItem.children().eq(i).removeClass('active');
					}
					liItem.children().eq(indexs).addClass('active');//给当前传入参数对应的小圆点添加active属性
					ulBox.stop().animate({'left':-(indexs+1)*maxwidth},500)	//过度动画
					},
				lfclick(dom){		//鼠标左击事件
					var self=this;
					dom.on('click',function(){
						clearInterval(timer);
						self.aotuplay();
						indexs--;
						self.showImg(indexs);
					})
					
					
				},
				rgclick(dom){		//鼠标右击事件
					var self=this;
					dom.on('click',function(){
						clearInterval(timer);
						self.aotuplay();
						indexs++;
						self.showImg(indexs);
					});
				},	
				aotuplay(){			//自动轮播
					clearInterval(timer);
					timer=setInterval(()=>{
						indexs++;
						this.showImg(indexs);
					},2000)
				}
				
			}
			obj.init();	//执行函数
		}
	})
</script>
<script>
	$('.content').swriper() //调用$中的方法
</script>
</html>

效果图
在这里插入图片描述

rc980209

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery封装轮播图插件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫