轮播图，JQ组件。

最新推荐文章于 2024-09-21 20:57:10 发布

朲曻

最新推荐文章于 2024-09-21 20:57:10 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/weixin_45526796/article/details/100999338

版权

HTML样式

<!DOCTYPE html>
<html lang="zh">
	<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>轮播图</title>
		<style type="text/css">
			.active {
				border: 2px white solid !important;
				background: red !important;
			}
		</style>
	</head>
	<body>

		<div id="swipper">

		</div>

		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/02-es6-lunbo.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$(function() {
				new Swipper({
					width: 690,
					height: 370,
					dottedColor: "black",
					auto: "true", //默认自动轮播  false不自动轮播
					imgArr: ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"]
				})
			})
		</script>


	</body>
</html>

JQ样式

// class声明轮播图类
class Swipper{
	constructor(obj) {
	    this.width = obj.width || 690 
		//宽度
		this.height = obj.height || 370 
		//高度
		this.dottedColor = obj.dottedColor || "white" //
		//指示灯颜色
		this.auto = obj.auto || "true"
		//是否自动轮播
		obj.imgArr.push(obj.imgArr[0])
		obj.imgArr.unshift(obj.imgArr[obj.imgArr.length-2])
		//imgArr中有五张图片，实际加载7张
		this.imgArr = obj.imgArr
		this.swipper = $("#swipper")
		this.currentIndex = -1
		
		this.render()
		//加载页面
	}
	//渲染数据
	render(){
		//初始化轮播图大小
		this.swipper.css({
			width:this.width + "px",
			height:this.height +"px",
			position:"relative",
			margin:"0 auto",
			background:"blue",
			overflow:"hidden"
		})
		//显示图片的$container
		var $container = $("<div>")
		.attr({
			"class":"container"
		})
		.css({
			width:this.imgArr.length * this.width,
			height:this.height,
			display:"flex",
			position:"absolute",
			top:0,
			//计算初始位置
			left:this.currentIndex * this.width + "px",
		})
		.appendTo(this.swipper)
		
		//添加图片
		for(var idx in this.imgArr){
			//创建img标签
			$("<img>")
			.attr("src",this.imgArr[idx])
			//添加图片地址
			.css({
				white:this.width + "px",
				height:this.height +"px"
			})
			.appendTo($container)
		}
		
		// 左按钮
		$("<div>")
		.css({
			color:"white",
			fontSize:"50px",
			fontWeight:"bold",
			position:"absolute",
			top:"45%",
			cursor:"pointer",
			background:"rgb(0,0,0,0.2)",
			left:0,
			opacity:0.5
		})
		.on("click",this.goToPrev.bind(this))
		.html("&lt;")
		//hover 鼠标移入触发函数，鼠标移除触发函数
		.hover(function(e){
			$(this).css("opacity",0.8)
		},function(e){
			$(this).css("opacity",0.5)
		})
		.appendTo(this.swipper)
		
		// 右按钮
		$("<div>")
		.css({
			color:"white",
			fontSize:"50px",
			fontWeight:"bold",
			position:"absolute",
			top:"45%",
			cursor:"pointer",
			background:"rgb(0,0,0,0.2)",
			right:0,
			opacity:0.5
		})
		.on("click",this.goToNext.bind(this))
		.html("&gt;")
		//hover 鼠标移入触发函数，移除触发函数
		.hover(function(e){
			$(this).css("opacity",0.8)
		},function(e){
			$(this).css("opacity",0.5)
		})
		.appendTo(this.swipper)
		
		// 创建ul标签
		var $dotted = $("<ul>").attr("id","dotted")
		.css({
			margin:"0",
			padding:"5px",
			display:"flex",
			listStyle:"none",
			position:"absolute",
			left:"45%",
			bottom:"10px"
		})
		.appendTo(this.swipper)
		
		// 循环创建小点
		for(var i=1;i<this.imgArr.length-1;i++){
			
			var $li = i==1?$("<li>").attr("class","active"):$("<li>")
			$li
			.attr("index",i)
			.css({
				boxSizing:"border-box",
				border:"2px solid red",
				cursor:"pointer",
				width:"10px",
				height:"10px",
				background:this.dottedColor,
				margin:"0 3px",
				borderRadius:"50%"
			})
			.on("click",this.dottedClick.bind(this))
			.appendTo($dotted)
			
		}
		
		// 自动轮播
		if(this.auto === "true"){
			var timer = setInterval(this.goToNext.bind(this),2000)
			// 鼠标进入范围停止自动轮播
			$("#swipper").on("mouseenter",function(){
				clearInterval(timer)
				timer=null
			})
			
			// 鼠标离开范围继续自动轮播
			var that = this
			$("#swipper").on("mouseleave",function(){
				if(!timer){
					timer = setInterval(that.goToNext.bind(that),2000)
				}
			})
		}
		
		
	}
	// 左边按钮点击函数
	goToPrev(){
		$(".container").css("transition","0.5s all")
		this.currentIndex +=1
		//索引
		$(".active").removeClass("active")
		$("#dotted>li").eq(Math.abs(this.currentIndex)-1).addClass("active")
		if(this.currentIndex == 0){
			$("#dotted>li").eq($("#dotted>li").length-1).addClass("active")
			$(".container").css("left",this.currentIndex*this.width + "px")
			//记录this
			var that = this
			
			setTimeout(function(){
				that.currentIndex = -$(".container>img").length +2
				$(".container").css("transition","none")
				$(".container").css("left",(-$(".container>img").length+2)*that.width + "px")
				
			},500)
			return
		}
		$(".container").css("left",this.currentIndex*this.width + "px")
	}
	

	// 右边按钮点击函数
	goToNext(){
		
		$(".container").css("transition","0.5s all")
		
		this.currentIndex -= 1
		//索引
		
		$(".active").removeClass("active")
		$("#dotted>li").eq(Math.abs(this.currentIndex)-1).addClass("active")
		//判断是否到达边界
		if(this.currentIndex <= -$(".container>img").length+1){
			
			$("#dotted>li").eq(0).addClass("active")
			//跳转到最后一个img标签位置
			$(".container").css("left",this.currentIndex*this. width + "px")
			//跳转第一个图片，选择第一个指示灯
			
			//记录this
			var that = this
			//500毫秒之后，取消过渡效果，瞬间拉到第一张图片位置
			setTimeout(function(){
				that.currentIndex = -1
				$(".container").css("transition","none")
				$(".container").css("left",-that.width + "px")
			},500)
			return
			
		}
		$(".container").css("left",this.currentIndex*this.width + "px")
		
	}
	
	// 点击指示灯函数
	dottedClick(e){
		$(".container").css("transition","all 0.5s")
		this.currentIndex = -$(e.target).attr("index")
		//修改currentIndex的值
		$(".active").removeClass("active")
		$(e.target).addClass("active")
		$(".container").css("left",-$(e.target).attr("index")*this.width + "px")
		//鼠标进入小点，切换样式
	}
	
	
	
}