jQuery技术

jQuery平滑旋转幻灯片特效代码分享

字号+ 作者:H5之家 来源:H5之家 2015-10-16 18:22 我要评论( )

本文实例讲述了jQuery平滑旋转幻灯片特效。分享给大家供大家参考。具体如下:这一款基于jQuery实现平滑旋转幻

本文实例讲述了jQuery平滑旋转幻灯片特效。分享给大家供大家参考。具体如下:
这一款基于jQuery实现平滑旋转幻灯片代码,效果超酷,场面相当震撼;图片大小和颜色自定义请修改jQuery-jcImgScroll.js。
运行效果图:               -------------------查看效果 下载源码-------------------

jQuery平滑旋转幻灯片特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
js关键代码:

<script src="js/jQuery-1.7.1.js" language="javascript" type="text/javascript"></script> <script src="js/jQuery-easing.js" language="javascript" type="text/javascript"></script> <script src="js/jQuery-jcImgScroll.js" language="javascript" type="text/javascript"></script> <script language="javascript" type="text/javascript"> <!-- $(function(){ $("#demo1").jcImgScroll({ }); $("#demo2").jcImgScroll({ count : 7 }); $("#demo3").jcImgScroll({ arrow : { width:110, height:342, x:220, y:0 }, count : 3, offsetX : 140, NumBtn : true, title:false }); }); --> </script>

为大家分享的jQuery平滑旋转幻灯片代码如下

<head> <title>jQuery平滑旋转幻灯片代码</title> <style> <!-- /* jQuery jcImgScroll css */ .jcImgScroll { position:relative; height:342px; } .jcImgScroll li { border:1px solid #ccc; } .jcImgScroll li a { background:#fff; display:block; height:340px; } .jcImgScroll li.loading a { background:#fff url(img/loading.gif) no-repeat center center;} .jcImgScroll li img,.jcImgScroll li,.jcImgScroll em,.jcImgScroll dl { display:none; border:0 none;} .jcImgScroll em.sPrev { background:url(images/arrow-left.png"js/jQuery-1.7.1.js" language="javascript" type="text/javascript"></script> <script src="js/jQuery-easing.js" language="javascript" type="text/javascript"></script> <script src="js/jQuery-jcImgScroll.js" language="javascript" type="text/javascript"></script> <script language="javascript" type="text/javascript"> <!-- $(function(){ $("#demo1").jcImgScroll({ }); $("#demo2").jcImgScroll({ count : 7 }); $("#demo3").jcImgScroll({ arrow : { width:110, height:342, x:220, y:0 }, count : 3, offsetX : 140, NumBtn : true, title:false }); }); --> </script> </head> <body> <!-- 代码 开始 --> <div> <ul> <li><a href="http://www.wyzu.cn/" target="_blank" path="images/01.jpg" title="脚本之家 "></a></li> <li><a href="http://www.wyzu.cn/" target="_blank" path="images/02.jpg" title="脚本之家 "></a></li> <li><a href="http://www.wyzu.cn/" target="_blank" path="images/03.jpg" title="脚本之家 "></a></li> <li><a href="http://www.wyzu.cn/" target="_blank" path="images/04.jpg" title="脚本之家 "></a></li> <li><a href="http://www.wyzu.cn/" target="_blank" path="images/05.jpg" title="脚本之家 "></a></li> <li><a href="http://www.wyzu.cn/" target="_blank" path="images/06.jpg" title="脚本之家 "></a></li> <li><a href="http://www.wyzu.cn/" target="_blank" path="images/07.jpg" title="脚本之家 "></a></li> </ul> </div> <!-- 代码 结束 --> <div> <p>{download}</p> <p>{content}</p> <p>{google_729x90}</p> </div> </body> </html>

以上就是为大家分享的jQuery平滑旋转幻灯片特效代码,希望大家可以喜欢,并应用到实践中。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评