jQuery平滑旋转幻灯片特效代码分享
更新时间：2015年09月07日 10:01:52 投稿：lijiao
这篇文章主要介绍了jQuery平滑旋转幻灯片特效，一个具有自己特色的幻灯片会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的幻灯片，感兴趣的小伙伴可以参考下。
本文实例讲述了jQuery平滑旋转幻灯片特效。分享给大家供大家参考。具体如下：
这一款基于jQuery实现平滑旋转幻灯片代码，效果超酷，场面相当震撼；图片大小和颜色自定义请修改jQuery-jcImgScroll.js。
运行效果图： -------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
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://www.jb51.net/" target="_blank" path="images/01.jpg" title="脚本之家 www.jb51.net"></a></li>
<li><a href="https://www.jb51.net/" target="_blank" path="images/02.jpg" title="脚本之家 www.jb51.net"></a></li>
<li><a href="https://www.jb51.net/" target="_blank" path="images/03.jpg" title="脚本之家 www.jb51.net"></a></li>
<li><a href="https://www.jb51.net/" target="_blank" path="images/04.jpg" title="脚本之家 www.jb51.net"></a></li>
<li><a href="https://www.jb51.net/" target="_blank" path="images/05.jpg" title="脚本之家 www.jb51.net"></a></li>
<li><a href="https://www.jb51.net/" target="_blank" path="images/06.jpg" title="脚本之家 www.jb51.net"></a></li>
<li><a href="https://www.jb51.net/" target="_blank" path="images/07.jpg" title="脚本之家 www.jb51.net"></a></li>
</ul>
</div>
<!-- 代码 结束 -->
<div style="text-align:center">
<p>{download}</p>
<p>{content}</p>
<p>{google_729x90}</p>
</div>
</body>
</html>
以上就是为大家分享的jQuery平滑旋转幻灯片特效代码，希望大家可以喜欢，并应用到实践中。
相关文章
jQuery异步上传文件插件ajaxFileUpload详细介绍
这篇文章主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数、错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下2015-05-05
今天说下批量删除，双击表单修改、选中行修改，增加行修改，再有就是扩展editor的方法，无需废话，直接上代码，代码中的注释写的很详细：2013-04-04
jquery animate() 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。2011-01-01
本篇文章主要是对Jquery的Tabs内容轮换效果的实现代码进行了介绍。几行代码轻松搞定2014-02-02
这篇文章主要分为以下知识：什么是Callbacks、Callbacks模型、基本模块实现、once和auto(memory)、源码和源码下载，十分的细致全面，这里推荐给大家，有需要的小伙伴参考下吧。2015-03-03
这篇文章主要介绍了jquery删除指定子元素代码实例,本文使用较简单的方法实现了这个需求,代码一看就懂,需要的朋友可以参考下2015-01-01
选择TreeView控件的树状数据节点的JS方法(jquery)
前些日子为了提高人性化选择树状权限的功能，根据树的结构用jquery写了个方法。2010-02-02
下面小编就为大家分享一篇jquery动态添加带有样式的HTML标签元素方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
基于jquery封装的一个js分页代码，需要的朋友可以参考下。2011-11-11
本篇文章主要是对jquery取消选择select下拉框示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
最新评论