您的位置: 首页  >  文章  >  3d旋转幻灯片分析与设计

3d旋转幻灯片分析与设计

分类: 文章 • 2025-02-03 14:01:22

3d旋转幻灯片分析与设计

需求：

如图：

3d旋转幻灯片分析与设计


有三种切换事件：定时自动切换、点击左右按钮切换和下方索引标签click切换。

图片切换时有3d旋转效果。

中间图片文字信息有淡出效果。

幻灯片默认自动3秒后向左旋转一次。

点击左边的按钮向左转，点击右边的按钮向右转。

分析：

结构布局：

图片div统一使用类ad-slide-div以及各自使用ad-slide-div加“序号”来命名id，且在图片div中使用隐藏的input来保存相应序号。使用ad-slide-div给出基本样式，即图片堆叠显示在中间，透明度为0。

图片文字信息统一使用类caption,放在图片div内，固定位置。

图片索引标签div使用类ad_slide_tag命名，各标签使用ad-slide-tag-加”序号”来命名id.标签内使用隐藏input保存相应序号。

图片左右切换按钮使用类ad_slide_button命名其div，各自使用left及right来命名id.且设置对应样式。

图片的旋转效果主要有以下两种情况以及各个过程组成：

左转：

中间显示的图片滚动到左边

右边显示的图片滚动到中间

后面隐藏的图片放到右边

左边的图片隐藏到后面

指定图片文字信息浮现

设置下方索引

右转：

中间显示的图片滚动到右边

左边显示的图片滚动到中间

后面隐藏的图片放到左边

右边的图片隐藏到后面

指定图片文字信息浮现

设置下方索引

但实际上可以归结为：

图片隐藏到后面

设置左边的图片

设置中间的图片

设置文字信息

设置右边的图片

设置下方索引标签

从而之需要获取相对应的三张图片序号即可。序号只可能是当前要显示的图片的前一张、当前图片以及当前图片的后一张。而这里需要考虑当前图片为0和当前图片为最后一张的情况。

把以上的动作写成一个基本方法，这个方法需要如下参数：

num：要显示的序号

direction：旋转方向

time：完成动画使用的时间，由此可以迅速越过几张图片切换到指定图片

通过基本方法即可以完成幻灯片的三个事件操作。

其中下方的索引标签切换时需要考虑多次旋转以及最优旋转的情况。

最优旋转主要是考虑头部和尾部的互相切换。其他的使用默认的向右切换。多次旋转则可以根据从当前图片过度到指定图片需要旋转多少次，然后使用循环来调用基本方法。这里要求给当前显示在中间的图片加上可辨认的标识，这里使用加类ad-slide-div-middle的方法。

代码设计：

css:

[css] view plaincopyprint?
  1. /****幻灯片****/
  2. .home_span_nav_ad_slide{
  3. width:940px;
  4. height:350px;
  5. float:left;
  6. position:relative;
  7. }
  8. .ad-slide-div{
  9. width:300px;
  10. height:160px;
  11. position:absolute;
  12. top:100px;
  13. left:320px;
  14. z-index:2;
  15. }
  16. .ad-slide-divimg{
  17. width:100%;
  18. height:100%;
  19. }
  20. .caption{
  21. position:absolute;
  22. left:0px;
  23. z-index:6;
  24. margin-bottom:5px;
  25. height:50px;
  26. background:#000;
  27. background:rgba(0,0,0,.7);
  28. width:620px;
  29. font-size:12px;
  30. color:#fff;
  31. border-top:1pxsolid#000;
  32. text-shadow:none;
  33. padding:010px020px;
  34. }
  35. .caption_title{
  36. height:20px;
  37. width:620px;
  38. line-height:20px;
  39. }
  40. .caption_titlea{
  41. color:#fff;
  42. text-decoration:none;
  43. line-height:20px;
  44. font-weight:bold;
  45. }
  46. .caption_content{
  47. height:20px;
  48. width:620px;
  49. line-height:20px;
  50. font-size:12px;
  51. overflow:hidden;
  52. }
  53. .caption_contenta{
  54. color:#fff;
  55. text-decoration:none;
  56. line-height:20px;
  57. }
  58. .prev{
  59. width:145px;
  60. height:230px;
  61. position:absolute;
  62. left:0px;
  63. z-index:3;
  64. top:85px;
  65. cursor:pointer;
  66. }
  67. .next{
  68. width:145px;
  69. height:230px;
  70. position:absolute;
  71. right:0px;
  72. z-index:3;
  73. top:85px;
  74. cursor:pointer;
  75. }
  76. .home_span_nav_ad_slide_bottom{
  77. margin:30px000;
  78. float:left;
  79. height:34px;
  80. width:100%;
  81. background:url(../images/home/slide_bg.gif);
  82. }
  83. .home_span_nav_ad_slide_bottomul{
  84. width:200px;
  85. height:40px;
  86. margin:0auto;
  87. padding:0;
  88. line-height:34px;
  89. list-style:none;
  90. }
  91. .home_span_nav_ad_slide_bottomulli{
  92. line-height:34px;
  93. float:left;
  94. width:26px;
  95. height:28px;
  96. margin:4px2px00;
  97. cursor:pointer;
  98. }
  99. .ad-slide-div-switch{
  100. background:url(../images/home/focus_out.gif);
  101. }
  102. .ad-slide-div-switch-on{
  103. background:url(../images/home/focus_on.gif);
  104. }
/****幻灯片****/ .home_span_nav_ad_slide{ width: 940px; height:350px; float:left; position: relative; } .ad-slide-div{ width:300px; height:160px; position: absolute; top: 100px; left: 320px; z-index: 2; } .ad-slide-div img{ width:100%; height:100%; } .caption{ position: absolute; left: 0px; z-index: 6; margin-bottom:5px; height:50px; background:#000; background:rgba(0,0,0,.7); width:620px; font-size:12px; color:#fff; border-top:1px solid #000; text-shadow:none; padding:0 10px 020px; } .caption_title{ height:20px; width:620px; line-height:20px; } .caption_title a{ color:#fff; text-decoration:none; line-height:20px; font-weight:bold; } .caption_content{ height:20px; width:620px; line-height:20px; font-size:12px; overflow: hidden; } .caption_content a{ color:#fff; text-decoration:none; line-height:20px; } .prev{ width:145px; height:230px; position: absolute; left: 0px; z-index: 3; top:85px; cursor: pointer; } .next{ width:145px; height:230px; position: absolute; right: 0px; z-index: 3; top:85px; cursor: pointer; } .home_span_nav_ad_slide_bottom{ margin:30px 00 0; float:left; height:34px; width:100%; background:url(../images/home/slide_bg.gif); } .home_span_nav_ad_slide_bottom ul{ width:200px; height:40px; margin:0 auto; padding:0; line-height:34px; list-style:none; } .home_span_nav_ad_slide_bottom ul li{ line-height:34px; float:left; width:26px; height:28px; margin:4px 2px 00; cursor: pointer; } .ad-slide-div-switch{ background:url(../images/home/focus_out.gif); } .ad-slide-div-switch-on{ background:url(../images/home/focus_on.gif); }

html+js:

[html] view plaincopyprint?
  1. <divclass="home_span_nav_top">
  2. <divclass="home_span_nav_ad">
  3. <divclass="home_span_nav_ad_slide">
  4. <divclass="ad-slide-div"id="ad-slide-div-0">
  5. <inputtype="hidden"value="0"/>
  6. <ahref=""title=""rel=""><imgsrc="images/ppt1.png"width="650"height="350"id="img-0"/></a>
  7. <divclass="caption"id="caption-0"style="bottom:0">
  8. <divclass="caption_title"><ahref="###">细胞培养耗材0</a></div>
  9. <divclass="caption_content"><ahref="###">天然氨基酸合成，快速高效！</a></div>
  10. </div>
  11. </div>
  12. <divclass="ad-slide-div"id="ad-slide-div-1">
  13. <inputtype="hidden"value="1"/>
  14. <ahref=""title=""rel=""><imgsrc="images/ppt2.png"width="650"height="350"id="img-1"/></a>
  15. <divclass="caption"id="caption-1"style="bottom:0">
  16. <divclass="caption_title"><ahref="###">细胞培养耗材1</a></div>
  17. <divclass="caption_content"><ahref="###">天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！</a></div>
  18. </div>
  19. </div>
  20. <divclass="ad-slide-div"id="ad-slide-div-2">
  21. <inputtype="hidden"value="2"/>
  22. <ahref=""title=""rel=""><imgsrc="images/ppt3.png"width="650"height="350"id="img-2"/></a>
  23. <divclass="caption"id="caption-2"style="bottom:0">
  24. <divclass="caption_title"><ahref="###">细胞培养耗材2</a></div>
  25. <divclass="caption_content"><ahref="###">然氨基酸合成，快速高效！</a></div>
  26. </div>
  27. </div>
  28. <divclass="ad-slide-div"id="ad-slide-div-3">
  29. <inputtype="hidden"value="3"/>
  30. <ahref=""title=""rel=""><imgsrc="images/ppt4.png"width="650"height="350"id="img-3"/></a>
  31. <divclass="caption"id="caption-3"style="bottom:0">
  32. <divclass="caption_title"><ahref="###">细胞培养耗材3</a></div>
  33. <divclass="caption_content"><ahref="###">天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！</a></div>
  34. </div>
  35. </div>
  36. <divclass="ad-slide-div"id="ad-slide-div-4">
  37. <inputtype="hidden"value="4"/>
  38. <ahref=""title=""rel=""><imgsrc="images/ppt5.png"width="650"height="350"id="img-4"/></a>
  39. <divclass="caption"id="caption-4"style="bottom:0">
  40. <divclass="caption_title"><ahref="###">细胞培养耗材4</a></div>
  41. <divclass="caption_content">天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！</div>
  42. </div>
  43. </div>
  44. <divclass="prevchange-button"><imgsrc="images/bg/left.png"alt="ArrowNext"title="下一张"/><inputtype="hidden"value="left"/></div>
  45. <divclass="nextchange-button"><imgsrc="images/bg/right.png"alt="ArrowPrev"title="上一张"/><inputtype="hidden"value="right"/></div>
  46. </div>
  47. <divclass="home_span_nav_ad_slide_bottom">
  48. <ul>
  49. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-0"><inputtype="hidden"value="0"/></li>
  50. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-1"><inputtype="hidden"value="1"/></li>
  51. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-2"><inputtype="hidden"value="2"/></li>
  52. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-3"><inputtype="hidden"value="3"/></li>
  53. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-4"><inputtype="hidden"value="4"/></li>
  54. </ul>
  55. </div>
  56. <scripttype="text/javascript">
  57. /**
  58. *幻灯片控制代码开始
  59. */
  61. varInterval_control='';//自动切换控制变量
  62. varshow_num;//要显示的图片序号
  63. vartotal=5;//图片总数
  64. varstart_time=500;//初始化动画时间
  66. //初始化设置
  67. $('.ad-slide-div').css('opacity',0);
  68. $('.caption').hide();
  69. $('#ad-slide-div-switch-1').addClass("ad-slide-div-switch-on");
  71. //设置左边的图片
  72. $('#ad-slide-div-0').css({"z-index":0})
  73. .animate({opacity:1,top:"85px",left:"0px",width:"430px",height:"230px"},start_time);
  75. //设置中间的图片
  76. $('#ad-slide-div-1').addClass("ad-slide-div-middle").css('z-index',2)
  77. .animate({opacity:1,top:"0px",left:"145px",width:"650px",height:"350px"},start_time);
  78. $('#caption-1').fadeIn(start_time);
  80. //设置右边的图片
  81. $('#ad-slide-div-2').css({"z-index":1})
  82. .animate({opacity:1,top:"85px",left:"510px",width:"430px",height:"230px"},start_time);
  84. Interval_control=setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
  86. //如果是谷歌浏览器的话添加隐藏标签和显示标签事件
  87. if(window.navigator.userAgent.indexOf("Chrome")>=0){
  88. window.addEventListener('focus',function(){
  89. Interval_control=setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
  90. },false);
  92. window.addEventListener('blur',function(){
  93. window.clearInterval(Interval_control);
  94. },false);
  95. }
  97. /*切换方法
  98. *num:要显示的图片
  99. *direction:旋转方向
  100. *time:动画效果时间
  101. */
  102. functionnewsSlide_ChangeImg(num,direction,time)
  103. {
  104. if(num<0)
  105. {
  106. num=(parseInt($('.ad-slide-div-middle').find("input").val())+1)%total;//获取要显示的序号
  107. }
  109. //隐藏所有
  110. $('.ad-slide-div').removeClass('ad-slide-div-middle');
  112. varleft_obj;
  113. varmiddle_obj;
  114. varmiddle_caption_obj;
  115. varright_obj;
  116. varhide_obj;
  118. //左边的图片
  119. if(num==0){
  120. left_obj=$('#ad-slide-div-'+(total-1));
  121. }else{
  122. left_obj=$('#ad-slide-div-'+(num-1));
  123. }
  124. //中间的图片
  125. middle_obj=$('#ad-slide-div-'+num);
  126. middle_caption_obj=$('#caption-'+num);
  127. //右边的图片
  128. if(num==total-1){
  129. right_obj=$('#ad-slide-div-0');
  130. }else{
  131. right_obj=$('#ad-slide-div-'+(num+1));
  132. }
  133. //隐藏的图片,需要区分左右
  134. if(direction=='left')
  135. {
  136. if(num==0)
  137. {
  138. hide_obj=$('#ad-slide-div-'+(total-2));
  139. }elseif(num==1){
  140. hide_obj=$('#ad-slide-div-'+(total-1));
  141. }else{
  142. hide_obj=$('#ad-slide-div-'+(num-2));
  143. }
  144. }else{
  145. if(num==total-2)
  146. {
  147. hide_obj=$('#ad-slide-div-0');
  148. }elseif(num==total-1){
  149. hide_obj=$('#ad-slide-div-1');
  150. }else{
  151. hide_obj=$('#ad-slide-div-'+(num+2));
  152. }
  153. }
  154. //隐藏的图片放到后面
  155. hide_obj.css({"z-index":0})
  156. .animate({opacity:0,top:"100px",left:"320px",width:"300px",height:"160px"});
  158. //设置右边的图片
  159. right_obj.css({"z-index":1,"overflow":"hidden"})
  160. .animate({opacity:1,top:"85px",left:"510px",width:"430px",height:"230px"});
  162. //设置中间的图片
  163. middle_obj.css('z-index',2).addClass("ad-slide-div-middle")
  164. .animate({top:"0px",left:"145px",width:"650px",height:"350px"},time);
  166. //指定图片文字信息浮现
  167. $('.caption').fadeOut();
  168. middle_caption_obj.fadeIn(time);
  170. //设置左边的图片
  171. left_obj.css({"z-index":1,"overflow":"hidden"})
  172. .animate({opacity:1,top:"85px",left:"0px",width:"430px",height:"230px"});
  174. //设置下方索引
  175. $('.ad-slide-div-switch').removeClass("ad-slide-div-switch-on");
  176. $('#ad-slide-div-switch-'+num).addClass("ad-slide-div-switch-on");
  177. }
  180. //当触发mouseenter事件时，取消正在执行的自动切换方法并调用手动切换方法切换到指定序号，触发mouseouter事件时重新设置自动切换
  181. $('.home_span_nav_ad_slide').mouseenter(function(){
  182. clearInterval(Interval_control);//停止自动切换
  183. }).mouseleave(function(){
  184. Interval_control=setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
  185. });
  188. //左右切换click事件，取消正在执行的自动切换方法并调用手动切换方法切换到指定序号，3秒后重新设置自动切换
  189. $('.home_span_nav_ad_slide.change-button').click(function(){
  190. type=$(this).find("input").val();//获取方向类型
  191. if(type=='right')
  192. {
  193. show_num=parseInt($('.ad-slide-div-middle').find("input").val());//获取当前序号
  194. show_num=show_num==0?total-1:show_num-1;//如果当前显示的为0则下一张显示最后一张图片,否者为前一张图片
  195. }else{
  196. show_num=(parseInt($('.ad-slide-div-middle').find("input").val())+1)%total;//获取当前序号
  197. }
  198. newsSlide_ChangeImg(show_num,type,100);//切换到指定序号
  199. });
  201. //指定切换
  202. //考虑最优切换和多次切换
  203. $('.home_span_nav_ad_slide_bottomli').click(function(){
  204. show_num=parseInt($(this).find("input").val());//获取要显示的序号
  205. now_num=parseInt($('.ad-slide-div-middle').find("input").val());//当前显示的序号
  206. clearInterval(Interval_control);//停止自动切换
  207. //确定旋转方向和旋转次数:除了顶端切换到末端以及要显示的在当前显示图片左边之外，其他都向左旋转
  208. vartype='left';
  209. varchange_num=show_num-now_num;//旋转次数
  210. if(show_num==total-1&&now_num==0)
  211. {
  212. type='right';
  213. change_num=1;
  214. }elseif(now_num==total-1&&show_num==0){
  215. change_num=1;
  216. }elseif(show_num<now_num){
  217. type='right';
  218. change_num=now_num-show_num;
  219. }
  220. //一次旋转
  221. if(change_num==1)
  222. {
  223. newsSlide_ChangeImg(show_num,type,100);//切换到指定序号
  224. }else{
  225. //多次旋转,根据方向和次数调用基本方法实现
  226. for(varstar=1;star<=change_num;star++)
  227. {
  228. if(type=='right')
  229. {
  230. show_num=now_num-star;
  231. }else{
  232. show_num=now_num+star;
  233. }
  234. newsSlide_ChangeImg(show_num,type,100);//切换到指定序号
  235. }
  236. }
  237. Interval_control=setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
  238. })
  240. /**
  241. *幻灯片控制代码结束
  242. */
  243. </script>
  244. </div>
  245. <divclass="clear"></div>
  246. </div>

3d旋转幻灯片分析与设计

需求：

如图：

3d旋转幻灯片分析与设计


有三种切换事件：定时自动切换、点击左右按钮切换和下方索引标签click切换。

图片切换时有3d旋转效果。

中间图片文字信息有淡出效果。

幻灯片默认自动3秒后向左旋转一次。

点击左边的按钮向左转，点击右边的按钮向右转。

分析：

结构布局：

图片div统一使用类ad-slide-div以及各自使用ad-slide-div加“序号”来命名id，且在图片div中使用隐藏的input来保存相应序号。使用ad-slide-div给出基本样式，即图片堆叠显示在中间，透明度为0。

图片文字信息统一使用类caption,放在图片div内，固定位置。

图片索引标签div使用类ad_slide_tag命名，各标签使用ad-slide-tag-加”序号”来命名id.标签内使用隐藏input保存相应序号。

图片左右切换按钮使用类ad_slide_button命名其div，各自使用left及right来命名id.且设置对应样式。

图片的旋转效果主要有以下两种情况以及各个过程组成：

左转：

中间显示的图片滚动到左边

右边显示的图片滚动到中间

后面隐藏的图片放到右边

左边的图片隐藏到后面

指定图片文字信息浮现

设置下方索引

右转：

中间显示的图片滚动到右边

左边显示的图片滚动到中间

后面隐藏的图片放到左边

右边的图片隐藏到后面

指定图片文字信息浮现

设置下方索引

但实际上可以归结为：

图片隐藏到后面

设置左边的图片

设置中间的图片

设置文字信息

设置右边的图片

设置下方索引标签

从而之需要获取相对应的三张图片序号即可。序号只可能是当前要显示的图片的前一张、当前图片以及当前图片的后一张。而这里需要考虑当前图片为0和当前图片为最后一张的情况。

把以上的动作写成一个基本方法，这个方法需要如下参数：

num：要显示的序号

direction：旋转方向

time：完成动画使用的时间，由此可以迅速越过几张图片切换到指定图片

通过基本方法即可以完成幻灯片的三个事件操作。

其中下方的索引标签切换时需要考虑多次旋转以及最优旋转的情况。

最优旋转主要是考虑头部和尾部的互相切换。其他的使用默认的向右切换。多次旋转则可以根据从当前图片过度到指定图片需要旋转多少次，然后使用循环来调用基本方法。这里要求给当前显示在中间的图片加上可辨认的标识，这里使用加类ad-slide-div-middle的方法。

代码设计：

css:

[css] view plaincopyprint?
  1. /****幻灯片****/
  2. .home_span_nav_ad_slide{
  3. width:940px;
  4. height:350px;
  5. float:left;
  6. position:relative;
  7. }
  8. .ad-slide-div{
  9. width:300px;
  10. height:160px;
  11. position:absolute;
  12. top:100px;
  13. left:320px;
  14. z-index:2;
  15. }
  16. .ad-slide-divimg{
  17. width:100%;
  18. height:100%;
  19. }
  20. .caption{
  21. position:absolute;
  22. left:0px;
  23. z-index:6;
  24. margin-bottom:5px;
  25. height:50px;
  26. background:#000;
  27. background:rgba(0,0,0,.7);
  28. width:620px;
  29. font-size:12px;
  30. color:#fff;
  31. border-top:1pxsolid#000;
  32. text-shadow:none;
  33. padding:010px020px;
  34. }
  35. .caption_title{
  36. height:20px;
  37. width:620px;
  38. line-height:20px;
  39. }
  40. .caption_titlea{
  41. color:#fff;
  42. text-decoration:none;
  43. line-height:20px;
  44. font-weight:bold;
  45. }
  46. .caption_content{
  47. height:20px;
  48. width:620px;
  49. line-height:20px;
  50. font-size:12px;
  51. overflow:hidden;
  52. }
  53. .caption_contenta{
  54. color:#fff;
  55. text-decoration:none;
  56. line-height:20px;
  57. }
  58. .prev{
  59. width:145px;
  60. height:230px;
  61. position:absolute;
  62. left:0px;
  63. z-index:3;
  64. top:85px;
  65. cursor:pointer;
  66. }
  67. .next{
  68. width:145px;
  69. height:230px;
  70. position:absolute;
  71. right:0px;
  72. z-index:3;
  73. top:85px;
  74. cursor:pointer;
  75. }
  76. .home_span_nav_ad_slide_bottom{
  77. margin:30px000;
  78. float:left;
  79. height:34px;
  80. width:100%;
  81. background:url(../images/home/slide_bg.gif);
  82. }
  83. .home_span_nav_ad_slide_bottomul{
  84. width:200px;
  85. height:40px;
  86. margin:0auto;
  87. padding:0;
  88. line-height:34px;
  89. list-style:none;
  90. }
  91. .home_span_nav_ad_slide_bottomulli{
  92. line-height:34px;
  93. float:left;
  94. width:26px;
  95. height:28px;
  96. margin:4px2px00;
  97. cursor:pointer;
  98. }
  99. .ad-slide-div-switch{
  100. background:url(../images/home/focus_out.gif);
  101. }
  102. .ad-slide-div-switch-on{
  103. background:url(../images/home/focus_on.gif);
  104. }
/****幻灯片****/ .home_span_nav_ad_slide{ width: 940px; height:350px; float:left; position: relative; } .ad-slide-div{ width:300px; height:160px; position: absolute; top: 100px; left: 320px; z-index: 2; } .ad-slide-div img{ width:100%; height:100%; } .caption{ position: absolute; left: 0px; z-index: 6; margin-bottom:5px; height:50px; background:#000; background:rgba(0,0,0,.7); width:620px; font-size:12px; color:#fff; border-top:1px solid #000; text-shadow:none; padding:0 10px 020px; } .caption_title{ height:20px; width:620px; line-height:20px; } .caption_title a{ color:#fff; text-decoration:none; line-height:20px; font-weight:bold; } .caption_content{ height:20px; width:620px; line-height:20px; font-size:12px; overflow: hidden; } .caption_content a{ color:#fff; text-decoration:none; line-height:20px; } .prev{ width:145px; height:230px; position: absolute; left: 0px; z-index: 3; top:85px; cursor: pointer; } .next{ width:145px; height:230px; position: absolute; right: 0px; z-index: 3; top:85px; cursor: pointer; } .home_span_nav_ad_slide_bottom{ margin:30px 00 0; float:left; height:34px; width:100%; background:url(../images/home/slide_bg.gif); } .home_span_nav_ad_slide_bottom ul{ width:200px; height:40px; margin:0 auto; padding:0; line-height:34px; list-style:none; } .home_span_nav_ad_slide_bottom ul li{ line-height:34px; float:left; width:26px; height:28px; margin:4px 2px 00; cursor: pointer; } .ad-slide-div-switch{ background:url(../images/home/focus_out.gif); } .ad-slide-div-switch-on{ background:url(../images/home/focus_on.gif); }

html+js:

[html] view plaincopyprint?
  1. <divclass="home_span_nav_top">
  2. <divclass="home_span_nav_ad">
  3. <divclass="home_span_nav_ad_slide">
  4. <divclass="ad-slide-div"id="ad-slide-div-0">
  5. <inputtype="hidden"value="0"/>
  6. <ahref=""title=""rel=""><imgsrc="images/ppt1.png"width="650"height="350"id="img-0"/></a>
  7. <divclass="caption"id="caption-0"style="bottom:0">
  8. <divclass="caption_title"><ahref="###">细胞培养耗材0</a></div>
  9. <divclass="caption_content"><ahref="###">天然氨基酸合成，快速高效！</a></div>
  10. </div>
  11. </div>
  12. <divclass="ad-slide-div"id="ad-slide-div-1">
  13. <inputtype="hidden"value="1"/>
  14. <ahref=""title=""rel=""><imgsrc="images/ppt2.png"width="650"height="350"id="img-1"/></a>
  15. <divclass="caption"id="caption-1"style="bottom:0">
  16. <divclass="caption_title"><ahref="###">细胞培养耗材1</a></div>
  17. <divclass="caption_content"><ahref="###">天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！</a></div>
  18. </div>
  19. </div>
  20. <divclass="ad-slide-div"id="ad-slide-div-2">
  21. <inputtype="hidden"value="2"/>
  22. <ahref=""title=""rel=""><imgsrc="images/ppt3.png"width="650"height="350"id="img-2"/></a>
  23. <divclass="caption"id="caption-2"style="bottom:0">
  24. <divclass="caption_title"><ahref="###">细胞培养耗材2</a></div>
  25. <divclass="caption_content"><ahref="###">然氨基酸合成，快速高效！</a></div>
  26. </div>
  27. </div>
  28. <divclass="ad-slide-div"id="ad-slide-div-3">
  29. <inputtype="hidden"value="3"/>
  30. <ahref=""title=""rel=""><imgsrc="images/ppt4.png"width="650"height="350"id="img-3"/></a>
  31. <divclass="caption"id="caption-3"style="bottom:0">
  32. <divclass="caption_title"><ahref="###">细胞培养耗材3</a></div>
  33. <divclass="caption_content"><ahref="###">天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！</a></div>
  34. </div>
  35. </div>
  36. <divclass="ad-slide-div"id="ad-slide-div-4">
  37. <inputtype="hidden"value="4"/>
  38. <ahref=""title=""rel=""><imgsrc="images/ppt5.png"width="650"height="350"id="img-4"/></a>
  39. <divclass="caption"id="caption-4"style="bottom:0">
  40. <divclass="caption_title"><ahref="###">细胞培养耗材4</a></div>
  41. <divclass="caption_content">天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！</div>
  42. </div>
  43. </div>
  44. <divclass="prevchange-button"><imgsrc="images/bg/left.png"alt="ArrowNext"title="下一张"/><inputtype="hidden"value="left"/></div>
  45. <divclass="nextchange-button"><imgsrc="images/bg/right.png"alt="ArrowPrev"title="上一张"/><inputtype="hidden"value="right"/></div>
  46. </div>
  47. <divclass="home_span_nav_ad_slide_bottom">
  48. <ul>
  49. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-0"><inputtype="hidden"value="0"/></li>
  50. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-1"><inputtype="hidden"value="1"/></li>
  51. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-2"><inputtype="hidden"value="2"/></li>
  52. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-3"><inputtype="hidden"value="3"/></li>
  53. <liclass="ad-slide-div-switch"id="ad-slide-div-switch-4"><inputtype="hidden"value="4"/></li>
  54. </ul>
  55. </div>
  56. <scripttype="text/javascript">
  57. /**
  58. *幻灯片控制代码开始
  59. */
  61. varInterval_control='';//自动切换控制变量
  62. varshow_num;//要显示的图片序号
  63. vartotal=5;//图片总数
  64. varstart_time=500;//初始化动画时间
  66. //初始化设置
  67. $('.ad-slide-div').css('opacity',0);
  68. $('.caption').hide();
  69. $('#ad-slide-div-switch-1').addClass("ad-slide-div-switch-on");
  71. //设置左边的图片
  72. $('#ad-slide-div-0').css({"z-index":0})
  73. .animate({opacity:1,top:"85px",left:"0px",width:"430px",height:"230px"},start_time);
  75. //设置中间的图片
  76. $('#ad-slide-div-1').addClass("ad-slide-div-middle").css('z-index',2)
  77. .animate({opacity:1,top:"0px",left:"145px",width:"650px",height:"350px"},start_time);
  78. $('#caption-1').fadeIn(start_time);
  80. //设置右边的图片
  81. $('#ad-slide-div-2').css({"z-index":1})
  82. .animate({opacity:1,top:"85px",left:"510px",width:"430px",height:"230px"},start_time);
  84. Interval_control=setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
  86. //如果是谷歌浏览器的话添加隐藏标签和显示标签事件
  87. if(window.navigator.userAgent.indexOf("Chrome")>=0){
  88. window.addEventListener('focus',function(){
  89. Interval_control=setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
  90. },false);
  92. window.addEventListener('blur',function(){
  93. window.clearInterval(Interval_control);
  94. },false);
  95. }
  97. /*切换方法
  98. *num:要显示的图片
  99. *direction:旋转方向
  100. *time:动画效果时间
  101. */
  102. functionnewsSlide_ChangeImg(num,direction,time)
  103. {
  104. if(num<0)
  105. {
  106. num=(parseInt($('.ad-slide-div-middle').find("input").val())+1)%total;//获取要显示的序号
  107. }
  109. //隐藏所有
  110. $('.ad-slide-div').removeClass('ad-slide-div-middle');
  112. varleft_obj;
  113. varmiddle_obj;
  114. varmiddle_caption_obj;
  115. varright_obj;
  116. varhide_obj;
  118. //左边的图片
  119. if(num==0){
  120. left_obj=$('#ad-slide-div-'+(total-1));
  121. }else{
  122. left_obj=$('#ad-slide-div-'+(num-1));
  123. }
  124. //中间的图片
  125. middle_obj=$('#ad-slide-div-'+num);
  126. middle_caption_obj=$('#caption-'+num);
  127. //右边的图片
  128. if(num==total-1){
  129. right_obj=$('#ad-slide-div-0');
  130. }else{
  131. right_obj=$('#ad-slide-div-'+(num+1));
  132. }
  133. //隐藏的图片,需要区分左右
  134. if(direction=='left')
  135. {
  136. if(num==0)
  137. {
  138. hide_obj=$('#ad-slide-div-'+(total-2));
  139. }elseif(num==1){
  140. hide_obj=$('#ad-slide-div-'+(total-1));
  141. }else{
  142. hide_obj=$('#ad-slide-div-'+(num-2));
  143. }
  144. }else{
  145. if(num==total-2)
  146. {
  147. hide_obj=$('#ad-slide-div-0');
  148. }elseif(num==total-1){
  149. hide_obj=$('#ad-slide-div-1');
  150. }else{
  151. hide_obj=$('#ad-slide-div-'+(num+2));
  152. }
  153. }
  154. //隐藏的图片放到后面
  155. hide_obj.css({"z-index":0})
  156. .animate({opacity:0,top:"100px",left:"320px",width:"300px",height:"160px"});
  158. //设置右边的图片
  159. right_obj.css({"z-index":1,"overflow":"hidden"})
  160. .animate({opacity:1,top:"85px",left:"510px",width:"430px",height:"230px"});
  162. //设置中间的图片
  163. middle_obj.css('z-index',2).addClass("ad-slide-div-middle")
  164. .animate({top:"0px",left:"145px",width:"650px",height:"350px"},time);
  166. //指定图片文字信息浮现
  167. $('.caption').fadeOut();
  168. middle_caption_obj.fadeIn(time);
  170. //设置左边的图片
  171. left_obj.css({"z-index":1,"overflow":"hidden"})
  172. .animate({opacity:1,top:"85px",left:"0px",width:"430px",height:"230px"});
  174. //设置下方索引
  175. $('.ad-slide-div-switch').removeClass("ad-slide-div-switch-on");
  176. $('#ad-slide-div-switch-'+num).addClass("ad-slide-div-switch-on");
  177. }
  180. //当触发mouseenter事件时，取消正在执行的自动切换方法并调用手动切换方法切换到指定序号，触发mouseouter事件时重新设置自动切换
  181. $('.home_span_nav_ad_slide').mouseenter(function(){
  182. clearInterval(Interval_control);//停止自动切换
  183. }).mouseleave(function(){
  184. Interval_control=setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
  185. });
  188. //左右切换click事件，取消正在执行的自动切换方法并调用手动切换方法切换到指定序号，3秒后重新设置自动切换
  189. $('.home_span_nav_ad_slide.change-button').click(function(){
  190. type=$(this).find("input").val();//获取方向类型
  191. if(type=='right')
  192. {
  193. show_num=parseInt($('.ad-slide-div-middle').find("input").val());//获取当前序号
  194. show_num=show_num==0?total-1:show_num-1;//如果当前显示的为0则下一张显示最后一张图片,否者为前一张图片
  195. }else{
  196. show_num=(parseInt($('.ad-slide-div-middle').find("input").val())+1)%total;//获取当前序号
  197. }
  198. newsSlide_ChangeImg(show_num,type,100);//切换到指定序号
  199. });
  201. //指定切换
  202. //考虑最优切换和多次切换
  203. $('.home_span_nav_ad_slide_bottomli').click(function(){
  204. show_num=parseInt($(this).find("input").val());//获取要显示的序号
  205. now_num=parseInt($('.ad-slide-div-middle').find("input").val());//当前显示的序号
  206. clearInterval(Interval_control);//停止自动切换
  207. //确定旋转方向和旋转次数:除了顶端切换到末端以及要显示的在当前显示图片左边之外，其他都向左旋转
  208. vartype='left';
  209. varchange_num=show_num-now_num;//旋转次数
  210. if(show_num==total-1&&now_num==0)
  211. {
  212. type='right';
  213. change_num=1;
  214. }elseif(now_num==total-1&&show_num==0){
  215. change_num=1;
  216. }elseif(show_num<now_num){
  217. type='right';
  218. change_num=now_num-show_num;
  219. }
  220. //一次旋转
  221. if(change_num==1)
  222. {
  223. newsSlide_ChangeImg(show_num,type,100);//切换到指定序号
  224. }else{
  225. //多次旋转,根据方向和次数调用基本方法实现
  226. for(varstar=1;star<=change_num;star++)
  227. {
  228. if(type=='right')
  229. {
  230. show_num=now_num-star;
  231. }else{
  232. show_num=now_num+star;
  233. }
  234. newsSlide_ChangeImg(show_num,type,100);//切换到指定序号
  235. }
  236. }
  237. Interval_control=setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
  238. })
  240. /**
  241. *幻灯片控制代码结束
  242. */
  243. </script>
  244. </div>
  245. <divclass="clear"></div>
  246. </div>

相关推荐