xml地图|网站地图|网站标签 [设为首页] [加入收藏]

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

来源:http://www.ccidsi.com 作者:集成介绍 人气:185 发布时间:2019-09-13
摘要:本条放大镜的代码挺轻易滴效果也不利。 正文实例汇报了jQuery达成仿Taobao带有提醒条的图形转动切换效果的秘技。分享给大家供我们仿照效法。具体贯彻格局如下: 复制代码 代码如下

本条放大镜的代码挺轻易滴效果也不利。

正文实例汇报了jQuery达成仿Taobao带有提醒条的图形转动切换效果的秘技。分享给大家供我们仿照效法。具体贯彻格局如下:

复制代码 代码如下:

复制代码 代码如下:

<script>
//QQ:496928838 微凉
$(function(){
$("#demo").enlarge(
{
// 鼠标遮罩层样式
shadecolor: "#FFD24D",
shadeborder: "#FF8000",
shadeopacity: 0.4,
cursor: "move",

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery仿Tmall带有提醒条的图纸转动切换结果</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>

// 大图外层样式
layerwidth: 480,
layerheight: 360,
layerborder: "#DDD",
fade: true,

瞩望本文所述对我们的jQuery程序设计有着援助。

// 大图尺寸
largewidth: 960,
largeheight: 720
});
});

您也许感兴趣的小说:

  • 遗闻jquery达成人物头像跟随鼠标转动
  • jQuery达成转动随机数抽取奖金效果的情势
  • jQuery达成能够垄断图片旋转角度效果(附demo源码下载)
  • jquery达成可旋转可拖拽的文字效果代码
  • jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
  • 皇家网上娱乐,jQuery旋转木马式幻灯片轮播特效
  • jquery完成九宫格大转盘抽取奖品
  • jquery转盘抽取奖品成效落成
  • jQuery css3达成转动的纺锤形效果(附demo源码下载)

</script>

本文由68399皇家赌场发布于集成介绍,转载请注明出处:jQuery实现仿淘宝带有指示条的图片转动切换效果

关键词: 68399皇家赌场

最火资讯