地图
广告
招租
←—
订阅
投稿
网站首页
特效代码
素材资源
seo优化
网络营销
网站建设
免费空间
工具软件
您的位置:
网站首页
>
特效代码
>
网页图片特效
> 正文:
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弹性效果的图…
一个小按钮使图片和相应文字…
【经典相册】带缩略图的图片…
将图片固定在页面左上角,还…
仿土豆网带缩略图的焦点图片…
相关信息
网站优化是不是等于搜索引擎…
CSS+jQuery版实用的图片放大…
背景不停变换颜色
目录式导航菜单
页面上浮动飞舞的xml动画效果…
JS实现网页顶部会自动收缩的…
芯晴网页特效
:
菜单导航特效
图形图像特效
图层样式特效
链接文本特效
日期时间特效
页面窗口特效
网页背景特效
鼠标特效代码
表格表单特效
状态栏特效
搜索特效
其他特效
网站首页
丨
网站地图
© Copyright 2009
CsrCode
-
芯晴网页特效
丨备案号:
浙ICP备15010075号-2
Alex排名
页面执行时间3.4219 s