JS实现简单的图片轮播

最新推荐文章于 2024-05-22 13:52:22 发布

weixin_30420305

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量51

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/davis16/p/8349521.html

版权

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0px auto;
		}
		body{
			
			text-align: center;
			padding: 0px;
			
		}
		img{
			width: 1000px;
			height: 500px;
			display: none;
			
		}
		#tp{
			
			width: 1000px;
			height: 500px;
			border: 1px solid cornflowerblue;
		
		
		}
		#sz{
			width: 100px;
			height: 20px;
			text-align: center;
			line-height: 20px;
		
			margin-top: -22px;
			z-index: 1000;
			position: relative;
			
			
		}
		.xb{
			width: 20px;
			height: 20px;
			background-color: chartreuse;
			color: black;
			margin: 2px;
			float: left;
		}
	</style>
	<body>
		<div id="tp">
			<img src="img/340254-106.jpg" class="imgs"
				style="display: block;">
			<img src="img/340425-106.jpg" class="imgs">
			<img src="img/340828-106.jpg" class="imgs">
			<img src="img/350902-106.jpg" class="imgs">
		</div>
		<div id="sz">
			<div class="xb" οnclick="Change(this,'0')" style="background-color: red">1</div>
			<div class="xb" οnclick="Change(this,'1')">2</div>
			<div class="xb" οnclick="Change(this,'2')">3</div>
			<div class="xb" οnclick="Change(this,'3')">4</div>
			
		</div>
		
		
	</body>
	<script type="text/javascript"> //让图片自动轮播
		
		window.setInterval("Show()",2000);
		var s = 0;
		function Show(){
			
			var imgs = document.getElementsByClassName("imgs");
			s++;
			if (s >= imgs.length) {
				s = 0;
			}
			for (var i=0; i < imgs.length; i++) {
				
				imgs[i].style.display = "none";
			}
			imgs[s].style.display = "block";

　　　　　　　　　　　　　　　　　　
			//让小标的轮播与图片轮播同步
			var z = document.getElementsByClassName("xb")
　　　　　　　　　　　　　　
			for (var j=0; j<z.length; j++) {      
				if (s == j) {
					z[j].style.backgroundColor = "red";   
					
				} else{
					z[j].style.backgroundColor = "chartreuse";
				}
			}
		}
		function Change(w,a){   //添加小标的点击轮播
			s = a;     //让小标与图片同步
			var imgs = document.getElementsByClassName("imgs");
			var z = document.getElementsByClassName("xb")
			for (var k=0; k<imgs.length; k++) {
				imgs[k].style.display = "none";
				z[k].style.backgroundColor = "chartreuse";
			}
			imgs[a].style.display = "block";
			z[a].style.backgroundColor = "red";
		}
		
	</script>
</html>

　　效果如下：

转载于:https://www.cnblogs.com/davis16/p/8349521.html

weixin_30420305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现简单的图片轮播

代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> *{ margin: 0px auto;...
复制链接

扫一扫