轮播图实现

最新推荐文章于 2024-07-19 15:13:24 发布

敲代码的无名小卒

最新推荐文章于 2024-07-19 15:13:24 发布

阅读量49

点赞数

文章标签： javascript html5 html css3 css

原文链接：https://blog.csdn.net/qq_22222499/article/details/52831004

版权

轮播图实现

<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<style>
	* {
		padding: 0;
		margin: 0;
	}
	
	#container {
		margin: 50px auto;
		position: relative;
		width: 300px;
		height: 200px;
		overflow: hidden;
	}
	
	img {
		float: left;
		width: 300px;
		height: 200px;
	}
	
	#list {
		position: absolute;
		width: 2100px;
		height: 200px;
	}
	
	.arrow {
		z-index: 2;
		height: 35px;
		width: 20px;
		top: 85px;
		position: absolute;
		line-height: 35px;
		text-align: center;
		display: none;
		text-decoration: none;
		cursor: pointer;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	#prev {
		left: 5px;
	}
	
	#next {
		right: 5px;
	}
	
	#buttons {
		left: 40px;
		bottom: 10px;
		height: 10px;
		width: 100px;
		position: absolute;
		z-index: 2;
	}
	
	#buttons span {
		cursor: pointer;
		float: left;
		height: 10px;
		width: 10px;
		margin-right: 10px;
		background-color: white;
		border-radius: 5px;
	}
	
	#buttons .on {
		background-color: red;
	}
	#container:hover .arrow{
		display: block;
	}
</style>

<script type="text/javascript">
	window.onload = function() {
		var container = document.getElementById('container');
		var list = document.getElementById('list');
		var buttons = document.getElementById('buttons').getElementsByTagName('span');
		var prev = document.getElementById('prev');
		var next = document.getElementById('next');
		var index = 1;
		var anima=false;
		var inter=2000;
		var timer;
		

		function animate(offset) {
			var time = 300; //位移总时间
	     	var interval = 10; //时间间隔
		    var speed = offset / (time / interval); //一次的位移距离
			var listleft = parseInt(list.style.left) + offset;
			var go=function() {//js动画效果
				anima=true;
				if((speed > 0 && listleft > parseInt(list.style.left)) || (speed < 0 && listleft < parseInt(list.style.left))) {
					list.style.left = parseInt(list.style.left) + speed+"px";
					setTimeout(go, interval);
				} else {
					list.style.left = listleft + 'px';
					if(listleft < -1500) {
						list.style.left = -300 + 'px';
					}
					if(listleft > -300) {
						list.style.left = -1500 + 'px';
					}
					anima=false;
				}
			}
			go();
		}
		
		function play(){
			timer=setTimeout(function(){
				next.onclick();
				play();
			},inter);
		}
		
		function stop(){
			clearTimeout(timer);
		}
		
		function showbutton() { //显示按钮
			for(var i = 0; i < buttons.length; i++) {
				buttons[i].className = "";
			}
			buttons[index - 1].className = "on";
		}

		next.onclick = function() {
			if(!anima){
				if(index == 5) {
				index = 1;
			} else {
				index += 1; //点击往右按钮也会跟着移动
			}
			showbutton();
				animate(-300);
			}
		}
		prev.onclick = function() {
			
			if(!anima){
				if(index == 1) { //处于第一张图片时点击往前的按钮跳转最后一张照片的按钮
				index = 5;
			} else {
				index -= 1;
			}
			showbutton();
				animate(300);
			}
		}
		/*获取点击的哪个按钮直接跳转到对应的图片上，根据点击的按钮的index以及上一个index算出距离后，再把距离的大小赋值给offset*/
		for(var i = 0; i < buttons.length; i++) {
			buttons[i].onclick = function() {
				/*	if(this.className=="on"){//优化点击同一张图片不运行下面
						return;
					}*/
				var myIndex = parseInt(this.getAttribute('index')); //得到index的值
				var offset = (myIndex - index) * -300;
				animate(offset);
				index = myIndex;
				showbutton();
			}
		}
		
		container.onmouseover=stop;
		container.onmouseout=play;
		play();
		
	}
</script>

<body>
	<div id="container">

		<div id="list" style="left: -300px;">
			<img src="img/5.png" alt="1" /> <!--处理视觉误差-->
			<img src="img/1.png" alt="1" />
			<img src="img/2.png" alt="2" />
			<img src="img/3.png" alt="3" />
			<img src="img/4.png" alt="4" />
			<img src="img/5.png" alt="5" />
			<img src="img/1.png" alt="5" />
		</div>
		<div id="buttons">
			<span index="1" class="on"></span>
			<span index="2"></span>
			<span index="3"></span>
			<span index="4"></span>
			<span index="5"></span>
		</div>
		<a href="#" class="arrow" id="prev">
			<</a>
				<a href="#" class="arrow" id="next">></a>
	</div>
</body>

敲代码的无名小卒

关注

0
点赞
踩
0

收藏

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

轮播图实现<head> <meta charset="utf-8" /> <title></title></head><style> * { padding: 0; margin: 0; } #container { margin: 50px auto; position: relative; width: 300px; height: 200px; overflow: hidden;
复制链接

扫一扫