js幻灯片轮播图实现效果

时间：6年前阅读：4760

轮播图是现在网站网页上最常见的效果之一，对于轮播图的功能，要求不同，效果也不同！我们见过很多通过不同的方式，实现这一效果，但是有很多比较麻烦，而且不容易理解，兼容性也不好。原生JS实现幻灯片的示例代码,具有很好的参考价值，在这里分享一下，用js原生代码，实现轮播图的常见效果！思路比较清晰，而且可重复性高，也几乎包含了现在网页上轮播实现的所有效果！

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#fk{    
				width: 1200px;    
				height: 535px;    
				border: 2px solid blueviolet;    
				margin: 50px auto;    
				position: relative;    
			}    
			#fk img{    
				position: absolute;    
				top: 0;    
				left: 0;    
				display: none;    
			}    
			#fk ul{    
				position: absolute;    
				bottom: 23px;    
				left: 548px;    
			}    
			#fk ul li{    
				list-style: none;    
				width: 12px;    
				height: 12px;    
				background: #DDDDDD;    
				float: left;    
				margin-right: 8px;    
				border-radius: 50%;    
			}    
		</style>    
		<script type="text/javascript">    
//			注意:多个方式控制同一块元素效果的时候,一定要走同一个变量  要不然手动切换，跟自动定时器的不能同步    
			window.onload = function(){    
				var fk = document.getElementById('fk');    
				var imgs = document.getElementsByTagName('img');    
				var lis = document.getElementsByTagName('li');    
				var t = 0; //大总管变量    
//				控制函数切换的函数    
				function dd(){    
					t++; //2秒走一次变化+1    
//					判断,只有五张图片,5个li,到3的时候返回去    
					if (t==5) {    
						t=0;    
					}    
//					循环,让所有的图片隐藏,让所有的li变灰    
					for (var y=0;y<5;y++) {    
						imgs[y].style.display = 'none';    
						lis[y].style.background = '#DDDDDD'    
					}    
//					让t号图片显示,t号li变红    
					imgs[t].style.display = 'block';    
					lis[t].style.background = '#A10000';    
				}    
				var timer = setInterval(dd,1000);    
//				var timer = setInterval(function(){    
//					t++; //1秒走一次变化+1    
////					判断,只有五张图片,五个li,到5的时候返回去    
//					if (t==5) {    
//						t=0;    
//					}    
////					循环,让所有的图片隐藏,让所有的li变灰    
//					for (var y=0;y<5;y++) {    
//						imgs[y].style.display = 'none';    
//						lis[y].style.background = '#DDDDDD'    
//					}    
////					让t号图片显示,t号li变红    
//					imgs[t].style.display = 'block';    
//					lis[t].style.background = '#A10000';    
//				},1000)    
//				循环,加li加事件    
				for (var y=0;y<lis.length;y++) {    
//					给y号li加序号    
					lis[y].sh = y;    
//					给y号li加鼠标加移入事件    
					lis[y].onmouseover = function(){    
//						先把lis移入的序号存到大总管变量t里,统一变量    
						t = this.sh;    
//						这里移入鼠标就变手动的了,要停止上面的定时器    
						clearInterval(timer);    
//						alert(this.sh);    
//						循环,让所有的图片隐藏,让所有的li变灰    
					for (var y=0;y<5;y++) {    
						imgs[y].style.display = 'none';    
						lis[y].style.background = '#DDDDDD'    
					}    
//					让this.sh对应的图片显示    
					imgs[t].style.display = 'block';    
					lis[t].style.background = '#A10000';    
//					imgs[this.sh].style.display = 'block';    
//					lis[this.sh].style.background = '#A10000';    
					}    
//					移入事件结束    
//					鼠标移出事件    恢复定时器    
					lis[y].onmouseout =function(){    
						timer = setInterval(dd,1000);    
					}    
//					鼠标移出事件结束    
				}    
			}    
		</script>    
	</head>    
	<body>    
		<div id="fk">    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188163753008.jpg" alt="" style="display: block;"/>    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188163335544.jpg" alt="" />    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164175308.jpg" alt="" />    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164956825.jpg" alt="" />    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164532873.jpg" alt="" />      
			<ul>    
				<li style="background: #A10000;"></li>    
				<li></li>    
				<li></li>    
				<li></li>    
				<li></li>    
			</ul>    
		</div>    
	</body>    
</html>

代码效果图片

本文 2019年08月30日最后编辑

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

js幻灯片轮播图实现效果

网友评论