用HTML5和JavaScript做一个轮播图

最新推荐文章于 2024-07-18 17:16:21 发布

caijilaoyan

最新推荐文章于 2024-07-18 17:16:21 发布

阅读量9.6k

点赞数 8

本文链接：https://blog.csdn.net/caijilaoyan/article/details/89449856

版权

说明：
（1）代码中四个div内的图片 " images/14.jpg " , " images/15.jpg " , " images/16.jpg " , " images/17.jpg " ，是本人电脑中的图片若想运行需用自己电脑中的图片；
（2）代码中两个超链接a中的图片 " images/arrowLeft.png " , " images/arrowRight.png "，分别是左右两边的点击箭头；
如图：
在这里插入图片描述运行结果如图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		#cou{width: 1200px;height: 600px;margin: auto;position: relative;}
		#content img{width: 1200px;height: 600px;}
		#content div{display: none;}
		#content div.on{display: block;}
		ol,li{list-style: none;}
		ol{position: absolute;bottom: 20px;left: 565px;background:none;}
		.item li{float: left;width: 10px;height: 10px;border-radius: 50%;background-color: #fff;margin-right: 10px;}
		.item li.current{background-color: orange;}
		.arrow{width: 40px;height: 50px;position: absolute;top: 275px;background-color: #999;display: none;}
		.arrow img{width: 30px;height: 30px;}
		.ar{right: 0px;}
		.al img{margin: 10px 10px 10px 0px;}
		.ar img{margin: 10px 0px 10px 10px;}

	</style>
</head>
<body>
	<div id="cou">
		<div id="content">
			<div class="on"><img src="images/14.jpg" alt=""></div>
			<div><img src="images/15.jpg" alt=""></div>
			<div><img src="images/16.jpg" alt=""></div>
			<div><img src="images/17.jpg" alt=""></div>
		</div>
		<ol class="item">
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
		<a href="#" class="arrow al" style="border-radius: 0px 25px 25px 0px;"><img src="images/arrowLeft.png" alt=""></a>
		<a href="#" class="arrow ar" style="border-radius: 25px 0px 0px 25px;"><img src="images/arrowRight.png" alt=""></a>
	</div>
	<script type="text/javascript">
		//找到四个图片
		var o=document.querySelector('#cou');
		var lis=document.querySelector('.item').querySelectorAll('li');
		var arrows=document.querySelectorAll('.arrow');
		var ds=document.querySelector('#content').querySelectorAll('div');
		var  index=0;//保存当前轮播图的索引 默认为0 也就是第一张图片
		var len=ds.length;
		var t;
		//启动定时器
		t=setInterval(moveNext,2000);//自动轮播
		//鼠标经过，轮播停止
		o.function(){
			clearInterval(t);//清除定时器是图片停止轮播
			o.style.cursor='pointer';
			//箭头出现
			arrows[0].style.display='block';
			arrows[1].style.display='block';
		}
		//鼠标离开，图片继续轮播
		o.function(){
			t=setInterval(moveNext,2000)
			//箭头隐藏
			arrows[0].style.display='none';
			arrows[1].style.display='none';
		}
		//指示器轮播
		for(var i=0;i<len;i++){
			lis[i]._index=i;//新属性 保存位置
			//遍历li 并为每个li添加点击事件
			lis[i].function(){
				//把当前显示的li变为未选中状态
				lis[index].className='';
				//当前显示的图片变为未选中
				ds[index].className='';
				this.className='current';//被点击的li 变为选中状态
				ds[this._index].className='on';//轮番图显示为对应的
				//修改index的值
				index=this._index;
			};
		}
		//箭头点击
		//左
		arrows[0].function(){
			movePre();
		}
		//右
		arrows[1].function(){
			moveNext();
		}
		//图片切换
		function moveNext() {
			ds[index].className='';//把当前显示的图片变为不显示
			lis[index].className='';//当前指示器不显示
			index++;//索引递增
			//使索引循环
			if (index==len) {
				index=0;//最后一张之后使索引再变为0 从第一张开始
			}
			ds[index].className='on';//切换图片
			lis[index].className='current';
		}
		//左切换
		function movePre(){
			//当前显示的变为不显示
			ds[index].className='';
			lis[index].className='';

			index--;
			if(index==-1){
				index=len-1;//第一张时，修改为最后一站
			}
			//上一张展示
			ds[index].className='on';
			lis[index].className='current';
		}
	</script>
</body>
</html>

注：博客中图片内容来自彼岸果茶（http://www.bianguocha.com）；