轻松实现javascript图片轮播特效
内容摘要
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下
还是先来看一看效果图:
具体代码:
一、HTML代码分析
<body>
<div c
还是先来看一看效果图:
具体代码:
一、HTML代码分析
<body>
<div c
文章正文
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下
还是先来看一看效果图:
具体代码:
一、HTML代码分析
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <body> <div class = "dota" > <ul id= "content" > <li><a href= "#" ><img src= "images/1.jpg" /></a></li> <li><a href= "#" ><img src= "images/2.jpg" /></a></li> <li><a href= "#" ><img src= "images/3.jpg" /></a></li> <li><a href= "#" ><img src= "images/4.jpg" /></a></li> <li><a href= "#" ><img src= "images/5.jpg" /></a></li> </ul> <ul id= "indicator" > <li class = "current" ><a href= "#" >A版是一款手机DOTA应用,它涵盖了</a></li> <li><a href= "#" >A版是一款手机应用,它涵盖了</a></li> <li><a href= "#" >A版是一款手机应用,它涵盖了</a></li> <li><a href= "#" >A版是一款手机应用,它涵盖了</a></li> <li><a href= "#" >A版是一款手机应用,它涵盖了</a></li> </ul> </div> </body> |
此效果的层次结构比较清楚:
1. class为data的div是最外层的容器,可以用来控制整个效果图显示的位置。
2. id为content的ul用来存放左侧滚动的图片。
3. id为indicator的ul用来显示右侧的指示栏。
二、CSS代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | *{margin: 0; padding: 0;} img{ border:0; } .dota{ width:570px; height: 230px; margin:100px auto; position: relative; overflow: hidden; } .dota #content{ float: left; list-style: none; position: absolute; width:380px; height:230px; } .dota #content img{ width:380px; height:230px; } .dota #indicator{ float: right; list-style: none; width:180px; height:220px; padding: 5px; background-color: #100F13; } .dota #indicator li{ width: 180px; height: 44px; background: url(images/anniu.png) 0 -44px; } .dota #indicator li.current{ background-position: 0 0; } .dota #indicator li a{ display: block; width: 160px; height: 34px; padding: 5px 0 5px 25px; } .dota #indicator li a:link , .dota #indicator li a:visited{ text-decoration: none; color: #686477; font: 12px/145% "宋体" ; } |
这里,我对indicator中li的代码进行说明:
.dota #indicator li中的css代码就是设置右侧指示栏中的每一项,注意到,这里使用了background属性,也就是说li的背景是一张图片。准备好的图片如下:
这张准备好的图片大小为 180 * 88, 而.dota #indicator li中的background属性设置的position属性大小为 0 -44px, 即截取的图片的下半部分;所以indicator中所有的背景图片显示的是下半部分比较暗的部分; 而.dota #indicator li.current 的position属性大小为 0 0,所以默认情况下indicator的第一个显示高亮,其余的显示为暗黑的那部分。然后通过JQuery代码控制current属性作用在 "谁" 身上来切换选中状态。
三、JQuery代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <script type= "text/javascript" > $( function (){ var nowImage = 0; /* 为定时动画服务 */ $( ".dota #content li" ).first(). clone ().appendTo($( ".dota #content" )); var timer = setInterval(autoAnimate, 1500); $( ".dota" ).mouseenter( function (){ clearInterval(timer); }).mouseleave( function (){ timer = setInterval(autoAnimate, 1500); });; $( ".dota #indicator li" ).mouseenter( function (){ $(this).addClass( "current" ).siblings().removeClass( "current" ); nowImage = $(this).index(); /*stop() 可以立刻清楚以前的动画,防止动画叠加*/ $( ".dota #content" ).stop().animate({ "top" : -230 * nowImage}, 1000); }); function autoAnimate(){ if (nowImage == 4){ nowImage = 0; $( ".dota #indicator li" ).eq(nowImage).addClass( "current" ).siblings().removeClass( "current" ); $( ".dota #content" ).stop().animate({ "top" :-230 * 5}, 1000, function (){ $( ".dota #content" ).css( "top" ,0); }); } else { nowImage++; $( ".dota #content" ).stop().animate({ "top" : -230 * nowImage}, 1000); $( ".dota #indicator li" ).eq(nowImage).addClass( "current" ).siblings().removeClass( "current" ); } } }); </script> |
以上就是轻松实现javascript图片轮播特效的详细代码,希望对大家的学习有所帮助。
代码注释