14.07.31 js轮播器-CSDN博客

本文链接：https://blog.csdn.net/eatandlearn/article/details/38318441

复习了css的一些内容。

display 属性规定元素应该生成的框的类型。none 此元素不会被显示；block此元素将显示为块级元素，此元素前后会带有换行符。点击打开链接

position属性规定元素的定位类型。absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。relative相对于正常位置进行定位。 http://www.w3school.com.cn/cssref/pr_class_position.asp

ＪＳ

火狐浏览器具有获取document.getElementsByClassName('class名称')的功能，但是在ＩＥ下是错误的，考虑兼容性，写了一个通过类名获取多个元素的方法。

<pre name="code" class="javascript">// JavaScript Document
function getByClass(className，context){//传类名进来，找包含类名的元素
    context = context || document;
    if(context.getElementsByClassName){//检测浏览器自身是否有这个功能
		return context.getElementsByClassName(className);
		}
	var nodes = context.getElementsByTagName('*');//获取所有节点
	var ret=[];//初始化ret并将ret赋值为数组对象，属于简写。这里用来保存包含的节点。
	for(var i=0;i<nodes.length;i++){//遍历所有节点
		if(hasClass(nodes[i],className))  ret.push(nodes[i]);
		}
		return ret;
	}
function hasClass(node,className){//测试指定的节点是不是包含指定的类名。
	var names=nodes.className.split(/ \s+/);
	for(var i=0;i<names.length;i++){
		if(names[i]==className) return true;
		}
		return false;
	}

轮播器的代码，很乱，还有点问题好像，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf8" />
<title>js轮播器</title>
<script type="text/javascript">
	function getByClass(className,context){//传类名进来，找包含类名的元素
	
   context = context || document;
   if(context.getElementsByClassName){//检测浏览器自身是否有这个功能
		return context.getElementsByClassName(className);
		}
	var nodes = context.getElementsByTagName('*');//获取所有节点
	//alert(nodes.length);
	var ret=[];//初始化ret并将ret赋值为数组对象，属于简写。这里用来保存包含的节点。
	 for(var i=0;i<nodes.length;i++){//遍历所有节点
	 	if(hasClass(nodes[i],className))  ret.push(nodes[i]);
	 	}
		return ret;

	}
function hasClass(node,className){//测试指定的节点是不是包含指定的类名
	var names=node.className.split(/ \s+/);
	for(var i=0;i<names.length;i++){
		if(names[i]==className) return true;
		}
		return false;
	}
function animate(o,start,alter,dur,fx) {
	var curTime=0;
	var t=setInterval(function(){
		if(curTime>=dur) clearTimeout(t);
		for(var i in start){
			o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";
		}
		curTime+=50;
	},50);
}
function Linear(start,alter,curTime,dur){
	return start+curTime/dur*alter;
}
function Quad(start,alter,curTime,dur){
	return start+Math.pow(curTime/dur,2)*alter;
}
</script>
<script type="text/javascript">
window.οnlοad=function () {
	var ul = getByClass('buttons')[0];
	//alert(ul);
	var btns=ul.getElementsByTagName('li');
	var scrollContent=getByClass('scrollContent')[0]
	var cur=btns[0],t;
	for(var i=0;i<btns.length;i++){
		(function(i){
			btns[i].οnmοuseοver=function(){
				clearTimeout(t)
				//scrollContent.style.top=(-i*280)+"px";
				var top=parseInt(scrollContent.style.top) || 0;
				animate(scrollContent,{top:top},{top:(-i*280)-top},400,Quad);
				for(var j=0;j<btns.length;j++){
					btns[j].className="";
				}
				this.className="hover";
				cur=this;
			}
			btns[i].οnmοuseοut=function(){
				setTimeout(fn,1000);
			}
			btns[i].index=i;
		})(i)
		
	}
	btns[0].onmouseover();
	t=setTimeout(fn,1000);
	function fn(){
		var nextIndex=cur.index+1;
		if(nextIndex==btns.length){
			nextIndex=0;
		}
		btns[cur.index].onmouseover();
		t=setTimeout(fn,1000);
	}
}
</script>
<style type="text/css">
.scrollContent {
	width: 520px;
	height: 1400px;
	position: absolute;
	top: 0;
	left: 0
}
.scrollFrame {
	width: 520px;
	height: 280px;
	overflow: hidden;
	position: relative
}
.scrollFrame .buttons {
	height: 30px;
	position: absolute;
	right: 10px;
	top: 230px
}
.scrollFrame .buttons li {
	display: block;
	width: 24px;
	height: 24px;
	border: 1px solid orange;
	float: left;
	background: white;
	margin-right: 4px;
	text-align: center;
	line-height: 24px;
	cursor: pointer;
	font-weight: bold;
	color: orange
}
.scrollFrame .buttons li .hover{
	width:24px;
	height:24px;
	line-height: 24px;
	background: orange;
	color:white;
	margin-top:-2px;

}
</style>
</head>

<body>
<h2>JS轮播器</h2>

<div class="scrollFrame">
<div class="scrollContent" >
<img  src="1.jpg" alt="1"/>
<img  src="2.jpg" alt="1"/>
<img  src="3.jpg" alt="1"/>
<img  src="4.jpg" alt="1"/>
<img  src="5.jpg" alt="1"/>
</div>
<ul class="buttons">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>


</body>
</html>