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 加载和执行-性能提高篇
Dec 28 Javascript
Jquery倒计时源码分享
May 16 Javascript
js星星评分效果
Jul 24 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
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二维数组的去重问题解析
2011/07/17 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php编写简单的文章发布程序
2015/06/18 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
清除输入框内的空格
2016/12/21 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
参观考察邀请函范文
2014/01/29 职场文书
上班打牌检讨书
2014/02/07 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
环境整治工作方案
2014/05/18 职场文书
财务管理专业求职信
2014/06/11 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
创业计划书之花店
2019/09/20 职场文书