首页轮播图片实现

最新推荐文章于 2022-04-05 21:35:41 发布

calangan

最新推荐文章于 2022-04-05 21:35:41 发布

阅读量2.1w

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/calangan/article/details/72854355

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首页轮播图片实现

实现轮播的图片在下面已经给出，采用同一种大小的图片。

第一种：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			a{
				display:inline-block;
				font-size:13px;
				color:#ffffff;
				width:20px;
				text-decoration:none;
			}
			i{
				display:inline-block;
				margin:0px 10px;
				width:12px;
				height:12px;
				border-radius:100%;
				background-color:#fff;
			}
		</style>
		<script type="text/javascript">
			var timeoutId;
			var currentImgIndex = 1;
			function show(imgIndex) {
				if(imgIndex != undefined){//意味着用户点击了a标签
					clearTimeout(timeoutId) ;//当点击按扭时，清除计时器
					currentImgIndex = imgIndex;
				}
				for(var i = 1;i < 9;i++){
					//分别显示、隐藏对应图像
					if(i == currentImgIndex){
						document.getElementById("img" + currentImgIndex).style.display ="";
						document.getElementById("i" + currentImgIndex).style.backgroundColor ='red';
					}else{
						document.getElementById("img" + i).style.display ="none";
						document.getElementById("i" + i).style.backgroundColor ='#fff';
					}
				}
				//设置下一个图像
				if(currentImgIndex == 8){
					currentImgIndex = 1;
				}else{
					currentImgIndex++;
				}
				timeoutId = setTimeout('show()', 3000);
			}
		</script>
	</head>
	<body οnlοad="show()">
		<div style="position:relative; border: 1px solid gray;width:790px;">
			<img id="img1" src="images/1.jpg" style="display:none;"/>
			<img id="img2" src="images/2.jpg" style="display:none;"/>
			<img id="img3" src="images/3.jpg" style="display:none;"/>
			<img id="img4" src="images/4.jpg" style="display:none;"/>
			<img id="img5" src="images/5.jpg" style="display:none;"/>
			<img id="img6" src="images/6.jpg" style="display:none;"/>
			<img id="img7" src="images/7.jpg" style="display:none;"/>
			<img id="img8" src="images/8.jpg" style="display:none;"/>
			<div style="position:absolute;left:300px;top:310px;text-align:center;background-color:hsla(0,0%,100%,.3);border-radius:12px;padding:2px 16px 2px 0px;">
				<a href="javascript:show(1)"><i id="i1"  οnmοuseοver="show(1)" οnmοuseοut="document.getElementById('i1').style.backgroundColor ='#fff'"></i></a>
				<a href="javascript:show(2)"><i id="i2"  οnmοuseοver="show(2)" οnmοuseοut="document.getElementById('i2').style.backgroundColor ='#fff'"></i></a>
				<a href="javascript:show(3)"><i id="i3"  οnmοuseοver="show(3)" οnmοuseοut="document.getElementById('i3').style.backgroundColor ='#fff'"></i></a>
				<a href="javascript:show(4)"><i id="i4"  οnmοuseοver="show(4)" οnmοuseοut="document.getElementById('i4').style.backgroundColor ='#fff'"></i></a>
				<a href="javascript:show(5)"><i id="i5"  οnmοuseοver="show(5)" οnmοuseοut="document.getElementById('i5').style.backgroundColor ='#fff'"></i></a>
				<a href="javascript:show(6)"><i id="i6"  οnmοuseοver="show(6)" οnmοuseοut="document.getElementById('i6').style.backgroundColor ='#fff'"></i></a>
				<a href="javascript:show(7)"><i id="i7"  οnmοuseοver="show(7)" οnmοuseοut="document.getElementById('i7').style.backgroundColor ='#fff'"></i></a>
				<a href="javascript:show(8)"><i id="i8"  οnmοuseοver="show(8)" οnmοuseοut="document.getElementById('i8').style.backgroundColor ='#fff'"></i></a>
			</div>
		</div>
	</body>
</html>










第二种：
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			i{
				display: inline-block;
				margin-right: 10px;
				width: 12px;
				height: 12px;
				border-radius: 100%;
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<div style="width:790px;height:340px;position:relative;margin-bottom:10px;margin:0 auto;">
			<ul style="list-style: none;">
				<li style="opacity: 0; z-index: 0; position: absolute;">                  	
					<img src="./592e3898Nadc52f11.jpg" class="J_slider_item_img slider_item_img"/>
				</li>
				<li style="opacity: 0; z-index: 0; position: absolute;">              
					<img src="./592fc063Nb40aac29.jpg" class="J_slider_item_img slider_item_img"/>           
				</li>
				<li style="opacity: 0; z-index: 0; position: absolute;">     
					<img src="./59322791N9282c13a.jpg" class="J_slider_item_img slider_item_img"/>
				</li>
			</ul>              
			<div style="position: absolute;z-index: 1;left: 50%;transform:translate(-50%, 0);bottom: 20px;padding: 4px 8px;border-radius: 12px;background-color: hsla(0,0%,100%,.3);">
				<i οnclick="loopBanner(0)"></i>
				<i οnclick="loopBanner(1)"></i>
				<i οnclick="loopBanner(2)" style="margin-right:0px;"></i>
			</div>
		</div>
		<script type="text/javascript">
			var id;
			var index = 0;
			var iArray = document.getElementsByTagName("i");
			var liArray = document.getElementsByTagName("li");
			function loopBanner(designatedIndex){
				if(designatedIndex!=undefined){
					index = designatedIndex;
					clearInterval(id);
					id=setInterval("loopBanner()",2000);
				}
				for(var i=0;i<liArray.length;i++){
					var iStyle = iArray[i].style;
					var liStyle = liArray[i].style;
					if(i==index){
						liStyle.opacity=1;
						liStyle.zIndex=1;
						iStyle.backgroundColor="#db192a";
					}else{
						liStyle.opacity=0;
						liStyle.zIndex=0;
						iStyle.backgroundColor="#fff";
					}
				}
				index++;
				if(index==liArray.length){
					index=0;
				}
			}
			loopBanner();
			id=setInterval("loopBanner()",1000);
		</script>
	</body>
</html>