轮播图

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

koukou0419

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

阅读量86

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/koukou0419/article/details/80666898

版权

前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin:0px;
	    	padding:0;
	    }
		li{
			list-style: none;
			float:left;
		}
		li img{
           width:300px;
           height:200px;
		}
		div{
			width:900px;
			height:350px;
			border:1px solid red;
			margin-top: 100px;
			margin-left:200px;
		 overflow: hidden;
			position:relative;

		}
		ul{
			width:1000px;
			height:300px;
            background-color: red;
            position:absolute;
            left:0;
            top:0;
		}
	</style>
		
</head>
<body>
<a href="">左走</a>
		<a href="">右走</a>
	<div>
		
		<ul>

			<li><img src="images/t1.jpg" alt=""></li>
			<li><img src="images/t2.jpg" alt=""></li>
			<li><img src="images/t3.jpg" alt=""></li>
			
		</ul>

	</div>
	
	<script>


		window.onload=function(){
			var ul=document.getElementsByTagName('ul')[0];
		    var li=document.getElementsByTagName('li');
		    var div=document.getElementsByTagName('div')[0];
		    var a=document.getElementsByTagName('a');
		    var speed=-2;
		      ul.innerHTML=ul.innerHTML+ul.innerHTML;
		      ul.style.width=li.length*li[0].offsetWidth+"px";//解决ul宽度不够问题  出现没有浮动现象
		      	function move(){
		      		ul.style.left=ul.offsetLeft+speed+"px";
						if(ul.offsetLeft<-ul.offsetWidth/2){
							ul.style.left=0;//当ul的位移移动到自身一半位置的时候即就是重复的图片组也开始移出div框的时候，让ul的位移为0和div重合
						}
						if(ul.offsetLeft>0){
							ul.style.left=-ul.offsetWidth/2+"px";
							//当ul位移忘右走时候  left开始大于零，就把ul往后拖一半因为ul后一半宽度存放的同样的图片
						}

		      	}
		      	a[0].onclick=function(){
				speed=-2;
			};
			a[1].onclick=function(){
				speed=2;
			};
			console.log(a[0]);
			var timer=setInterval(move,130);
			div.onmouseover=function(){
				clearInterval(timer);
			}
			div.onmouseout=function(){
				timer=setInterval(move,130);
			}
			
		}


	    
	</script>
		
		
</body>
</html>

koukou0419

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } li{ ...
复制链接

扫一扫

专栏目录