jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例


Posted in Javascript onMarch 04, 2015

本文实例讲述了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jQuery仿淘宝带有指示条的图片转动切换结果</title>

<style type="text/css"> 

* {

 padding: 0;

 margin: 0

}

body {

 background-color: #EEE;

}

#slides {

 position:relative;

 width: 312px;

 margin: 0 auto

}

.slides_container {width:312px; height:145px}

.pagination {position:absolute; top:145px; left:0; width:312px; background-color: rgba(51, 51, 51, 0.5);

 -webkit-transform: translate3d(0, 0, 0);}

.pagination li {

 float: left;

 width: 104px;

 height: 3px;

 display: -webkit-box

}

.pagination li a {

 display: block;

 width: 104px;

 height: 3px;

 font-size: 0

}

.pagination li.current a {

 background-color: #FF4000

}

</style>

</head>

<body>

<div id="slides">

<div class="slides_container"> <a href="#" target="_blank"><img src="/images/m01.jpg" width="312" height="145" alt=""></a> <a href="#" target="_blank"><img src="/images/m02.jpg" width="312" height="145" alt=""></a> <a href="#" target="_blank"><img src="/images/m03.jpg" width="312" height="145" alt=""></a> </div>

</div>

<script src="js/jquery.min.js"></script>

<script> 

(function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery)

</script>

<script> 

//slide effect

$(function(){

 $('#slides').slides({

  preload: true,

  preloadImage: '/images/loading.gif',

  play: 5000,

  pause: 2500,

  hoverPause: true

 });

});

</script>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery参数列表集合
Apr 06 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
js获取和设置属性的方法
Feb 20 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
js观察者模式的弹幕案例
Nov 23 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 #Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 #Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 #Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 #Javascript
jQuery插件开发的五种形态小结
Mar 04 #Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 #Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 #Javascript
You might like
PHP 创建标签云函数代码
2010/05/26 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python文件比较示例分享
2014/01/10 Python
python实现百度关键词排名查询
2014/03/30 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python实现扫雷游戏
2020/03/03 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
Yahoo-PHP面试题2
2014/12/06 面试题
初中生个人学习的自我评价
2013/12/04 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
学生手册评语
2014/05/05 职场文书
安全负责人任命书
2014/06/06 职场文书
不错的求职信范文
2014/07/20 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2015试用期转正工作总结
2014/12/12 职场文书