jQuery实现图片轮播效果

实现图片轮播效果,打开页面,每隔3秒切换至下一张图片;光标移入数字时,播放相应图片。

思路:

(1)获取需要轮播的图片和展示的div。

(2)使用animate设置left值,每次移动宽度为展示div的宽度。

(3)播放图片时,对应数字应用红色背景样式,其他数字移除该样式。

效果:

代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			img {
				width: 800px;
				height: 400px;
			}

			.banner {
				width: 800px;
				height: 400px;
				border: 1px solid black;
				margin: 50px auto;
				overflow: hidden;
				cursor: pointer;
				position: relative;
			}

			.banner .slide {
				width: 4800px;
				height: 400px;
				position: absolute;
				left: -600px;
			}

			.banner .slide .pic {
				width: 800px;
				height: 400px;
				line-height: 400px;
				text-align: center;
				float: left;
				font-size: 72px;
				color: white;
			}

			.banner .numbers {
				width: 150px;
				height: 30px;
				position: absolute;
				bottom: 1%;
				left: 85%;
				margin-left: -50px;
				z-index: 2;
			}

			.banner .numbers .number {
				width: 20px;
				height: 20px;
				float: left;
				margin: 5px 6px;
				cursor: pointer;
				background-color: white;
				color: black;
				text-align: center;
				border: 1px solid red;
			}

			.banner .numbers .on {
				background-color: red;
				color: #fff;
				font-weight: bolder;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<div class="slide">
				<div class="pic"><img src="./4.png"></div>
				<div class="pic"><img src="./1.png"></div>
				<div class="pic"><img src="./2.png"></div>
				<div class="pic"><img src="./3.png"></div>
				<div class="pic"><img src="./4.png"></div>
				<div class="pic"><img src="./1.png"></div>
			</div>

			<div class="numbers">
				<span class="number on">1</span>
				<span class="number">2</span>
				<span class="number">3</span>
				<span class="number">4</span>
			</div>

		</div>
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var index = 1; 
			var timer = null;
			var size = $('.slide').children().size();
			var picWidth = $('.pic').width();
			$('.banner').mouseover(function() {
				clearInterval(timer);
			});
			$('.banner').mouseleave(function() {
				autoSlide();
			});
			$('.slide').mouseleave();
			function autoSlide() {
				timer = setInterval(function() {
					index++; 
					changeImg();
					changeNums();
				}, 3000); 
			};
			function changeImg() {
				var slideWidth = -1 * picWidth * index; 
				$('.slide').animate({
					'left': slideWidth + 'px'
				}, 500);
				if (index >= size - 1) {
					$('.slide').animate({
						'left': -picWidth + 'px'
					}, 0);
					index = 1;
				}
				if (index < 1) {
					$('.slide').animate({
						'left': -(size - 2) * picWidth + 'px'
					}, 0);
					index = size - 2;
				}
			}
			function changeNums() {
				$('.number').eq(index - 1).addClass('on').siblings().removeClass('on');
			}
			$('.number').mouseover(function(event) {
				var target = event.target;
				index = $(target).index() + 1;
				changeImg();
				changeNums();
			});
		</script>
	</body>
</html>
相关推荐
忧郁的蛋~4 分钟前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中5 分钟前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我25 分钟前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing28 分钟前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心29 分钟前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟30 分钟前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟30 分钟前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun30 分钟前
Promise 基础使用
前端·javascript·promise
Codebee31 分钟前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
GIS之路34 分钟前
GIS 空间关系:九交模型
前端