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


Posted in Javascript onSeptember 07, 2015

本文实例讲述了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) 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="https://3water.com/" target="_blank" path="images/01.jpg" title="三水点靠木 3water.com"></a></li>
    <li><a href="https://3water.com/" target="_blank" path="images/02.jpg" title="三水点靠木 3water.com"></a></li>
    <li><a href="https://3water.com/" target="_blank" path="images/03.jpg" title="三水点靠木 3water.com"></a></li>
    <li><a href="https://3water.com/" target="_blank" path="images/04.jpg" title="三水点靠木 3water.com"></a></li>
    <li><a href="https://3water.com/" target="_blank" path="images/05.jpg" title="三水点靠木 3water.com"></a></li>
    <li><a href="https://3water.com/" target="_blank" path="images/06.jpg" title="三水点靠木 3water.com"></a></li>
    <li><a href="https://3water.com/" target="_blank" path="images/07.jpg" title="三水点靠木 3water.com"></a></li>
   </ul>
 </div>
<!-- 代码 结束 -->
<div style="text-align:center">
<p>{download}</p>
<p>{content}</p>
<p>{google_729x90}</p>
</div>
</body>
</html>

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

Javascript 相关文章推荐
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
js函数和this用法实例分析
Mar 13 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 #Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 #Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 #Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 #Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 #Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 #Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 #Javascript
You might like
php与paypal整合方法
2010/11/28 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
Jquery 扩展方法
2010/05/06 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
python 字符串追加实例
2019/07/20 Python
python getopt模块使用实例解析
2019/12/18 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
军训自我鉴定200字
2014/02/13 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL