[经验分享] jQuery的slide show图片切换，代码精简功能多

奇

671 主题	1 听众	3247 积分

中级设计师

Rank: 5 Rank: 5

纳金币: 324742
精华: 0

电梯直达

楼主

发表于 2011-12-30 19:22:41 |只看该作者 |倒序浏览

分享一个代码简洁的Jquery slide show 图片切换，网上有很多基于Jquery的slide show，效果很漂亮、功能也很全，但是如果要应用某种效果，就非得导入某个插件，而这些文件通常都不会太小，为个一个slide show就导入一个文件，觉得有点不值，所以自己写了一个，分享出来，有用到的同学可以拿过去用用。
　　发现问题的同学请随便嘀咕一下，只言片语也是对我的帮助，谢谢.....
　　烈火提示：代码中为了演示方便，没有使用图片，如果您打算用于图片切换，可自行修改。
　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示
　　网页演示：猛击此处
　　运行演示：
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script type="text/javascript" src="/uploads/common/js/jquery-1.3.2.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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>

文章源自：烈火网，原文：http://www.veryhuo.com/a/view/29483.html