一个jquery的slide，很有意思的说
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>JavaScript slider</title>
</head>
<body>
<style>
br {clear:both;}
.frame {
width:600px;
height:240px;
background-color:#CCC;
overflow:hidden;
}
.frame .list {
list-style:none;
padding:0;
margin:0;
width:10000px;
}
.frame .list li {
width:600px;
height:240px;
float:left;
}
.frame #big_list2 {
height:10000px;
}
.frame #big_list2 li {
clear:both;
}
.frame #big_list4 {
height:10000px;
}
.frame #big_list4 li {
clear:both;
}
.l_frame {
width:260px;
height:80px;
background-color:#CCC;
overflow:hidden;
float:left;
}
.l_frame .list {
list-style:none;
padding:0;
margin:0;
width:10000px;
}
.l_frame .list li {
float:left;
width:76px;
height:76px;
cursor:pointer;
border:solid 2px #cc3910;
}
.l_frame .list .cur {
border:solid 2px #0FF;
}
.l_frame2 {
height:208px;
width:80px;
background-color:#CCC;
overflow:hidden;
}
.l_frame2 .list {
list-style:none;
padding:0;
margin:0;
height:10000px;
}
.l_frame2 .list li {
width:76px;
height:76px;
cursor:pointer;
border:solid 2px #cc3910;
}
.l_frame2 .list .cur {
border:solid 2px #0FF;
}
.slide_nav {
height:80px;
width:16px;
display:block;
float:left;
background-color:#2A0;
text-indent:-10000px;
}
.slide_nav2 {
width:80px;
height:16px;
display:block;
background-color:#2A0;
text-indent:-10000px;
}
</style>
<h3>A、大图：向左轮转；小图：向左轮转</h3>
<div id="big_frame" class="frame">
<ul id="big_list" class="list">
<li style="background-color:#332f29;">aaaa</li>
<li style="background-color:#f1f2c0;">bb</li>
<li style="background-color:#ccc59e;">cc</li>
<li style="background-color:#8fa68e;">dd</li>
<li style="background-color:#cc3910;">eeee</li>
</ul>
</div>
<br />
<a id="back" class="slide_nav" href="#">left</a>
<div id="small_frame" class="l_frame">
<ul id="small_list" class="list">
<li class="cur" style="background-color:#332f29;">aaaa</li>
<li style="background-color:#f1f2c0;">bb</li>
<li style="background-color:#ccc59e;">cc</li>
<li style="background-color:#8fa68e;">dd</li>
<li style="background-color:#cc3910;">eeee</li>
</ul>
</div>
<a id="forward" class="slide_nav" href="#">right</a>
<br />
<br />
<br />
<br />
<h3>B、大图：向上轮转；小图：向左轮转</h3>
<div id="big_frame2" class="frame">
<ul id="big_list2" class="list">
<li style="background-color:#d57d50;">aaaa</li>
<li style="background-color:#cc3910;">bb</li>
<li style="background-color:#f1f2c0;">cc</li>
<li style="background-color:#ccc59e;">dd</li>
<li style="background-color:#8fa68e;">eeee</li>
<li style="background-color:#332f29;">FFF</li>
</ul>
</div>
<br />
<a id="back2" class="slide_nav" href="#">a</a>
<div id="small_frame2" class="l_frame">
<ul id="small_list2" class="list">
<li class="cur" style="background-color:#d57d50;">aaaa</li>
<li style="background-color:#cc3910;">bb</li>
<li style="background-color:#f1f2c0;">cc</li>
<li style="background-color:#ccc59e;">dd</li>
<li style="background-color:#8fa68e;">eeee</li>
<li style="background-color:#332f29;">FFF</li>
</ul>
</div>
<a id="forward2" class="slide_nav" href="#">b</a>
<br />
<br />
<br />
<br />
<h3>C、大图：向左轮转；小图：向上轮转</h3>
<div style="float:left;">
<div id="big_frame3" class="frame">
<ul id="big_list3" class="list">
<li style="background-color:#d57d50;">aaaa</li>
<li style="background-color:#cc3910;">bb</li>
<li style="background-color:#f1f2c0;">cc</li>
<li style="background-color:#ccc59e;">dd</li>
<li style="background-color:#8fa68e;">eeee</li>
<li style="background-color:#332f29;">FFF</li>
</ul>
</div>
</div>
<div style="float:left; margin:0 0 0 8px;">
<a id="back3" class="slide_nav2" href="#">a</a>
<div id="small_frame3" class="l_frame2">
<ul id="small_list3" class="list">
<li class="cur" style="background-color:#d57d50;">aaaa</li>
<li style="background-color:#cc3910;">bb</li>
<li style="background-color:#f1f2c0;">cc</li>
<li style="background-color:#ccc59e;">dd</li>
<li style="background-color:#8fa68e;">eeee</li>
<li style="background-color:#332f29;">FFF</li>
</ul>
</div>
<a id="forward3" class="slide_nav2" href="#">b</a>
</div>
<br />
<br />
<br />
<br />
<h3>D、大图：向上轮转；小图：向上轮转</h3>
<div style="float:left;">
<div id="big_frame4" class="frame">
<ul id="big_list4" class="list">
<li style="background-color:#d57d50;">aaaa</li>
<li style="background-color:#cc3910;">bb</li>
<li style="background-color:#f1f2c0;">cc</li>
<li style="background-color:#ccc59e;">dd</li>
<li style="background-color:#8fa68e;">eeee</li>
<li style="background-color:#332f29;">FFF</li>
</ul>
</div>
</div>
<div style="float:left; margin:0 0 0 8px;">
<a id="back4" class="slide_nav2" href="#">a</a>
<div id="small_frame4" class="l_frame2">
<ul id="small_list4" class="list">
<li class="cur" style="background-color:#d57d50;">aaaa</li>
<li style="background-color:#cc3910;">bb</li>
<li style="background-color:#f1f2c0;">cc</li>
<li style="background-color:#ccc59e;">dd</li>
<li style="background-color:#8fa68e;">eeee</li>
<li style="background-color:#332f29;">FFF</li>
</ul>
</div>
<a id="forward4" class="slide_nav2" href="#">b</a>
</div>
<br />
<br />
<br />
<br />
</body>
</html>
<script type="text/javascript">
//初始化
function C_slider(frame,list,Lframe,Llist,forwardEle,backEle,scrollType,LscrollType,acitonType,autoInterval){
this.frame = frame;
this.list = list;
this.Lframe = Lframe;
this.Llist = Llist;
this.forwardEle = forwardEle;
this.backEle = backEle;
this.scrollType = scrollType;
this.LscrollType = LscrollType;
this.acitonType = acitonType;
this.autoInterval = autoInterval;
this.slideLength = $("#"+this.Llist+" > li").length;//总的slider数量
this.currentSlide = 0;
this.FrameHeight = $("#"+this.frame).height();
this.FrameWidth = $("#"+this.frame).width();
this.lFrameHeight = $("#"+this.Lframe).height();
this.lFrameWidth = $("#"+this.Lframe).width();
this.lListHeight = $("#"+this.Llist+" >li").eq(0).outerHeight(true);
this.lListWidth = $("#"+this.Llist+" >li").eq(0).outerWidth(true);
var self = this;
for(var i = 0; i<this.slideLength; i++) {
$("#"+this.Llist+" > li").eq(i).data("index",i);
$("#"+this.Llist+" > li").eq(i).bind(this.acitonType,function(){
self.go($(this).data("index"));
});
};
//给“上一个”、“下一个”按钮添加动作
$("#"+this.forwardEle).bind('click',function(){
self.forward();
return false;
});
$("#"+this.backEle).bind('click',function(){
self.back();
return false;
});
//定论鼠标划过时，自动轮换的处理
$("#"+this.frame+",#"+this.Lframe+",#"+this.forwardEle+",#"+this.backEle).bind('mouseover',function(){
clearTimeout(self.autoExt);
});
$("#"+this.frame+",#"+this.Lframe+",#"+this.forwardEle+",#"+this.backEle).bind('mouseout',function(){
clearTimeout(self.autoExt);
self.autoExt = setTimeout(function(){
self.extInterval();
},self.autoInterval);
});
//开始自动轮换
this.autoExt = setTimeout(function(){
self.extInterval();
},this.autoInterval);
}
//执行运动
C_slider.prototype.go = function(index){
this.currentSlide = index;
if (this.scrollType == "left"){
$("#"+this.list).animate({
marginLeft: (-index*this.FrameWidth)+"px"
}, {duration:600,queue:false});
} else if (this.scrollType == "top"){
$("#"+this.list).animate({
marginTop: (-index*this.FrameHeight)+"px"
}, {duration:600,queue:false});
}
$("#"+this.Llist+" > li").removeClass("cur");
$("#"+this.Llist+" > li").eq(index).addClass("cur");
//对于缩略图的滚动处理
if(this.LscrollType == "left"){
if(this.slideLength*this.lListWidth > this.lFrameWidth){
var spaceWidth = (this.lFrameWidth - this.lListWidth)/2;
var hiddenSpace = this.lListWidth*this.currentSlide - spaceWidth;
if (hiddenSpace > 0){
if(hiddenSpace+this.lFrameWidth <= this.slideLength*this.lListWidth){
$("#"+this.Llist).animate({
marginLeft: -hiddenSpace+"px"
}, {duration:600,queue:false});
} else {
var endHidden = this.slideLength*this.lListWidth - this.lFrameWidth;
$("#"+this.Llist).animate({
marginLeft: -endHidden+"px"
}, {duration:600,queue:false});
}
} else {
$("#"+this.Llist).animate({
marginLeft: "0px"
}, {duration:600,queue:false});
}
}
} else if (this.LscrollType == "top"){
if(this.slideLength*this.lListHeight > this.lFrameHeight){
var spaceHeight = (this.lFrameHeight - this.lListHeight)/2;
var hiddenSpace = this.lListHeight*this.currentSlide - spaceHeight;
if (hiddenSpace > 0){
if(hiddenSpace+this.lFrameHeight <= this.slideLength*this.lListHeight){
$("#"+this.Llist).animate({
marginTop: -hiddenSpace+"px"
}, {duration:600,queue:false});
} else {
var endHidden = this.slideLength*this.lListHeight - this.lFrameHeight;
$("#"+this.Llist).animate({
marginTop: -endHidden+"px"
}, {duration:600,queue:false});
}
} else {
$("#"+this.Llist).animate({
marginTop: "0px"
}, {duration:600,queue:false});
}
}
}
}
//前进
C_slider.prototype.forward = function(){
if(this.currentSlide<this.slideLength-1){
this.currentSlide += 1;
this.go(this.currentSlide);
}else {
this.currentSlide = 0;
this.go(0);
}
}
//后退
C_slider.prototype.back = function(){
if(this.currentSlide>0){
this.currentSlide -= 1;
this.go(this.currentSlide);
}else {
this.currentSlide = this.slideLength-1;
this.go(this.slideLength-1);
}
}
//自动执行
C_slider.prototype.extInterval = function(){
if(this.currentSlide<this.slideLength-1){
this.currentSlide += 1;
this.go(this.currentSlide);
}else {
this.currentSlide = 0;
this.go(0);
}
var self = this;
this.autoExt = setTimeout(function(){
self.extInterval();
},this.autoInterval);
}
//实例化对象
var goSlide1 = new C_slider("big_frame","big_list","small_frame","small_list","forward","back","left","left","click",3000);
var goSlide2 = new C_slider("big_frame2","big_list2","small_frame2","small_list2","forward2","back2","top","left","click",5000);
var goSlide3 = new C_slider("big_frame3","big_list3","small_frame3","small_list3","forward3","back3","left","top","click",3000);
var goSlide4 = new C_slider("big_frame4","big_list4","small_frame4","small_list4","forward4","back4","top","top","click",2000);
</script>
posted on 2011-04-07 13:48 asprogramer 阅读(2893) 评论(0) 收藏 举报
浙公网安备 33010602011771号