轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

罗生门£

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量90

点赞数 1

分类专栏：编程文章标签： css javascript html html5 css3

本文链接：https://blog.csdn.net/qq_44727672/article/details/103591066

版权

编程专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实现网站上图片轮播的效果

是无缝轮播

<body>
	<div class="aa">
		<marquee behavior="" direction="">软件学院</marquee>
	</div><!--这个盒子实现了用html控制元素运动-->
	<div class="pic" id="cc">
		<ul class="gd" id="dd">
			<li><img src="img/1.jpg" alt="" /></li>
			<li><img src="img/2.jpg" alt="" /></li>
			<li><img src="img/3.jpg" alt="" /></li>
			<li><img src="img/4.jpg" alt="" /></li>
			<li><img src="img/5.jpg" alt="" /></li>
			<li><img src="img/6.jpg" alt="" /></li>
			<li><img src="img/7.jpg" alt="" /></li>
			<li><img src="img/8.jpg" alt="" /></li>
			<li><img src="img/9.jpg" alt="" /></li>
			<li><img src="img/10.jpg" alt="" /></li>
			<li><img src="img/1.jpg" alt="" /></li>
			<li><img src="img/2.jpg" alt="" /></li>
			<li><img src="img/3.jpg" alt="" /></li>
			<li><img src="img/4.jpg" alt="" /></li>
			<li><img src="img/5.jpg" alt="" /></li>
			<li><img src="img/6.jpg" alt="" /></li>
		</ul>
	</div>
</body>

下面是样式以及js代码

<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: skyblue;
		}
		.aa{
			margin: 0 auto;
		}
		img{
			vertical-align: top;/*消除图片之间的缝隙*/
			width: 180px;
			height: 120px; 
			/*float: left;*/
			padding : 0 10px;
		}
		.pic{
			width: 1200px;
			height: 120px;
			margin : 70px auto;
			overflow: hidden;
			position: relative;
			/*这个是控制了页面的那个盒子的宽度，有几个图片显示，就流多少宽度*/
		}
		ul{
			width: 400%;
			list-style: none;
			position: absolute;
			top: 0;
			left: 0;
			cursor: pointer;
		}
		li{
			float: left;
		}
	</style>
	<script>
		function $(id) {
			return document.getElementById(id);
		}
		window.onload=function(){
			var  timer ;
			var num=0;
			timer=setInterval(marquee, 1);
			function marquee(){
				num--;
				if(num<-2000){
					num=0;
				}
				$("dd").style.left=num+"px";
			}
			$("dd").onmouseover=function(){
				clearInterval(timer);
			}
			$("dd").onmouseout=function(){
				timer=setInterval(marquee, 10);
			}
		}
	</script>