焦点轮播图

最新推荐文章于 2023-10-18 20:18:01 发布

无知的小菜鸡

最新推荐文章于 2023-10-18 20:18:01 发布

阅读量535

点赞数

本文链接：https://blog.csdn.net/weixin_41897680/article/details/104515125

版权

代码来源于网络，具体来自哪里忘记了
做了一些简单的整理
轮播图原理（个人理解）：
1、将要轮播的图片通过浮点使其排列在一整行
2、设置展示图片的盒子，盒子大小是要显示图片的大小，每次显示一个，多余的图片设置为隐藏
3、轮播主要是让其他隐藏的图片刚好移动图片的宽度，这样显示新的图片，盒子外的图片再次被隐藏掉，移动过程可以通过定时器设置
4、以上是简单的轮播，如果不添加焦点的话还是比较容易。关于焦点跟随图片的变化不懂，不同的人有不同的做法
在这里插入图片描述
HTML

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			@import url("css/my.css");
		</style>
	</head>

	<body>
		<div class="main">
			<div class="myslide">
				<ul class="myslidetwo">
					<li><img src="img/01.jpg" /></li>
					<li> <img src="img/02.jpg" /></li>
					<li><img src="img/03.jpg" /></li>
					<li><img src="img/04.jpg" /></li>
				</ul>
				<p class="arrows">
					<a class="pre"> < </a>
					<a class="next"> > </a>
				</p>
				<ol class="label">
					<li class="current">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ol>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	    <script src="js/my.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>

CSS

body {
	background-color: #dddddd;
}

* {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

/* 左右箭头，不需要修改 */
a {
	cursor: pointer;
}

/* 轮播图最外层大小 */
.main {
	position: relative;
	width: 500px;
	height: 350px;
	margin: 40px auto;
}

/* 轮播图展示区域大小 */
.myslide {
	float: left;
	position: absolute;
	overflow: hidden;
	width: 500px;
	height: 350px;
}

/* 轮播图所有图片的总宽度 */
.myslidetwo {
	position: absolute;
	overflow: hidden;
	width: 2000px;
}

/* 轮播图中每张图片的大小 */
.myslidetwo img {
	float: left;
	width: 500px;
	height: 350px;
}

/* 存放焦点的容器 */
.label {
	position: absolute;
	bottom: 15px;
	left: 210px;
	width: 200px;
}

/* 每一个焦点 */
.label li {
	float: left;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	margin-right: 5px;
	border: 1px solid #ddd;
	font-size: 14px;
	background: #fff;
	cursor: pointer;
}

/* 当前显示焦点的背景颜色 */
.label li.current {
	background: #0f0;
}

/* 以下是左右箭头的设置 */
.arrows {
	position: absolute;
	left: 0px;
	top: 120px;
	color: #666;
	font-size: 40px;
	font-weight: bold;
}

.arrows a {
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	width: 30px;
	height: 70px;
	text-align: center;
	line-height: 70px;
}

.arrows a:hover {
	color: #fff;
}

.arrows .pre {
	margin-right: 420px;
}

JavaScript

$(document).ready(function() {
		var _now = 0;
		var oul = $(".myslidetwo"); //图片

		var numl = $(".label li");
		var wid = $(".myslide").eq(0).width(); //盒子的宽度

		//数字图标实现
		numl.click(function() {
			var index = $(this).index();
			$(this).addClass("current").siblings().removeClass();
			oul.animate({
				'left': -wid * index
			}, 500);
		})
		//左右箭头轮播
		$(".pre").click(function() {
			if (_now >= 1) _now--;
			else _now = 3;
			ani();
		});
		$(".next").click(function() {
			if (_now == numl.size() - 1) {
				_now = 0;
			} else _now++;
			ani();
		});
		//动画函数
		function ani() {
			numl.eq(_now).addClass("current").siblings().removeClass();
			oul.animate({
				'left': -wid * _now
			}, 500);
		}
		//以下代码如果不需要自动轮播可删除
		//自动动画
		var _interval = setInterval(showTime, 2000);

		function showTime() {
			if (_now == numl.size() - 1) {
				_now = 0;
			} else _now++;
			ani();
		}
		//鼠标停留在画面时停止自动动画，离开恢复
		$(".myslide").mouseover(function() {
			clearTimeout(_interval);
		});
		$(".myslide").mouseout(function() {
			_interval = setInterval(showTime, 3000);
		});
	});

无知的小菜鸡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
焦点轮播图

代码来源于网络，具体来自哪里忘记了做了一些简单的整理轮播图原理（个人理解）：1、将要轮播的图片通过浮点使其排列在一整行2、设置展示图片的盒子，盒子大小是要显示图片的大小，每次显示一个，多余的图片设置为隐藏3、轮播主要是让其他隐藏的图片刚好移动图片的宽度，这样显示新的图片，盒子外的图片再次被隐藏掉，移动过程可以通过定时器设置4、以上是简单的轮播，如果不添加焦点的话还是比较容易。关于焦点跟...
复制链接

扫一扫