jq + css 实现轮播

最新推荐文章于 2022-05-29 07:13:26 发布

张兴华(MarsXH.Chang)

最新推荐文章于 2022-05-29 07:13:26 发布

阅读量307

点赞数 1

分类专栏： js 文章标签： jq css 轮播自适应

本文链接：https://blog.csdn.net/q95548854/article/details/98851494

版权

js 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

样式教丑，只是个 Demo，可根据实际情况调整。

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>jq轮播</title>
		<style>
			#lun {
				width: 80%;
				height: 400px;
				margin: 0 auto;
			}
			/*=====轮播图片======*/
			
			#most_box {
				width: 100%;
				height: 400px;
				position: relative;
				overflow: hidden;
			}
			
			#img_box {
				width: 1000%;
				height: 100%;
				/*overflow: hidden;*/
				position: absolute;
			}
			
			#img_box img {
				width: 10%;
				height: 100%;
				float: left;
			}
			/*=====前进后退按钮======*/
			
			#change_box {
				color: #999;
				font-size: 30px;
				font-weight: 900;
			}
			
			#prev,
			#next {
				position: absolute;
				top: 45%;
				width: 40px;
				height: 70px;
				line-height: 70px;
				border-radius: 5%;
			}
			
			#prev:hover,
			#next:hover {
				background-color: red;
				cursor: pointer;
			}
			
			#prev {
				left: 0;
			}
			
			#next {
				right: 0;
			}
			/*=====下面列表======*/
			
			#num_box {
				position: absolute;
				bottom: 3%;
				right: 3%;
				text-align: center;
			}
			
			#num_box ul li {
				float: left;
				display: inline-block;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				border: 2px solid #999;
				margin-right: 5px;
				background-color: #757575;
			}
			
			#num_box ul li:hover {
				background-color: white;
				cursor: pointer;
			}
			
			#num_box .select {
				background-color: white;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div id="lun">
			<div id="most_box">
				<div id="img_box">
					<img src="img/060511.jpg" />
					<img src="img/060513.jpg" />
					<img src="img/060514.jpg" />
					<img src="img/060511.jpg" />
					<img src="img/060514.jpg" />
					<img src="img/060511.jpg" />
					<img src="img/060514.jpg" />
					<img src="img/060514.jpg" />
					<img src="img/060511.jpg" />
					<img src="img/060514.jpg" />
				</div>
				<div id="change_box">
					<span id="prev">&lt;</span>
					<span id="next">&gt;</span>
				</div>
				<div id="num_box">
					<ul>
						<li class="select"></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<script>
			var num = 0,
				imgLen = $('#img_box img').length, //5 6 7
				imgWidth = $('#img_box img').width();
			var liList = $('#num_box ul li');
			//自动变换调用
			autoChange()
			//清除定时器时候的重置定时器--封装
			function autoChange() {
				autochange = setInterval(function() {
					if(num < imgLen - 1) {
						num++;
					} else {
						num = 0;
					}
					changeTo(num);
				}, 2000);
			}
			//点击左右变换
			$('#prev').on('click', function() {
				clearInterval(autochange)
				if(num > 0) {
					num = num - 1;
				} else {
					num = imgLen - 1;
				}
				changeTo(num);
				autoChange();
			})
			$('#next').on('click', function() {
				clearInterval(autochange)
				if(num < imgLen - 1) {
					num = num + 1;
				} else {
					num = 0;
				}
				changeTo(num);
				autoChange();
			})

			//li点击变换
			liList.on('click', function() {
				clearInterval(autochange)
				for(var i = 0; i < imgLen; i++) {
					if(liList[i] == this) {
						num = i;
						changeTo(num);
					}
				}
				autoChange();
			});

			//改变函数
			function changeTo(num) {
				var goLeft = num * imgWidth;
				$('#img_box').animate({
					left: "-" + goLeft + "px"
				}, 500);
				for(var i = 0; i < imgLen; i++) {
					liList[i].className = '';
				}
				liList[num].className = 'select';
			}
		</script>
	</body>

</html>

觉得有帮助的小伙伴右上角点个赞~

在这里插入图片描述

扫描上方二维码关注我的订阅号~

张兴华(MarsXH.Chang)

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jq + css 实现轮播

样式教丑，只是个 Demo，可根据实际情况调整。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jq轮播</title> <style> #lun { width: 80%; height: 400...
复制链接

扫一扫