jq轮播图——无缝轮播

最新推荐文章于 2023-06-05 19:20:20 发布

原创最新推荐文章于 2023-06-05 19:20:20 发布 · 338 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html #jquery #前端

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用jQuery和CSS创建无缝轮播图效果，通过JavaScript控制图片的切换动画，结合CSS实现平滑过渡，为用户提供流畅的浏览体验。适合前端开发者学习实践。

css代码：

/* 整个轮播图 */
.banner{
	width: 520px;
	height: 280px;
	overflow: hidden;
	margin:10% auto;
	position: relative;
}
/* 图片部分 */
/* ul */
.banner-img{
	/* 宽度其实是不符合条件的,需要使用js去控制 */
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.banner-img li{
	width: 520px;
	height: 100%;
	float: left;
}
.banner-img li a{
	width: 100%;
	height: 100%;
}
.banner-img li a img{
	width: 100%;
	height: 100%;
}
/* 实现按钮 */
.banner .banner-btn{
	position: absolute;
	height:40px;
	width: 100%;
	/* background: red; */
	top: 50%;
	margin-top: -20px;
	display: none;
}
/* 鼠标移入显示 */
.banner:hover .banner-btn{
	display: block;
}
.banner .banner-btn a{
	display: block;
	width: 40px;
	height: 40px;
	background: green;
	overflow: hidden;
}
.banner .banner-btn .nexBtn{
	float: right;
}
.banner .banner-btn a{
	background-color: #000;
	opacity: 0.3;
	filter: alpha(opcity=30);
	border-radius: 5px;
}
.banner .banner-btn i{
	margin-top: 8px;
	display: block;
	width: 100%;
	height: 24px;
	/* 使用一下精灵图,面包屑图 */
	background: url(http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png);
}
/* 左边的 */
.banner .prevBtn i{
	background-position: -190px 0;
}
/* 右边的 */
.banner .nexBtn i{
	background-position: -190px -24px;
}
/* 下面的小圆圈 */
.banner-circle{
	position: absolute;
	left:50%;
	/* margin-left: ; */
	height:13px ;
	bottom: 5px;
	border-radius:10px;
	/* opacity: 0.3;
	/* IE兼容 */
	/* filter: alpha(opcity=30); */
	background:rgba(255,255,255,0.3);
}
.banner-circle li{
	width: 9px;
	height: 9px;
	margin: 2px;
	float: left;
}
.banner-circle li a{
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background:rgba(255,255,255,0.8);
}
.banner-circle .selected a{
	background: rgba(255,0,0,1);
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="./css/banner.css"/>
	</head>
	<body>
		<div class="banner">
			<!-- 放置图片 -->
			<ul class="banner-img">
				<li><a href="#"><img src="./img/0.jpg" ></a></li>
				<li><a href="#"><img src="./img/1.jpg" ></a></li>
				<li><a href="#"><img src="./img/2.jpg" ></a></li>
				<li><a href="#"><img src="./img/3.jpg" ></a></li>
				<li><a href="#"><img src="./img/4.jpg" ></a></li>
				<li><a href="#"><img src="./img/2.jpg" ></a></li>
			</ul>
			<!-- 放置两个前后按钮 -->
			<div class="banner-btn">
				<a href="javascript:;" class="nexBtn"><i></i></a>
				<a href="javascript:;"class="prevBtn"><i></i></a>	
			</div>
			<!-- 放置焦点 小圆圈 -->
			<ul class="banner-circle">
				<!-- 计划是使用js的dom操作去添加集体的个数的小圆圈 -->
			</ul>
		</div>
	</body>
	<script src="./js/jquery3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script>
	$(function(){
		//获取标签
		// 最大的轮播模块 ; 这里变量名称里面的$其实就是一个普通的字符
		var $banner = $('.banner');
		// 获取图片的父级ul
		var $banner_ul = $('.banner-img');
		// 按钮的大块
		var $btn = $('.banner-btn');
		// 获取按钮的a标签
		var $btn_a = $btn.find('a');
		console.log($btn_a);
		// 定义一些有可能会使用到的变量
		// 定时器
		var timer = null;
		// 正在展示的页数
		var page = 1;
		// 运动的方向
		var btnClass = null;
		
		// 获取每一个li的宽度.也就是获取banner的宽度   轮播图的宽度
		var v_width = $banner.width();
		// ul的宽度根据li的个数决定
		// 获取li的个数
		var page_count = $banner_ul.find('li').length;
		//设置ul的宽度
		$banner_ul.width(v_width*page_count);//jquey设置元素的宽度的方法
	
		// 操作小圆圈
		var banner_cir = '<li class="selected"><a href="javascript:;"></a></li>';
		for (var i = 0; i < page_count-1; i++) {
			// 这里只是一个所有的小圆点拼接起来的字符串，还没有添加到页面中
			banner_cir += '<li><a href="javascript:;"></a></li>'
		}
		//添加小圆圈到页面中
		$('.banner-circle').append(banner_cir);
		//计算移动多少距离可以使得所有的小圆点居中
		var circle_left = $('.banner-circle').width() * 0.5;
		//通过margin-left设置所有的小圆点居中
		$('.banner-circle').css('marginLeft',circle_left*-1);
		
		//obj 让谁动
		//dir 向那个方向运动
		function move(dir){
			//正在运动的物体， 不能进行运动,如果正在动画，move对你不生效
			if(!$banner_ul.is(":animated")){//取反 正在运动 就是不运动
				//判断进行运动的方向
				if(dir == 'prevBtn'){
					//判断是否为第一个图片   需要单独处理第一张到第五张的请况
					if(page==1){
						$banner_ul.animate({
							left: (page_count-1)*v_width*-1
						});
						page = page_count;
						//处理小红点的移动
						circleMove();
					}else{
						//其他情况比较规律，每一次都是过一个图片的距离
						$banner_ul.animate({
							left: $banner_ul.position().left + v_width
						},"slow");
						page--;
						circleMove();
					}
				}else{
					//处理最后一张的特殊情况
					if(page==page_count){
						$banner_ul.animate({
							left:0
						})
						page=1;
						circleMove();
					}else{
						$banner_ul.animate({
							left:  $banner_ul.position().left - v_width
						},"slow");
						page++;
						circleMove();
					}
				}
			}
		}
		function circleMove(){
			$('.banner-circle li').eq(page-1).addClass('selected').siblings().removeClass('selected');
		}
		// 鼠标移入
		$banner.mousemove(function(){
			// 清除定时器
			clearInterval(timer);//链接操作
		}).mouseout(function(){
			timer = setInterval(move,1000);
		}).trigger('mouseout'); //一进来就触发一次鼠标移出效果，让页面直接动起来
		// 动起来
		// timer = setInterval(move,1000);
		
		// 左右按钮的鼠标移入移出以及点击
		$btn_a.mouseover(function(){
			$(this).animate({
				'opacity':0.6		//jquey已经帮我们考虑了兼容
			},'fast')
		}).mouseleave(function(){
			$(this).animate({
				'opacity':0.3	
			},'fast')
		}).click(function(){
			 btnClass = $(this).attr('class');
			clearInterval(timer);
			timer = setInterval(move(btnClass),1000);
		});
		
		//点击小圆圈  这些小圆圈都是动态添加的
		// $('.banner-circle li').click(function(){
		// 	console.log('111')
		// })
		
		//事件动态绑定机制
		$('.banner-circle li').on('click',function(){
			// 获取要展示的图片的编号
			var index = $('.banner-circle li').index(this);
			// 让banner动起来
			$banner_ul.animate({
				left: index * v_width * -1
			}, 'slow');
			page = index + 1;
			circleMove();
		})
	});
	</script>
</html>