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 必填项判断表单是否为空的方法
Sep 14 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
微信小程序开发技巧汇总
Jul 15 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
手把手教你实现 Promise的使用方法
Sep 02 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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与C#的值类型指向区别的详解
2013/05/21 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
discuz目录文件资料汇总
2014/12/30 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
简单学习Python time模块
2016/04/29 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python如何统计序列中元素
2020/07/31 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
python实现画图工具
2020/08/27 Python
区三好学生主要事迹
2014/01/30 职场文书
护士进修自我鉴定
2014/02/07 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
三八妇女节标语
2014/10/09 职场文书
2015年招聘工作总结
2014/12/12 职场文书
典型事迹材料范文
2014/12/29 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
亮剑精神观后感
2015/06/05 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python