jQuery平滑旋转幻灯片特效代码分享
2019/6/29 21:54:10
本文主要是介绍jQuery平滑旋转幻灯片特效代码分享,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例讲述了jQuery平滑旋转幻灯片特效。分享给大家供大家参考。具体如下:
这一款基于jQuery实现平滑旋转幻灯片代码,效果超酷,场面相当震撼;图片大小和颜色自定义请修改jQuery-jcImgScroll.js。
运行效果图: -------------------查看效果 下载源码-------------------
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
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) no-repeat left center; } .jcImgScroll em.sNext { background:url(images/arrow-right.png) no-repeat right center;} .jcImgScroll dl dd { background:url(images/NumBtn.png) no-repeat 0 bottom; text-indent:-9em; } .jcImgScroll dl dd:hover,.jcImgScroll dl dd.curr { background-position:0 0; } --> </style> <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> </head> <body> <!-- 代码 开始 --> <div id="demo1" class="jcImgScroll"> <ul> <li><a href="//www.zyiz.net/" target="_blank" path="images/01.jpg" title="找一找教程网 www.zyiz.net"></a></li> <li><a href="//www.zyiz.net/" target="_blank" path="images/02.jpg" title="找一找教程网 www.zyiz.net"></a></li> <li><a href="//www.zyiz.net/" target="_blank" path="images/03.jpg" title="找一找教程网 www.zyiz.net"></a></li> <li><a href="//www.zyiz.net/" target="_blank" path="images/04.jpg" title="找一找教程网 www.zyiz.net"></a></li> <li><a href="//www.zyiz.net/" target="_blank" path="images/05.jpg" title="找一找教程网 www.zyiz.net"></a></li> <li><a href="//www.zyiz.net/" target="_blank" path="images/06.jpg" title="找一找教程网 www.zyiz.net"></a></li> <li><a href="//www.zyiz.net/" target="_blank" path="images/07.jpg" title="找一找教程网 www.zyiz.net"></a></li> </ul> </div> <!-- 代码 结束 --> <div style="text-align:center"> <p>{download}</p> <p>{content}</p> <p>{google_729x90}</p> </div> </body> </html>
以上就是为大家分享的jQuery平滑旋转幻灯片特效代码,希望大家可以喜欢,并应用到实践中。
这篇关于jQuery平滑旋转幻灯片特效代码分享的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习