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

作者: 王中王开奖结果计算机  发布:2019-09-06

正文实例陈述了jQuery落成仿天猫商城带有提示条的图样转动切换效果的艺术。分享给大家供大家参照他事他说加以考察。具体实现情势如下:

功用预览图片:
图片 1
大家能够下载demo看完整意义,上边介绍制作过程。
  1.首先成立三个html页面,html结构如下:

复制代码 代码如下:

复制代码 代码如下:

<!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>

<div id="slider">
<div id="viewer">
<img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" />
<img id="image2" src="img/atari.jpg" alt="Atari TT030" />
<img id="image3" src="img/commodore16.jpg" alt="Commodore 64" />
<img id="image4" src="img/commodore128.jpg" alt="Commodore 128" />
<img id="image5" src="img/spectrum.jpg" alt="Sinclair ZX Spectrum +2" />
</div>
<ul id="ui">
<li class="hidden" id="prev"><a href="" title="Previous">«</a></li>
<li><a href="#image1" title="Image 1" class="active">Image 1</a></li>
<li><a href="#image2" title="Image 2">Image 2</a></li>
<li><a href="#image3" title="Image 3">Image 3</a></li>
<li><a href="#image4" title="Image 4">Image 4</a></li>
<li><a href="#image5" title="Image 5">Image 5</a></li>
<li class="hidden" id="next"><a href="" title="Next">»</a></li>
</ul>
</div>

瞩望本文所述对大家的jQuery程序设计有着帮忙。

我们一看就精晓,viewer包含了几张图纸,ul对象里面含有了‘上一条'、‘下一条'和各种图片对应的领航。
2.接下来须求为这么些html成分设置css样式,css笔者就十分少说了,正是给viewer、图片等因素加样式,viewer同期只可以呈现一张图纸:

您也许感兴趣的篇章:

  • 依据jquery达成人物头像跟随鼠标转动
  • jQuery实现转动随机数抽取奖品效果的措施
  • jQuery完毕能够决定图片旋转角度效果(附demo源码下载)
  • jquery实现可旋转可拖拽的文字效果代码
  • jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
  • jQuery旋转木马式幻灯片轮播特效
  • jquery完成九宫格大转盘抽取奖品
  • jquery转盘抽取奖金功用完结
  • jQuery+css3达成转动的圆锥形效果(附demo源码下载)

复制代码 代码如下:

#slider
{
width: 500px;
position: relative;
}
#viewer
{
width: 400px;
height: 300px;
margin: auto;
position: relative;
overflow: hidden;
}
#slider ul
{
width: 350px;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
#slider ul:after
{
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#slider li
{
margin-right: 10px;
float: left;
}
#prev, #next
{
position: absolute;
top: 175px;
}
#prev
{
left: 20px;
}
#next
{
position: absolute;
right: 10px;
}
.hidden
{
display: none;
}
#slide
{
width: 2000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
#slide img
{
float: left;
width: 400px;
height: 300px;
}
#title
{
margin: 0;
text-align: center;
}

3.为页面加多jquery和jquery.easing.1.3.js的援引。然后便是我们那篇的重头了,为导航编写相应的js事件。
  首先大家须要成立二个新的div来包装5张图纸。

复制代码 代码如下:

$('#viewer').wrapInner('<div id="slide"></div>');  

接下去大家利用jquery的selector找到slider,slide,prev,next等对象,把她们存到相应的js变量中。

复制代码 代码如下:

var container = $('#slider'),
prev = container.find('#prev'),
prevChild = prev.find('a'),
next = container.find('#next').removeClass('hidden'),
nextChild = next.find('a'),
slide = container.find('#slide')

创建七个新的js变量,key保存当前运动图片id,details保存全数图片分其余position和title音信。

复制代码 代码如下:

key = "image1",
details = {
image1: {
position: 0,
title: slide.children().eq(0).attr('alt')
},
image2: {
position: -400,
title: slide.children().eq(1).attr('alt')
},
image3: {
position: -800,
title: slide.children().eq(2).attr('alt')
},
image4: {
position: -1200,
title: slide.children().eq(3).attr('alt')
},
image5: {
position: -1600,
title: slide.children().eq(4).attr('alt')
}
};

为了体现图片标题,我们需求丰硕二个h2题目到页面。

复制代码 代码如下:

$('<h2>', {
  id: 'title',
  text: details[key].title
}).prependTo('#slider');   

上述工作做到后,就可以起先为a标签增添click事件了,这里的a标签分三种,一种是‘上一条'和‘下一条',别的一种是各图片对应的导航。大家要求各自为他们增添相应的click事件。可是他们都会动用到三个长久以来的回调函数,大家先成功回调函数的编写制定。代码思路作者就直接以注释的不二秘技变成。

复制代码 代码如下:

function postAnim(dir) {
  //首先我们取获得当前运动图片的id,只包罗数字有的
var keyMath = parseInt(key.match(/d+$/));
  //slide的left小于0,也正是说当前活动图片不是图形1,‘上一条'导航显示;不然‘上一条'导航消失
(parseInt(slide.css('left')) < 0) ? prev.show() : prev.hide();
  //slide的left等于-1600,也等于说当前移动图片是第五章,‘下一条'导航消失,不然‘下一条'导航彰显
(parseInt(slide.css('left')) === -1600) ? next.hide() : next.show();
  
  //if条件语句当使用‘上一条'和‘下一条'导航时才有意义。达成的效果便是点‘上一条'是key减一,点‘下一条'key加1
if (dir) {
var titleKey = (dir === 'back') ? keyMath - 1 : keyMath + 1;
key = 'image' + titleKey;
}
  //复位h2标题
container.find('#title').text(details[key].title);
  //复位当前哪位图片为活动状态
container.find('.active').removeClass('active');
container.find('a[href=#' + key + ']').addClass('active');
}

接下去大家做到‘上一条'和‘下一条'导航的效用。

复制代码 代码如下:

nextChild.add(prevChild).click(function (e) {
//阻止暗许事件,不然动画效果就从未有过了
  e.preventDefault();
var arrow = $(this).parent();
  //当前slide未有动画时,我们才加多新的卡通效果
  if (!slide.is(':animated')) {
slide.animate({
left: (arrow.attr('id') === 'prev') ? '+=400' : '-=400'
}, 'slow', 'easeOutBack', function () {
(arrow.attr("id") === "prev") ? postAnim("back") : postAnim("forward");
});
}
});

终极是图表对应的各自导航的机能实现。

复制代码 代码如下:

$('#ui li a').not(prevChild).not(nextChild).click(function (e) {
//阻止私下认可事件
  e.preventDefault();
  //获取当前移动图片id
key = $(this).attr('href').split('#')[1];
//设置动画效果
  slide.animate({
left: details[key].position
}, 'slow', 'easeOutBack', postAnim);
});

本课的内容完成了,大家能够下载demo,查看作用具体是之类完结的。

  demo下载地址:jQuery.animation.position

你或然感兴趣的稿子:

  • jquery用offset()方法赢得成分的xy坐标
  • jquery中获取成分尺寸和坐标的格局整理
  • jQuery得到页面成分的相对/相对地点即相对X,Y坐标
  • jquery获得页面成分的坐标值达成思路及代码
  • jQuery获得钦命成分坐标的主意

本文由王中王开奖结果发布于王中王开奖结果计算机,转载请注明出处:jQuery实现仿淘宝带有指示条的图片转动切换效果

关键词:

上一篇:JavaScript函数详解,深入理解JavaScript系列
下一篇:没有了