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 相关文章推荐
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 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 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
详解Python迭代和迭代器
2016/03/28 Python
Python while 循环使用的简单实例
2016/06/08 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
与美同行演讲稿
2014/09/13 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
新年寄语2016
2015/08/17 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
python实现商品进销存管理系统
2022/05/30 Python