js-图片的轮播+自动轮播

最新推荐文章于 2024-04-18 17:53:07 发布

¡Venceremo

最新推荐文章于 2024-04-18 17:53:07 发布

阅读量269

点赞数

分类专栏： javascript 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127548549

版权

javascript 专栏收录该内容

133 篇文章 0 订阅

订阅专栏

//通过css 将最后一张图片立马切换成第一张，多设置一张和第一张相同的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#outer {
				width: 420px;
				height: 300px;
				background-color: #bfa;
				margin: 50px auto;
				padding: 10px 0;
				position: relative;
				overflow: hidden;

			}

			#imgList {
				list-style-type: none;
				/* width: 2520px; */
				/* 开启定位移动 */
				position: absolute;
				/* 	每次显示到下一张图片 420px */
				/* left: -420px; */

			}

			#imgList li {
				float: left;
				margin: 0 10px;

			}

			#imgList img {
				width: 400px;
				height: 300px;

			}

			#navDiv {
				position: absolute;
				bottom: 15px;
				/* 
				outer:宽度420
				navDiv:(宽度 ：超链接宽度+margin*2)*6个=15+10=25*6=150
				420-150=270
				270/2=135_不能写死
				 */
				/* left: 135px; */
			}

			#navDiv a {
				float: left;
				width: 15px;
				height: 15px;
				background-color: red;
				margin: 0 5px;
				opacity: 0.5;
				/* 	兼容IE8的半透明 */
				filter: alpha(opacity=50);
			}

			#navDiv a:hover {
				background-color: black;
			}
		</style>
		<script src="tool动画.js"></script>
		<script>
			window.onload = function() {

				var imgList = document.getElementById("imgList");
				//获取所有图片
				var imgArr = document.getElementsByTagName("img");
				imgList.style.width = 420 * imgArr.length + "px";

				//设置导航按钮
				var outer = document.getElementById("outer");
				var navDiv = document.getElementById("navDiv");
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";

				var allA = document.getElementsByTagName("a");
				var index = 0;
				//由什么图片选定什么
				allA[index].style.backgroundColor = "black";
				//点击超链接切换图片
				for (var i = 0; i < allA.length; i++) {
					//先执行for循环 再执行单击相应函数 i不会变
					//为每一个添加一个属性
					allA[i].num = i;
					allA[i].onclick = function() {
						//alert(this.num);
						index = this.num;

						//imgList.style.left=-420*index+"px";
						move(imgList, "left", -420 * index, 10, function() {})
						setA();
					}
				};
				autoChange();
				//创建方法选中a
				function setA() {
					//让最后一张的点显示第一个点 最后一张和第一张的图片内容是一样的
					if(index>=imgArr.length-1){//6
							index=0;
							//通过css 将最后一张图片立马切换成第一张
							imgList.style.left=0+"px";
					}
					//其他的设置为黑色
					for (var i = 0; i < allA.length; i++) {
						allA[i].style.backgroundColor = ""; //去除样式 就是默认样式
					}
					//将选中的变为黑色
					allA[index].style.backgroundColor = "black";
				}
				//开启自动切换图片
				function autoChange() {
					//开启定时器 定时切换

					setInterval(function() {
						index++;
						index%=imgArr.length;
						move(imgList, "left", -420 * index, 10, function() {
							setA();
						});
						
						
					}, 3000)
				}

			}
		</script>
	</head>
	<body>
		<div id="outer">
			<ul id="imgList">

				<li>
					<img src="../img/a0.png" alt="图片">
				</li>
				<li>
					<img src="../img/a1.png" alt="图片">
				</li>
				<li>
					<img src="../img/a2.png" alt="图片">
				</li>
				<li>
					<img src="../img/a3.png" alt="图片">
				</li>
				<li>
					<img src="../img/a4.png" alt="图片">
				</li>
				<li>
					<img src="../img/a5.png" alt="图片">
				</li>
				<li>
					<img src="../img/a0.png" alt="图片">
				</li>

			</ul>
			<div id="navDiv">
				<a href="javascript:;" class=""></a>
				<a href="javascript:;" class=""></a>
				<a href="javascript:;" class=""></a>
				<a href="javascript:;" class=""></a>
				<a href="javascript:;" class=""></a>
				<a href="javascript:;" class=""></a>
			</div>
		</div>

	</body>
</html>