图片轮播（定时器）JS+CSS3

2021/11/24 23:15:38

编程Tag： js css3 var style 轮播 index left imglist navDiv

本文主要是介绍图片轮播（定时器）JS+CSS3，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#outer{
				width:610px;
				height:470px;
				margin:0 auto;
				background-color: #BBFFAA;
				padding:10px 0;
				position: relative;
				overflow: hidden;
			}
			#imgList{
				list-style:none;
				/* width: 3050px; */
				position: absolute;
				/* left:0px; */
			}
			#imgList li{
				float:left;
				margin:0 10px;
			}
			#navDiv{
				position: absolute;
				bottom: 15px;
				
				/* 设置left outer:610px navDiv:125px*/
				/* left:242px; */
			}
			#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: #000000;
			}
		</style>
		<script type="text/javascript" src="fa/css/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var imgList = document.getElementById("imgList");
				var imgArr = document.getElementsByTagName("img");
				
				imgList.style.width = 610*imgArr.length + "px";
				var navDiv = document.getElementById("navDiv");
				var outer = document.getElementById("outer");
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2+"px";
				
				var index = 0;
				var allA = document.getElementsByTagName("a");
				allA[index].style.backgroundColor = "black";
				
				for(var i=0;i<allA.length;i++){
					allA[i].num = i;
					allA[i].onclick = function(){
						
					clearInterval(timer);
						
					index = this.num;
					
					// imgList.style.left = -610*index+"px";
					setA();
					// 使用move函数
					move(imgList,"left",-610*index,20,function(){
						autoChange();
					});
					};
				}
				
				// 开启自动切换图片
				autoChange();
				
			// 创建方法设置选中的a
			function setA(){
				
				if(index>=imgArr.length-1){
					index = 0;
					
					imgList.style.left = 0;
				}
				
				for(var i=0;i<allA.length;i++){
					allA[i].style.backgroundColor = "";
				}
				allA[index].style.backgroundColor = "black";
			};
			// 自动切换定时器
			var timer;
			// 创建函数开启自动切换函数
			function autoChange(){
				timer = setInterval(function(){
					index++;
					// index % = imgArr.length;
					// 执行动画
					move(imgList,"left",-610*index,20,function(){
						// 修改导航按钮
						setA();
						
					});
				},3000);
			}
			};
		</script>
	</head>
	<body>
		<div id="outer">
			<ul id="imgList">
				<li><img src="img/2.1.jpg" /></li>
				<li><img src="img/2.2.jpg" /></li>
				<li><img src="img/2.3.jpg" /></li>
				<li><img src="img/2.4.jpg" /></li>
				<li><img src="img/2.5.jpg" /></li>
				<li><img src="img/2.1.jpg" /></li>
			</ul>
			<div id="navDiv">
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				
			</div>
		</div>
	</body>
</html>

会形成图片自动轮播，点击div会转图片

这篇关于图片轮播（定时器）JS+CSS3的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

图片轮播（定时器）JS+CSS3

相关编程文章