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 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
怎样在vue项目下添加ESLint的方法
May 16 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抽象类 介绍
2012/06/13 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
php对象工厂类完整示例
2018/08/09 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
require.js中的define函数详解
2017/07/10 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python flask搭建web应用教程
2019/11/19 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python MD5加密的示例
2020/10/19 Python
python音频处理的示例详解
2020/12/23 Python
幼师自荐信范文
2013/10/06 职场文书
大一学生假期实习的自我评价
2013/10/12 职场文书
面试后的英文感谢信
2014/02/01 职场文书
党支部换届选举方案
2014/05/08 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
Python语言中的数据类型-序列
2022/02/24 Python
Redis实现订单过期删除的方法步骤
2022/06/05 Redis