基于jQuery制作仿京东轮播图

最新推荐文章于 2023-04-17 20:09:11 发布

格桑花念

最新推荐文章于 2023-04-17 20:09:11 发布

阅读量992

点赞数 3

分类专栏： JS jQuery HTML5 CSS3 文章标签： jQuery

本文链接：https://blog.csdn.net/lyar1225/article/details/86765408

版权

JS 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML5

4 篇文章 0 订阅

订阅专栏

CSS3

4 篇文章 0 订阅

订阅专栏

现在主流的轮播图主要分两种

淡入淡出式轮播图
无缝切换式轮播图

但是当前为了网页的美化和性能的节约，所以当前大部分的轮播图都是采用淡入淡出式切换的
下面就给大家来写一个淡入淡出式的轮播图
HTML样式解析
首先我们需要知道轮播图所组成的部分
1.外层div(#banner)，这个div就是轮播图的主体部分包括所有的点击按钮，图片和切换按钮
2.包含图片的div(.warp)，这个div是包含所有的轮播图片
3.包含点击按钮或鼠标悬浮按钮的div(.bth-list)，这个div包含所有的点击按钮的div(.bth)
4.左右切换按钮:div(.bth-left)和div(.bth-right)

<body>
			<!--外层div-->
		<div id="banner">
			<div class="warp">
				<a href="#" class="item" style="display: block;"><img src="image/img1.jpg" alt="" /></a>
				<a href="#" class="item"><img src="image/img2.jpg" alt="" /></a>
				<a href="#" class="item"><img src="image/img3.jpg" alt="" /></a>
				<a href="#" class="item"><img src="image/img4.jpg" alt="" /></a>
				<a href="#" class="item"><img src="image/img5.jpg" alt="" /></a>
				<a href="#" class="item"><img src="image/img6.jpg" alt="" /></a>
				<a href="#" class="item"><img src="image/img7.jpg" alt="" /></a>
				<a href="#" class="item"><img src="image/img8.jpg" alt="" /></a>
			</div>
			<!--点击按钮列表-->
			<div class="bth-list">
				<div class="bth active"></div>
				<div class="bth"></div>
				<div class="bth"></div>
				<div class="bth"></div>
				<div class="bth"></div>
				<div class="bth"></div>
				<div class="bth"></div>
				<div class="bth"></div>
			</div>
			<!--左按钮-->
			<div class="tab left">&lt;</div>
			<!--右按钮-->
			<div class="tab right">&gt;</div>
		</div>
	</body>

写完后我们就可以写css部分:

body {
	margin: 0;
	line-height: 1;
}

#banner {
	position: relative;
	width: 590px;
	height: 470PX;
	margin: 0 auto;
}

.item {
	display: none;
	width: 590px;
	height: 470PX;
	position: absolute;
}

.bth-list {
	position: absolute;
	width: 152px;
	height: px;
	left: 40px;
	bottom: 20px;
}

.bth {
	opacity: 0.8;
	width: 6px;
	height: 6px;
	float: left;
	border: 2px solid #F0EDED;
	border-radius: 5px;
	margin-right: 8px;
}

.active {
	opacity: 7;
	background-color: #FFFFFF;
	border-color: #FFFFFF;
}

.tab{
	position: absolute;
	width: 24px;
	height: 40px;
	font-size: 20px;
	line-height: 40px;
	cursor: pointer;
	top: 48%;
	text-align: center;
	color: white;
	background-color: rgba(0,0,0,.5);
	opacity: 0.4;
}
.tab:hover{
	opacity: .5;
	color: white;
	background: black;
}
.left {
	left: 0px;
}

.right {
	right: 0px;
}

接着js部分:

	$(document).ready(function() {
		var index = 0; //定义一个下标
		var stop = false; //定义一个触发器
		var $li = $("#banner").find(".warp").children(".item"); //获取所有的轮播图片
		var $page = $("#banner").find(".bth-list").children(".bth"); //获取所有的圆点列表
		$page.hover(function() {
			
			index = $(this).index(); //把图片下标的值赋给定义下标
			$(this).addClass("active").stop(true,true).siblings().removeClass("active"); //给鼠标选中的圆点列表添加样式
			$li.eq(index).stop(true,true).fadeIn(1000).siblings().fadeOut(1000); //轮播图片淡入淡出效果
		});
		//左边点击按钮
		$(".left").click(function() {
			clearInterval(timer);
			index--;
			if(index < 0) {
				index = $li.length-1;
			}
			$li.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
			$page.eq(index).addClass("active").stop(true, true).siblings().removeClass("active");
		});
		//右边点击按钮
		$(".right").click(function(){
			clearInterval(timer);
			index++;
			if(index > $li.length-1) {
				index = 0;
			}
			$li.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
			$page.eq(index).addClass("active").stop(true, true).siblings().removeClass("active");
		});
		//自动轮播图片
		var timer = setInterval(function() {
			if(stop) return;
			index++;
			if(index > $li.length-1) {
				index = 0;
			}
			$li.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
			$page.eq(index).addClass("active").stop(true, true).siblings().removeClass("active");
		},5000);
		//鼠标移入图片内，自动轮播停止
		$("#banner").mousemove(function() {
			clearInterval(timer);
		}).mouseout(function() {
			timer = setInterval(function() {
				if(stop) return;
				index++;
				if(index > $li.length-1) {
					index = 0;
				}
				$li.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
				$page.eq(index).addClass("active").stop(true, true).siblings().removeClass("active");
			},5000);
		});
	});

格桑花念

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery制作仿京东轮播图

现在主流的轮播图主要分两种淡入淡出式轮播图无缝切换式轮播图但是当前为了网页的美化和性能的节约，所以当前大部分的轮播图都是采用淡入淡出式切换的下面就给大家来写一个淡入淡出式的轮播图HTML样式解析首先我们需要知道轮播图所组成的部分1.外层div(#banner)，这个div就是轮播图的主体部分包括所有的点击按钮，图片和切换按钮2.包含图片的div(.warp)，这个div是包含所...
复制链接

扫一扫