码迷,mamicode.com
首页 > 其他好文 > 详细

jq图片切换特效

时间:2014-08-22 19:25:29      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   color   os   io   strong   for   ar   

首先引入js,内容如下:

 1 (function($){$.fn.slides=function(option){option=$.extend({},$.fn.slides.option,option);return this.each(function(){$(‘.‘+option.container,$(this)).children().wrapAll(‘<div class="slides_control"/>‘);var elem=$(this),control=$(‘.slides_control‘,elem),total=control.children().size(),width=control.children().outerWidth(),height=control.children().outerHeight(),start=option.start-1,effect=option.effect.indexOf(‘,‘)<0?option.effect:option.effect.replace(‘ ‘,‘‘).split(‘,‘)[0],paginationEffect=option.effect.indexOf(‘,‘)<0?effect:option.effect.replace(‘ ‘,‘‘).split(‘,‘)[1],next=0,prev=0,number=0,current=0,loaded,active,clicked,position,direction;if(total<2){return;}
 2 if(start<0){start=0;};if(start>total){start=total-1;};if(option.start){current=start;};if(option.randomize){control.randomize();}
 3 $(‘.‘+option.container,elem).css({overflow:‘hidden‘,position:‘relative‘});control.css({position:‘relative‘,width:(width*3),height:height,left:-width});control.children().css({position:‘absolute‘,top:0,left:width,zIndex:0,display:‘none‘});if(option.autoHeight){control.animate({height:control.children(‘:eq(‘+start+‘)‘).outerHeight()},option.autoHeightSpeed);}
 4 if(option.preload&&control.children()[0].tagName==‘IMG‘){elem.css({background:‘url(‘+option.preloadImage+‘) no-repeat 50% 50%‘});var img=$(‘img:eq(‘+start+‘)‘,elem).attr(‘src‘)+‘?‘+(new Date()).getTime();$(‘img:eq(‘+start+‘)‘,elem).attr(‘src‘,img).load(function(){$(this).fadeIn(option.fadeSpeed,function(){$(this).css({zIndex:5});elem.css({background:‘‘});loaded=true;});});}else{control.children(‘:eq(‘+start+‘)‘).fadeIn(option.fadeSpeed,function(){loaded=true;});}
 5 if(option.bigTarget){control.children().css({cursor:‘pointer‘});control.children().click(function(){animate(‘next‘,effect);return false;});}
 6 if(option.hoverPause&&option.play){control.children().bind(‘mouseover‘,function(){stop();});control.children().bind(‘mouseleave‘,function(){pause();});}
 7 if(option.generateNextPrev){$(‘.‘+option.container,elem).after(‘<a href="#" class="‘+option.prev+‘">Prev</a>‘);$(‘.‘+option.prev,elem).after(‘<a href="#" class="‘+option.next+‘">Next</a>‘);}
 8 $(‘.‘+option.next,elem).click(function(e){e.preventDefault();if(option.play){pause();};animate(‘next‘,effect);});$(‘.‘+option.prev,elem).click(function(e){e.preventDefault();if(option.play){pause();};animate(‘prev‘,effect);});if(option.generatePagination){elem.append(‘<ul class=‘+option.paginationClass+‘></ul>‘);control.children().each(function(){$(‘.‘+option.paginationClass,elem).append(‘<li><a rel=‘+number+‘ href="#">‘+(number+1)+‘</a></li>‘);number++;});}else{$(‘.‘+option.paginationClass+‘ li a‘,elem).each(function(){$(this).attr(‘rel‘,number);number++;});}
 9 $(‘.‘+option.paginationClass+‘ li a:eq(‘+start+‘)‘,elem).parent().addClass(‘current‘);$(‘.‘+option.paginationClass+‘ li a‘,elem).click(function(){if(option.play){pause();};clicked=$(this).attr(‘rel‘);if(current!=clicked){animate(‘pagination‘,paginationEffect,clicked);}
10 return false;});if(option.play){playInterval=setInterval(function(){animate(‘next‘,effect);},option.play);elem.data(‘interval‘,playInterval);};function stop(){clearInterval(elem.data(‘interval‘));};function pause(){if(option.pause){clearTimeout(elem.data(‘pause‘));clearInterval(elem.data(‘interval‘));pauseTimeout=setTimeout(function(){clearTimeout(elem.data(‘pause‘));playInterval=setInterval(function(){animate("next",effect);},option.play);elem.data(‘interval‘,playInterval);},option.pause);elem.data(‘pause‘,pauseTimeout);}else{stop();}};function animate(direction,effect,clicked){if(!active&&loaded){active=true;switch(direction){case‘next‘:prev=current;next=current+1;next=total===next?0:next;position=width*2;direction=-width*2;current=next;break;case‘prev‘:prev=current;next=current-1;next=next===-1?total-1:next;position=0;direction=0;current=next;break;case‘pagination‘:next=parseInt(clicked,10);prev=$(‘.‘+option.paginationClass+‘ li.current a‘,elem).attr(‘rel‘);if(next>prev){position=width*2;direction=-width*2;}else{position=0;direction=0;}
11 current=next;break;}
12 if(effect===‘fade‘){option.animationStart();if(option.crossfade){control.children(‘:eq(‘+next+‘)‘,elem).css({zIndex:10}).fadeIn(option.fadeSpeed,function(){control.children(‘:eq(‘+prev+‘)‘,elem).css({display:‘none‘,zIndex:0});$(this).css({zIndex:0});option.animationComplete(next+1);active=false;});}else{option.animationStart();control.children(‘:eq(‘+prev+‘)‘,elem).fadeOut(option.fadeSpeed,function(){if(option.autoHeight){control.animate({height:control.children(‘:eq(‘+next+‘)‘,elem).outerHeight()},option.autoHeightSpeed,function(){control.children(‘:eq(‘+next+‘)‘,elem).fadeIn(option.fadeSpeed);});}else{control.children(‘:eq(‘+next+‘)‘,elem).fadeIn(option.fadeSpeed,function(){if($.browser.msie){$(this).get(0).style.removeAttribute(‘filter‘);}});}
13 option.animationComplete(next+1);active=false;});}}else{control.children(‘:eq(‘+next+‘)‘).css({left:position,display:‘block‘});if(option.autoHeight){option.animationStart();control.animate({left:direction,height:control.children(‘:eq(‘+next+‘)‘).outerHeight()},option.slideSpeed,function(){control.css({left:-width});control.children(‘:eq(‘+next+‘)‘).css({left:width,zIndex:5});control.children(‘:eq(‘+prev+‘)‘).css({left:width,display:‘none‘,zIndex:0});option.animationComplete(next+1);active=false;});}else{option.animationStart();control.animate({left:direction},option.slideSpeed,function(){control.css({left:-width});control.children(‘:eq(‘+next+‘)‘).css({left:width,zIndex:5});control.children(‘:eq(‘+prev+‘)‘).css({left:width,display:‘none‘,zIndex:0});option.animationComplete(next+1);active=false;});}}
14 if(option.pagination){$(‘.‘+option.paginationClass+‘ li.current‘,elem).removeClass(‘current‘);$(‘.‘+option.paginationClass+‘ li a:eq(‘+next+‘)‘,elem).parent().addClass(‘current‘);}}};});};$.fn.slides.option={preload:false,preloadImage:‘/img/loading.gif‘,container:‘slides_container‘,generateNextPrev:false,next:‘next‘,prev:‘prev‘,pagination:true,generatePagination:true,paginationClass:‘pagination‘,fadeSpeed:350,slideSpeed:350,start:1,effect:‘slide‘,crossfade:false,randomize:false,play:0,pause:0,hoverPause:false,autoHeight:false,autoHeightSpeed:350,bigTarget:false,animationStart:function(){},animationComplete:function(){}};$.fn.randomize=function(callback){function randomizeOrder(){return(Math.round(Math.random())-0.5);}
15 return($(this).each(function(){var $this=$(this);var $children=$this.children();var childCount=$children.length;if(childCount>1){$children.hide();var indices=[];for(i=0;i<childCount;i++){indices[indices.length]=i;}
16 indices=indices.sort(randomizeOrder);$.each(indices,function(j,k){var $child=$children.eq(k);var $clone=$child.clone(true);$clone.show().appendTo($this);if(callback!==undefined){callback($child,$clone);}
17 $child.remove();});}}));};})(jQuery);

其次html代码:

 1 <div id="container-img">
 2         <div id="example">
 3             
 4             <div id="slides">
 5             <div class="info" title=""></div>
 6                 <div class="slides_container">
 7                     <a href="" title="" ><img src="__ROOT__/Public/showimages/img/slide-1.jpg" width="570" height="270" alt="1"></a>
 8                     <a href="" title="" ><img src="__ROOT__/Public/showimages/img/slide-2.jpg" width="570" height="270" alt="2"></a>
 9                     <a href="" title="" ><img src="__ROOT__/Public/showimages/img/slide-3.jpg" width="570" height="270" alt="3"></a>
10                     <a href="" title="" ><img src="__ROOT__/Public/showimages/img/slide-4.jpg" width="570" height="270" alt="4"></a>
11                     <a href="" title="" ><img src="__ROOT__/Public/showimages/img/slide-5.jpg" width="570" height="270" alt="5"></a>
12                 </div>
13                 <a href="#" class="prev"><img src="__ROOT__/Public/showimages/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
14                 <a href="#" class="next"><img src="__ROOT__/Public/showimages/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
15             </div>
16             

然后上css:

  1 /* 
  2     Resets defualt browser settings
  3     reset.css
  4 */
  5 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
  6 :focus { outline:0; }
  7 a:active { outline:none; }
  8 body {font-family: ‘微软雅黑‘; font-size: 14px;}
  9 ol,ul { list-style:none; }
 10 table { border-collapse:separate; border-spacing:0; }
 11 caption,th,td { text-align:left; font-weight:normal; }
 12 blockquote:before,blockquote:after,q:before,q:after { content:""; }
 13 blockquote,q { quotes:"" ""; }
 14 
 15 
 16 #container {
 17     width:400px;
 18     padding:0px;
 19     margin:0 auto;
 20     position:relative;
 21     z-index:0;
 22 }
 23 
 24 #example {
 25     width:400px;
 26     height:270px;
 27     position:relative;
 28 }
 29 
 30 #ribbon {
 31     position:absolute;
 32     top:-3px;
 33     left:-3px;
 34     z-index:500;
 35 }
 36 
 37 #frame {
 38     position:absolute;
 39     z-index:0;
 40     width:450px;
 41     height:341px;
 42     top:-3px;
 43     left:00px;
 44 }
 45 
 46 #slides {
 47     position:absolute;
 48     top:0px;
 49     left:0px;
 50     z-index:100;
 51 }
 52 
 53 #slides .next,#slides .prev {
 54     position:absolute;
 55     top:107px;
 56     left:0px;
 57     width:24px;
 58     height:43px;
 59     display: none;
 60     
 61     
 62     
 63 }
 64 #slides .next:hover,#slides .prev:hover{
 65     display: block!important;
 66     z-index:101;
 67 } 
 68 .slides_show{
 69     display: block!important;
 70     z-index:101;
 71 }
 72 
 73 .slides_container {
 74     width:400px;
 75     height:270px;
 76     overflow:hidden;
 77     position:relative;
 78     box-shadow: 0 0 10px #888;
 79 }
 80 .slides_container a:hover{opacity: 1;} 
 81 .info{text-indent: 2em;position: absolute; width: 400px;margin-top: 270px;height: 50px;transition:background 1s,margin-top 0.5s,font-size 0.2s;z-index: 200;}
 82 .info:hover{margin-top: 230px;color: #fff;}   
 83 .infoadd{background: rgba(0, 0, 0, 0.2) !important; /* IE无效,FF有效 */
 84 
 85             background: #fff;color: #fff;text-shadow:0 0 1px #888;
 86 
 87             filter: alpha(opacity=60);margin-top: 230px;display:inline;}
 88 #slides .next {
 89     left:375px;
 90 
 91 }
 92 
 93 .pagination {
 94     margin:0px auto 0;
 95     width:100px;
 96     
 97 }
 98 
 99 .pagination li {
100     float:left;
101     margin:0 1px;
102 }
103 
104 .pagination li a {
105     display:block;
106     width:12px;
107     height:0;
108     padding-top:12px;
109     background-image:url(../img/pagination.png);
110     background-position:0 0;
111     float:left;
112     overflow:hidden;
113 }
114 
115 .pagination li.current a {
116     background-position:0 -12px;
117 }
118 
119 a:link,a:visited {
120     color:#599100;
121     text-decoration:none;
122 }
123 
124 a:hover,a:active {
125     color:#599100;
126 }

最后加上jq鼠标经过图像显示文字效果:

 1 $(function(){
 2         $(‘#slides‘).slides({
 3             preload: true,
 4             preloadImage: ‘img/loading.gif‘,
 5             play: 5000,
 6             pause: 2500,
 7             hoverPause: true
 8         });
 9 
10         setInterval(‘change()‘,100);
11         $(".slides_container").find(‘img‘).live(‘mouseover‘,function(){
12             b=$(this).attr(‘alt‘);
13             $(‘.info‘).addClass(‘infoadd‘);    
14             $(‘.next‘).addClass(‘slides_show‘);
15             $(‘.prev‘).addClass(‘slides_show‘);                    
16             //alert(r);
17             $(this).attr(‘title‘,text);
18 
19         })
20         $(".slides_container").find(‘img‘).live(‘mouseout‘,function(){
21             $(".info").removeClass(‘infoadd‘);
22             $(‘.next‘).removeClass(‘slides_show‘);
23             $(‘.prev‘).removeClass(‘slides_show‘);    
24         });
25         
26         
27     });
28     function change(){
29         var r=$(".current").find("a").attr(‘rel‘);
30         if(r==0){$(‘.info‘).text(‘如果能让我重新在来一次,我希望不曾出现在你的生命里。这对我来说已经来不及了,因为我已经无法自拔‘);}
31         if(r==1){$(‘.info‘).text(‘22222‘);}
32         if(r==2){$(‘.info‘).text(‘33333‘);}
33         if(r==3){$(‘.info‘).text(‘44444‘);}
34         if(r==4){$(‘.info‘).text(‘55555‘);}
35     }

完工!

jq图片切换特效

标签:des   style   blog   color   os   io   strong   for   ar   

原文地址:http://www.cnblogs.com/mrcln/p/3929951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!