H5实现图片轮播

最新推荐文章于 2023-01-01 19:40:06 发布

淘气的小拖鞋

最新推荐文章于 2023-01-01 19:40:06 发布

阅读量3.3k

点赞数 3

分类专栏：编程语言

本文链接：https://blog.csdn.net/G_JD1234/article/details/99615302

版权

编程语言专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
			<script type="text/javascript">
			onload = function() {
				count = 0;
				bts=document.getElementsByClassName("b");
				imgobj = document.getElementById("image");
				time=setInterval("changeimg()", 1000);
//				for(var i=0;bts.length;i++){
//					bts[i].onmouseover=function(){
//						
//					}
//				}

			}

			function changeimg() {
				if(count == 4) {
					count = -1;
				}
				imgobj.src = "img/" + (++count) + ".jpg";
				changecolor();
			}
			function aft(){
				clearInterval(time);
				if(count==0){
					count=5;
				}
					imgobj.src = "img/" + (--count) + ".jpg";
				time = setInterval(changeimg,1000);
				changecolor();
			}
			function bef(){
				clearInterval(time);
				if(count==4){
					count=-1;
				}
					imgobj.src = "img/" + (++count) + ".jpg";
				time = setInterval(changeimg,1000);
				
				changecolor();
			}
			
			function oncha(e){
				clearInterval(time);
				count = e.innerText-1;/*用parseInt()转换成int。图片下标应从0开始*/
				imgobj.src = "img/" + (count) + ".jpg";
				changecolor();
				time=setInterval(changeimg, 1000);			
			}
			function changecolor(){
				
				for(var i=0;i< bts.length;i++){
					bts[i].style.backgroundColor="";
					if(i==count){
						bts[i].style.backgroundColor="#FFC0CB";
					}
				}
			}
			
		</script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#div1{
				width: 1520px;
				height: 700px;
				
			
			}
			#div2{
				margin-left: 75%;
				
			}
			#div1>button{
				width: 40px;
				height: 120px;
				position: fixed;
				top: 50%;
				background: rgba(0,128,128,0.3);
				border: none;
				
			}
			#div2>button{
				width: 40px;
				height: 40px;
				border-radius: 20px;
				margin-left: 10px;
				background: rgba(0,128,128,0.3);
			}
			#div2>button:hover{
				background-color: transparent;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<button onclick="aft()"><</button>
			<img src="img/0.jpg" id="image" width="100%" />
			<button onclick="bef()" style="right: 0px;">></button>
		</div>
		<div id="div2">
			<button id="0" class="b" onmouseover="oncha(this)" style="background: #FFC0CB;">1</button>
			<button id="1" class="b" onmouseover="oncha(this)">2</button>
			<button id="2" class="b" onmouseover="oncha(this)">3</button>
			<button id="3" class="b" onmouseover="oncha(this)">4</button>
			<button id="4" class="b" onmouseover="oncha(this)">5</button>
			
		</div>
	</body>

</html>

在这里插入图片描述

淘气的小拖鞋

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
H5实现图片轮播

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> onload = function() { count = 0; imgo...
复制链接

扫一扫