js原生轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

闲不住的程序员

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量106

点赞数

分类专栏： html 文章标签：轮播图

本文链接：https://blog.csdn.net/abc8125/article/details/116057551

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需要使用到轮播图，n多年没写前端了，随便找了一个demo改了下，记录一下，以便后续快速的使用

<body>
 <div id="flash">
     <div id="prev"></div>
     <div id="next"></div>
	 <ul id="play">
	 	<li style="display: block;"><img src="images/1.jpg" alt="" /></li>
	 	<li><img src="images/2.jpg" alt="" /></li>
	 	<li><img src="images/3.jpg" alt="" /></li>
	 	<li><img src="images/4.jpg" alt="" /></li>
	 	<li><img src="images/5.jpg" alt="" /></li>
	 	<li><img src="images/6.jpg" alt="" /></li>
	 	<li><img src="images/7.jpg" alt="" /></li>
	 	<li><img src="images/8.jpg" alt="" /></li>
	 </ul>
	 <ul id="button">
	 	<li><div style="background: #A10000;"></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 </ul>
 </div>
</body>

*{padding: 0px;margin: 0px;}
#flash{width:1200px;height: 535px;margin: 50px auto;position: relative;}
#flash #play{width:1200px;height: 535px;list-style: none;position:absolute;top:0px;left:0px;}
#flash #play li{display: none;position:absolute;top:0px;left:0px;}
#flash #play li img{float: left;}
#button{position: absolute;bottom:20px;left:470px;list-style: none;}
#button li{margin-left: 10px;float: left;}
#button li div{width:12px;height: 12px;background:#DDDDDD;border-radius: 6px;cursor: pointer;}
#prev{width:40px;height:63px;background:url(images/beijing.png) 0px 0px;position: absolute;top:205px;left:10px;z-index: 1000;}
#next{width:40px;height:63px;background:url(images/beijing.png) -40px 0px;position: absolute;top:205px;right:10px;z-index: 1000;}
#prev:hover{background:url(images/beijing.png) 0px -62px;}
#next:hover{background:url(images/beijing.png) -40px -62px;}

window.onload=function()
{
		 var oPlay=document.getElementById('play');
		 var aLi=oPlay.getElementsByTagName('li');
		 var oButton=document.getElementById('button');
		 var aDiv=oButton.getElementsByTagName('div');
		 var oPrev=document.getElementById('prev');
		 var oNext=document.getElementById('next');
		 var oFlash=document.getElementById('flash');
		 var now=0;
		 var timer2=null;
		 for(var i=0; i<aDiv.length; i++) {
		 	aDiv[i].index=i;
		 	aDiv[i].onmouseover=function(){
		 		if(now==this.index) return;
		 		now=this.index;
		 		tab();
		 	}
		 }
		 oPrev.onclick=function(){
		 	now--;
		 	if(now==-1){
		 		now=aDiv.length-1;
		 	}
		 	tab();
		 }
		 oNext.onclick=function(){
		 	now++;
		 	if(now==aDiv.length){
		 		now=0;
		 	}
		 	tab();
		 }
		 oFlash.onmouseover=function()
		{
		    clearInterval(timer2);
		}
		 oFlash.onmouseout=function()
		{
			timer2=setInterval(oNext.onclick,4000);
		}
		 timer2=setInterval(oNext.onclick,5000);
		 function tab(){
		 	for(var i=0; i<aLi.length; i++){
		 		aLi[i].style.display='none';
		 	}
		 	for(var i=0; i<aDiv.length; i++) {
		 		aDiv[i].style.background="#DDDDDD";
		 	}
		 	aDiv[now].style.background='#A10000';
		 	aLi[now].style.display='block';
		 	aLi[now].style.opacity=0;
		 	aLi[now].style.filter="alpha(opacity=0)";
		 	jianbian(aLi[now]);
		 }
		function jianbian(obj){
			var alpha=0;
			clearInterval(timer);
			var timer=setInterval(function(){
				alpha++;
				obj.style.opacity=alpha/100;
				obj.style.filter="alpha(opacity="+alpha+")";
				if(alpha==100) {
					clearInterval(timer);
				}
			},10);
		}
}

效果图:

在这里插入图片描述

闲不住的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js原生轮播图

需要使用到轮播图，n多年没写前端了，随便找了一个demo改了下，记录一下，以便后续快速的使用<body> <div id="flash"> <div id="prev"></div> <div id="next"></div> <ul id="play"> <li style="display: block;"><img src="images/1.jpg" alt=""
复制链接

扫一扫