`

淘宝首页图片切换

 
阅读更多

淘宝首页的图片切换实现：

 

 写道
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>slide.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{font-size:12px;}
.scontainer{width:490px;height:170px;float:left;overflow: hidden;}
.scontainer .container{width:100%;height:100%;float:left;position: relative;}
.scontainer .container .pic{float:left;list-style: none;height:850px;width:100%;margin:0 0;padding:0 0;position: absolute;}
.scontainer .container .pic li{float:left;height:170px;width:100%;}
.scontainer .container .sclick{position: absolute;list-style: none;bottom: 5px;right: 5px;margin:0 0;padding:0 0;}
.scontainer .container .sclick li{float:left;width:20px;height:20px;line-height: 20px;text-align: center;background: #fff;margin: 0 2px 0 0;opacity:0.7;color: #DE7D4B;font-size:13px;cursor: pointer;}
.scontainer .container .sclick li.hover{background: #FF6600;color: #fff;}
</style>

<script type="text/javascript">
window.onload=function(){
var btnsUl=getByClass("sclick")[0],
btns=btnsUl.getElementsByTagName("li"),
imgsUl=getByClass("pic")[0];
var sp=new SwitchPic(btns,imgsUl,170,1000);

}
var SwitchPic=function(buttons,picContainer,imgHeight,intvalTime,hoverClass){
this.buttons=buttons;
this.picContainer=picContainer;
this.intvalTime=intvalTime || 3000;
this.hoverClass=hoverClass || "hover";
this.imgHeight=imgHeight;
this.curIndex=-1;

this.start();
this.invoke(0);

for(var i=0;i<this.buttons.length;i++){
var btn=this.buttons[i];
var _this=this;
(function(i){
btn.onmouseover=function(){
_this.stop();
_this.invoke(i);

}
btn.onmouseout=function(){
_this.start();
}
})(i)
}
}
//方法扩展
SwitchPic.prototype={
start:function(){//开始切换
var _this=this;
this.stop();
this.intval=setInterval(function(){
var nextIndex=_this.next();
_this.invoke(nextIndex);
},this.intvalTime);
},
next:function(){
var nextIndex=(this.curIndex+1)<this.buttons.length ? (this.curIndex+1) : 0 ;
return nextIndex;
},
stop:function(){
clearInterval(this.intval);
},
invoke:function(itemIndex){
this.picContainer.style.top=(-this.imgHeight*itemIndex)+"px";
var btn=this.buttons[itemIndex];
this.removeClass();
btn.className=this.hoverClass;
this.curIndex=itemIndex;
},
removeClass:function(){
for(var i=0;i<this.buttons.length;i++){
this.buttons[i].className="";
}
}
};

function getByClass(className){
if(document.getElementByClassName){
return document.getElementByClassName(className);
}

var nodes=document.getElementsByTagName("*");
var arr=[];
for(var i=0;i<nodes.length;i++){
var curNode=nodes[i];
if(hasClass(className,curNode)){
arr.push(curNode);
}
}
return arr;
}

function hasClass(className,obj){
var names=obj.className.split(/\s+/);
for(var i=0;i<names.length;i++){
if(names[i]==className){
return true;
}
}
return false;
}

</script>
</head>

<body>
<div class="scontainer">
<div class="container">
<ul class="pic">
<li><a href="###"><img src="http://img01.taobaocdn.com/tps/i1/T1k.WIXltgXXXXXXXX-490-170.png"/></a></li>
<li><a href="###"><img src="http://i.mmcdn.cn/simba/img/T1QqCGXcJxXXXXXXXX.jpg?noq=y"/></a></li>
<li><a href="###"><img src="http://i.mmcdn.cn/simba/img/T1OBiIXcFlXXXXXXXX.jpg?noq=y"/></a></li>
<li><a href="###"><img src="http://img.alimama.cn/adbrand/adboard/picture/2011-03-01/119159330001110301225330.jpg"/></a></li>
<li><a href="###"><img src="http://img03.taobaocdn.com/tps/i3/T1wbOIXXViXXXXXXXX-490-170.png"/></a></li>
</ul>
<ul class="sclick">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
</ul>
</div>
</div>
</body>
</html>
 
分享到：
| jquery tab切换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics