一个轮播的写法

最新推荐文章于 2024-05-21 14:15:14 发布

weixin_30297281

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量45

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yexuelaoren/p/6096466.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}

#container{width: 600px; height: 400px; overflow: hidden; position: relative; }
#list{width: 4200px; height: 400px; position: absolute; z-index: 1;}
#list img{float: left;}
#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#buttons .on {  background: orangered;}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
</style> 
</head> 
<body>
	<div id="container">
	    <div id="list" style="left: -600px;">
	    	<img src="images/5.jpg" alt="5"/>	        
	        <img src="images/1.jpg" alt="1"/>
	        <img src="images/2.jpg" alt="2"/>
	        <img src="images/3.jpg" alt="3"/>
	        <img src="images/4.jpg" alt="4"/>
	        <img src="images/5.jpg" alt="5"/>
	        <img src="images/1.jpg" alt="1"/>
	        
	    </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="javascript:;" id="prev" class="arrow"><</a>
	    <a href="javascript:;" id="next" class="arrow">></a>
	</div>
	<script type="text/javascript">
		//在页面加载完后立即执行多个函数完美方案。
		function addloadEvent(func){
		    var oldοnlοad=window.onload;
		    if(typeof window.onload !="function"){
		        window.οnlοad=func;
		    }
		    else{
		        window.οnlοad=function(){
		            if(oldonload){
		               oldonload(); 
		            }
		            func();
		        }
		    }
		}
		//在页面加载完后立即执行多个函数完美方案over。
		lbt();

		//轮播图动画切换原理
		
		function lbt(){
			var container=document.getElementById("container");
			var prev=document.getElementById("prev");
			var next=document.getElementById("next");
			var list=document.getElementById("list");
			var buttons=document.getElementById("buttons").getElementsByTagName("span");
			var imgs=list.getElementsByTagName("img");
			var index=1;
			var animated=false;
			var timer;

			//当前图片轮播的圆点变色显示，原理：index数值是跟随list滑动次数递增的，第一次index=1，所以第一个button的索引值就是0。
			//for循环是添加on样式之前要清空之前的on。
			function showButton(){
				for(var i=0;i<buttons.length;i++){
					if(buttons[i].className=="on"){
						buttons[i].className="";
						break;
					}
				}
				buttons[index-1].className="on";
			}
			//圆点变色显示 结束。



			function animate(offset){
				animated=true;
				var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量
				var time=300;//位移总时间
				var interval=10;//位移间隔时间
				//动画效果自定义公式： 每次位移的距离=单次偏移距离/位移次数
				var speed=offset/(time/interval);
				//递归函数 直到不满足条件（跳到辅助图）
				//递归就是把600偏移量分为多次完成偏移
				function go(){
					//speed<0 并且 当前偏移量>下一次偏移量 就是向左偏移 || 反之向右偏移   
					if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) {
						list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值
						setTimeout(go,interval);//10毫秒再次调用go函数
					}else{
						animated=false;
						list.style.left=newLeft+"px";//当前的偏移值=新的偏移值

						if(newLeft>-600){
							list.style.left=-3000+"px";
						}
						if (newLeft<-3000){
							list.style.left=-600+"px";
						}
					}
				}
				go();

				
			}
			//自动播放3秒执行一次next.onclick
			function play(){
				timer=setInterval(function(){
					next.onclick();
				},3000);
			}
			function stop(){
				clearInterval(timer);
			}
			//执行所有函数
			next.οnclick=function(){
				if(index==5){
					index=1;
				}else{
					index+=1;
				}

				showButton();
				if(!animated){
					animate(-600);
				}
				
			}
			//执行所有函数
			prev.οnclick=function(){
				if(index==1){
					index=5;
				}else{
					index-=1;
				}
				showButton();
				if(!animated){
					animate(600);
				}
			}
			//点击圆点按钮 偏移
			for(var i=0;i<buttons.length;i++){
				buttons[i].οnclick=function(){
					if(this.className=="on"){
						return;
					}
					//要点击的index属性的值 转换为整数
					var myIndex=parseInt(this.getAttribute("index"));
					//偏移量=-600*（要点击的位置-当前所在的位置），当前的位置就是index循环所得
					var os=-600*(myIndex-index);
					//切换完成后，把点击的index位置变成当前的index位置					
					index=myIndex;
					showButton();
					if(!animated){
						animate(os);
					}

				}
			}



			container.οnmοuseοver=stop;
			container.οnmοuseοut=play;

			play();

		}
		

	</script>
</body> 
</html>

转载于:https://www.cnblogs.com/yexuelaoren/p/6096466.html

weixin_30297281

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个轮播的写法

<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><style>body,h1,h2,h...
复制链接

扫一扫