原生JavaScript实现轮播图

最新推荐文章于 2024-07-16 17:56:11 发布

it's a question

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量92

点赞数

分类专栏： JavaScript 文章标签： javascript

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

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			text-decoration: none;
		}
		#container {
			width: 590px;
			height: 470px;
			margin: 10px auto;
			overflow: hidden;
			position: relative;
		}
		#list {
			width: 4720px;
			height: 470px;
			position: absolute;
		}
		#list img {
			float: left;
			display: block;
		}
		#container .arrow {
			position: absolute;
			top: 210px;
			width: 35px;
			height: 50px;
			background-color: rgba(0,0,0,0.3);
			color: #cecece;
			text-align: center;
			line-height: 50px;
			font-size: 30px;
			display: none;
		}
		#container .arrow:hover {
			background-color: rgba(0,0,0,0.5);
			color: #fff;
		}
		#container:hover .arrow{
			display: block;
		}
		#prev {
			left: 0;
		}
		#next {
			right: 0;
		}
		#buttons {
			height: 10px;
			/*width: 80px;*/
			position: absolute;
			left: 20px;
			bottom: 20px;
			/*background-color: red;*/
		}
		#buttons span {
			display: block;
			float: left;
			width: 10px;
			height: 10px;
			background-color: #ccc;
			border-radius: 50%;
			margin-right: 3px;
		}
		#buttons .on {
			background-color: #fff;
			border: 2px solid #ccc;
			margin-top: -2px;
		}
	</style>
	<script>
		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 = 0;
			var timer;

			function showButton(){	//点亮小圆点
				for (var i = 0; i < buttons.length; i++) {	//遍历每个小圆点判断是否被点亮
					if (buttons[i].className == 'on') {
						buttons[i].className = '';
						break;
					}
				}
				buttons[index].className = 'on';
			}

			function animate(offset){
				var newLeft = parseInt(list.style.left) + offset;
				list.style.left = newLeft + 'px';	//parseInt() 字符串转换为数值
				if (newLeft > 0) {	//判断left值，无限循环
					list.style.left = -4130 +'px';
				}
				if (newLeft < -4130) {
					list.style.left = 0 + 'px';
				}
			}
			function play(){	//自动播放
				timer = setInterval(function(){
					next.onclick();
				},3000);
			}
			function stop(){	//停止自动播放
				clearInterval(timer);
			}
			next.onclick = function(){	//右箭头函数
				if (index == 7) {
					index = 0;
				}else{
					index++;
				}
				showButton();
				animate(-590);
			}
			prev.onclick = function(){	//左箭头函数
				if (index == 0) {
					index = 7;
				}else{
					index--;
				}
				showButton();
				animate(590);	
			}
			for (var i = 0; i < buttons.length; i++) { //遍历每个小按钮
				buttons[i].onmouseover = function(){	//按钮绑定鼠标事件
					if (this.className == 'on') {
						return;
					}
					var myIndex = parseInt(this.getAttribute('index'));  //获取当前点击的按钮
					var offset = -590 * (myIndex - index);	//计算left值
					animate(offset);
					index = myIndex;
					showButton();
				}
			}
			container.onmouseover = stop;	//鼠标进入图片区域清除自动
			container.onmouseout = play;	//鼠标离开图片区域自动播放
			play();		//默认自动播放
		}
	</script>
</head>
<body>
	<div id="container">
		<div id="list" style="left: 0px">
			<a href=""><img src="img/1.jpg" alt=""></a>
			<a href=""><img src="img/2.jpg" alt=""></a>
			<a href=""><img src="img/3.jpg" alt=""></a>
			<a href=""><img src="img/4.jpg" alt=""></a>
			<a href=""><img src="img/5.jpg" alt=""></a>
			<a href=""><img src="img/6.jpg" alt=""></a>
			<a href=""><img src="img/7.jpg" alt=""></a>
			<a href=""><img src="img/8.jpg" alt=""></a>
		</div>
		<div id="buttons">
			<span index="0" class="on"></span>
			<span index="1"></span>
			<span index="2"></span>
			<span index="3"></span>
			<span index="4"></span>
			<span index="5"></span>
			<span index="6"></span>
			<span index="7"></span>
		</div>
		<a href="javascript:;" id="prev" class="arrow">&lt;</a>
    	<a href="javascript:;" id="next" class="arrow">&gt;</a>
	</div>
</body>
</html>

效果图

it's a question

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>  <style ...
复制链接

扫一扫