CSS+JQ自动上下翻滚焦点幻灯片 向上向下滚动幻灯片特效 - DIVCSS5
欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS特效 >

CSS+JQ自动上下翻滚焦点幻灯片 向上向下滚动幻灯片特效

DIV+CSS+JQ上下翻滚焦点幻灯片 向上向下滚动幻灯片特效,点击焦幻灯片图片可自动向下向上滚动,适合搜索引擎优化的幻灯片特效

CSS幻灯片自动切换幻灯片截图
css div jq幻灯片效果截图

基于jquery的图片自动上下翻滚式焦点图广告代码特效,完全仿淘宝网首页的焦点幻灯片效果。

CSS幻灯片主要控制代码:

  1. <script type="text/javascript" > 
  2. $(function(){ 
  3. var len = $(".num > li").length; 
  4. var index = 0
  5. var adTimer; 
  6. $(".num li").mouseover(function(){ 
  7. index = $(".num li").index(this); 
  8. showImg(index); 
  9. }).eq(0).mouseover(); 
  10. //滑入停止动画,滑出开始动画 
  11. $('.ad').hover(function(){ 
  12. clearInterval(adTimer); 
  13. },function(){ 
  14. adTimer = setInterval(function(){ 
  15. showImg(index) 
  16. index++; 
  17. if(index==len){index=0;} 
  18. } , 2000); 
  19. }).trigger("mouseleave"); 
  20. }) 
  21. // 通过控制top ,来显示不同的幻灯片 
  22. function showImg(index){ 
  23. var adHeight = $(".ad").height(); 
  24. $(".slider").stop(true,false).animate({top : -adHeight*index},400); 
  25. $(".num li").removeClass("on") 
  26. .eq(index).addClass("on"); 
  27. </script> 

其中的 2000 是控制自动播放间隔时间的,400 是控制鼠标划过数字时图片的翻滚速度的。按照你的实际需要自行修改CSS样式为合适的大小,比如css 宽度,css高度,图片本身大小即可适用你所需,本自动上下滚动幻灯片特效兼容各大浏览器。

在线演示:查看案例

完整源代码打包下载:

相关幻灯片特效:CSS上下滚动切换幻灯片特效

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao606.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-08-20 10:05 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。