轮播图-CSDN博客

本文链接：https://blog.csdn.net/qq_40238154/article/details/88650030
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>焦点轮播图</title>
	<style type="text/css">
		/*去除内边距,没有链接下划线*/
		* {
			margin: 0;
			padding: 0;
			text-decoration: none;
		}
		/*让<body有20px的内边距*/
		body {
			padding: 20px;
		}
		/*最外围的div*/
		#container {
			width: 600px;
			height: 400px;
			overflow: hidden;
			position: relative;/*相对定位*/
			margin: 0 auto;
		}
		/*包含所有图片的<div>*/

		#list {
			width: 4200px; /*7张图片的宽: 7*600 */
			height: 400px;
			position: absolute; /*绝对定位*/
			z-index: 1;

		}
		/*所有的图片<img>*/
		#list img {
			float: left;/*浮在左侧*/
		}
		/*包含所有圆点按钮的<div>*/
		#pointsDiv {
			position: absolute;
			height: 10px;
			width: 100px;
			z-index: 2;
			bottom: 20px;
			left: 250px;
		}
		/*所有的圆点<span>*/

		#pointsDiv span {
			cursor: pointer;
			float: left;
			border: 1px solid #fff;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #333;
			margin-right: 5px;
		}
		/*第一个<span>*/

		#pointsDiv .on {
			background: orangered;
		}
		/*切换图标<a>*/

		.arrow {
			cursor: pointer;
			display: none;
			line-height: 39px;
			text-align: center;
			font-size: 36px;
			font-weight: bold;
			width: 40px;
			height: 40px;
			position: absolute;
			z-index: 2;
			top: 180px;
			background-color: RGBA(0, 0, 0, 0.3);
			color: #fff;
		}
		/*鼠标移到切换图标上时*/
		.arrow:hover {
			background-color: RGBA(0, 0, 0, 0.7);
		}
		/*鼠标移到整个div区域时*/
		#container:hover .arrow {
			display: block;/*显示*/
		}
		/*上一个切换图标的左外边距*/
		#prev {
			left: 20px;
		}
		/*下一个切换图标的右外边距*/
		#next {
			right: 20px;
		}
	</style>
</head>

<body>

	<div id="container">
		<div id="list" style="left: -600px;">
			<img src="../练习4_京东商品详情界面/images/img/5.jpg" alt="5" />
			<img src="../练习4_京东商品详情界面/images/img/1.jpg" alt="1" />
			<img src="../练习4_京东商品详情界面/images/img/2.jpg" alt="2" />
			<img src="../练习4_京东商品详情界面/images/img/3.jpg" alt="3" />
			<img src="../练习4_京东商品详情界面/images/img/4.jpg" alt="4" />
			<img src="../练习4_京东商品详情界面/images/img/5.jpg" alt="5" />
			<img src="../练习4_京东商品详情界面/images/img/1.jpg" alt="1" />
		</div>
		<div id="pointsDiv">
			<span index="1" class="on"></span>
			<span index="2"></span>
			<span index="3"></span>
			<span index="4"></span>
			<span index="5"></span>
		</div>
		<a href="javascript:;" id="prev" class="arrow">&lt;</a>
		<a href="javascript:;" id="next" class="arrow">&gt;</a>
	</div>

	<script src="./js/jquery.1.10.2.js"></script>
	<script type="text/javascript">
		/*
		 功能说明:
			 1. 点击向右(左)的图标, 平滑切换到下(上)一页
			 2. 无限循环切换
			 3. 每隔3s自动滑动到下一页
			 4. 鼠标进入停止自动翻页, 移出开启自动翻页
			 5. 切换页面时, 下面的圆点也同步更新
			 6. 点击圆点图标切换到对应的页
		 */
		$(function () {
		    //定义显示区域容器
			var $container=$('#container');
			//定义图片容器
			var $list=$('#list');
			//定义小圆点
			var $pointsDiv=$('#pointsDiv span');
			//定义左右按钮
			var $prev=$('#prev');
			var $next=$('#next');
			//定义图片的张数
			var img=$pointsDiv.length;
			//定义每张图片的宽度
			var PAGE_WIDTH=600;
			//定义小圆点的索引
			var index=0;
			//给左右按钮添加事件
            $prev.click(function () {
				nextPage(true);
            });
			$next.click(function () {
				nextPage(false)
            });
			//实现3秒自动轮播
			var IntervalId=setInterval(function () {
				nextPage(true);
            },3000);
			//鼠标进入停止自动翻页，离开开启自动翻页

            //定义图片滑动的函数
			function nextPage(next) {
                //移动一张图片的偏移量（方向） 正负 600
				var offset=next? -PAGE_WIDTH : PAGE_WIDTH;
                //定义动画总时长
				var time=400;
                //定义每帧时长
				var itemTime=20;
                //每帧的偏移量
				var itemOffset=offset/(time/itemTime);
                //获取当前图片容器的left值
				var currLeft=$list.position().left;
                //目的地的left值
				var targetLeft= currLeft+offset;
				var IntervalId=setInterval(function () {
					currLeft+=itemOffset;
					//判断一张图片是否完成
					if (currLeft==targetLeft){
					    clearInterval(IntervalId);
					    //判断是否到达边界
					    if(currLeft===0){
					        currLeft=img * - PAGE_WIDTH;
						}else if(currLeft===(img+1) * - PAGE_WIDTH){
					        currLeft=-PAGE_WIDTH;
						}
					}
					$list.css('left',currLeft);
                },itemTime);

            }
        })
	</script>
</body>

</html>