用jQuery实现轮播图——超简单(代码解释)

• 前端

先看效果

鼠标悬浮时停止轮播，离开时自动轮播，点下一张小圆点会随着动

效果图

直接上代码


	
		
		
		
			.wrapper {
				width: 600px;
				height: 350px;
				border: 1px solid red;
				position: relative;
			}
		
			/* 5张图片叠加到一块 */
			.wrapper img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
		
			.wrapper img:nth-of-type(1) {
				display: block;
			}
		
			/* 小圆点 */
			.btn {
				width: 150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left: 225px;
				bottom: 10px;
				z-index: 100
			}
		
			.btn span {
				display: block;
				width: 15px;
				height: 15px;
				border: 3px solid white;
				border-radius: 50%;
			}
		
			/* 左右箭头 */
			.wrapper a {
				text-decoration: none;
				font-size: 50px;
				color: red;
				position: absolute;
				top: 35%;
			}
		
			.wrapper a:nth-of-type(1) {
				left: 10px;
		
			}
		
			.wrapper a:nth-of-type(2) {
				right: 10px;
			}
		
			.active {
				background-color: red;
			}
		
	
	
		
			
				
				
				
				
				
			
			
				
				
				
				
				
			
			<
			">>
		
		
		
			var index=0;
			// 点击上一张
			$("a:first").click(function(){
				prev_pic();
			})
			// 点击下一张
			$("a:last").click(function(){
				next_pic();
			})
			// 悬浮停止
			$(".wrapper").mouseover(function(){
				clearInterval(id);
			});
			$(".wrapper").mouseout(function(){
					autoplay();
			})
			
			
			// 下一张
			function next_pic(){
				index++;
				if(index>4){
					index=0;
				}
				addStyle();
			}
			
			// 上一张
			function prev_pic(){
				index--;
				if(index<0){
					index=4;
				}
				addStyle();
			}
			
			// 控制图片显示隐藏,小圆点背景色
			function addStyle(){
				$("img").eq(index).fadeIn();
				$("img").eq(index).siblings().fadeOut();
				$("span").eq(index).addClass("active");
				$("span").eq(index).siblings().removeClass("active");
			}
			
			// 自动轮播
			var id;
			autoplay();
			function autoplay(){
				id=setInterval(function(){
					next_pic();
				},1000)
			}

这里只要把图片地址更换一下 ，引用jquery文件就可以了

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/4ac6aa5db6.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐