地图		广告招租 ←—
订阅
投稿

您的位置：网站首页 > 特效代码 > 网页图片特效 > 正文：jQuery图片幻灯片插件，多种形式的图片切换效果

jQuery图片幻灯片插件，多种形式的图片切换效果

日期：2011-12-29 8:57:00 标签：图片特效图片切换切换效果 jQuery 插件幻灯片

∷ PC蛋蛋赚积分换Q币！>>>更多礼品兑换

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="/images/jquery-1.4.2.min.js"></script>
<title>jQuery图片幻灯片插件，多种形式的图片切换效果丨芯晴网页特效丨CsrCode.Cn</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>
第一次运行本代码，请刷新一下页面先~~~        所需js文件：<a href="/images/jquery-1.4.2.min.js">jquery-1.4.2.min.js</a>
<h3>A、大图：向左轮转；小图：向左轮转</h3>
<div id="big_frame" class="frame">
 <ul id="big_list" class="list">
  <li style="background-color:#332f29;"><img src="/images/m01.jpg" width="600px" height="240px"></li>
  <li style="background-color:#f1f2c0;"><img src="/images/m02.jpg" width="600px" height="240px"></li>
  <li style="background-color:#ccc59e;"><img src="/images/m03.jpg" width="600px" height="240px"></li>
  <li style="background-color:#8fa68e;"><img src="/images/m04.jpg" width="600px" height="240px"></li>
  <li style="background-color:#cc3910;"><img src="/images/m05.jpg" width="600px" height="240px"></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;"><img src="/images/s1.jpg"></li>
  <li style="background-color:#f1f2c0;"><img src="/images/s2.jpg"></li>
  <li style="background-color:#ccc59e;"><img src="/images/s3.jpg"></li>
  <li style="background-color:#8fa68e;"><img src="/images/s4.jpg"></li>
  <li style="background-color:#cc3910;"><img src="/images/s5.jpg"></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><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>
<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>

提示：您可以先修改代码后再运行，复制和保存代码功能在Firefox下无效。

（本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.）
（本文由 CsrCode.CN|芯晴网页特效收集丨www.CsrCode.cn）

本文网址：

上一篇：jQuery+CSS+JS打造的漂亮的图片缩放展示效果

下一篇：jQuery+JS+CSS实现的弹出层

评论信息

抱歉，本文暂停评论留言。

栏目分类

·菜单导航特效
·图层样式特效
·链接文本特效
·网页图片特效
·日期时间特效
·页面窗口特效
·鼠标特效代码
·网页背景特效
·表格表单特效
·状态栏特效
·页面搜索特效
·其他特效代码

热门排行

一款常用的漂亮的JS图片滑动…
jQuery 循环图片滚动切换效果…
JS实现伪3D轮播图片幻灯片切…
一款可控制切换的图片幻灯切…
JS横向带停顿的图片滚动特效…
JS图片滤镜焦点图片自动切换…
JS模拟FLASH幻灯片图片切换效…
JS+CSS打造的非常漂亮的图片…
一款兼容所有浏览器的js图片…
JS实现的图片横向滚动展示效…

推荐信息

[荐] JS水纹切片特效的多幅图…
超炫的图片模糊切换效果
CSS实现感应鼠标的图片预览效…
CSS滤镜实现的各种图片淡入效…
点击图片弹出提示层显示图片…
JS+CSS打造flash弹性效果的图…
一个小按钮使图片和相应文字…
【经典相册】带缩略图的图片…
将图片固定在页面左上角，还…
仿土豆网带缩略图的焦点图片…