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的可多选的下拉列表框
Jul 20 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
javascript基础知识讲解
Jan 11 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
Vue 3.0 全家桶抢先体验
Apr 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计算加权平均数的方法
2015/07/16 PHP
form自动提交实例讲解
2017/07/10 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
python 实现按对象传值
2019/12/26 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
深入了解python列表(LIST)
2020/06/08 Python
python爬取微博评论的实例讲解
2021/01/15 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
捐款倡议书
2014/04/14 职场文书
交通事故调解协议书
2014/04/16 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
基于Python实现西西成语接龙小助手
2022/08/05 Golang