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 放大镜 放大倍率和视窗尺寸
May 09 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 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中如何防止表单的重复提交
2013/08/02 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php生成验证码函数
2015/10/20 PHP
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
javascript验证身份证号
2015/03/03 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
Python实现字典依据value排序
2016/02/24 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Python实现对adb命令封装
2020/03/06 Python
python属于解释语言吗
2020/06/11 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
培训科主任岗位职责
2014/08/08 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
年终工作总结范文
2019/06/20 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书