轮播图

最新推荐文章于 2024-12-23 11:36:10 发布

原创最新推荐文章于 2024-12-23 11:36:10 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

85 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个自动轮播图片的广告横幅，包括图片切换效果、导航点和左右箭头控制。通过相对定位和绝对定位的巧妙运用，实现了图片的无缝滚动和美观的用户交互界面。

<!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" />
<title>无标题文档</title>
<style type="text/css">
body,ul,ol,li,img{margin:0;padding:0;list-style:none;}
#box{width:490px;height:170px;padding:5px;
	position: relative;border:1px solid #ccc;margin:100px auto 0;overflow:hidden;}
.ad{width:490px;height:170px;overflow:hidden;position:relative;}
#box img{width:490px;}
.ad ol{position:absolute;right:10px;bottom:10px;}
.ad ol li{width:20px;height:20px;line-height:20px;border:1px solid #ccc;text-align:center;background:#fff;float:left;margin-right:10px;cursor:pointer;_display:inline;}
.ad ol li.current{background:yellow;}
.ad ul li{float:left;}
.ad ul{ position:absolute; top:0; width:2940px;}
.ad ul li.current{display:block;}
#arr {
	display: none;}
#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
#arr #right{right:5px; left:auto;}
</style>
</head>
<body>
	<div id="box" class="all">
	  <div class="ad">
	    <ul id="imgs">
	      <li><img src="images/1.jpg" /></li>
	      <li><img src="images/2.jpg" /></li>
	      <li><img src="images/3.jpg" /></li>
	      <li><img src="images/4.jpg" /></li>
	      <li><img src="images/5.jpg" /></li>
	    </ul>
	  </div>
		<div id="arr"><span id="left"><</span><span id="right">></span></div>
	</div>
</body>
</html>
<script>
	function $(id) {return document.getElementById(id)}
	var box = document.getElementById("box");
	box.onmouseover = function() {
		$("arr").style.display = "block";
	}
	box.onmouseout = function() {
		$("arr").style.display = "none";
	}

	$("right").onclick = function() {
		target -= 490;
	}
	$("left").onclick = function() {
		target += 490;
	}

	//缓动动画
	var leader = 0,target = 0;
	setInterval(function() {
		if(target >= 0)
		{
			target = 0;
		}
		else if(target <= -1960)
		{
			target = -1960;
		}
		leader = leader + (target - leader) / 10;
		$("imgs").style.left = leader + "px";
	},30)
</script>