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="http://www.phpstudy.net/" target="_blank" path="images/01.jpg" title="phpstudy www.phpstudy.net"></a></li>
    <li><a href="http://www.phpstudy.net/" target="_blank" path="images/02.jpg" title="phpstudy www.phpstudy.net"></a></li>
    <li><a href="http://www.phpstudy.net/" target="_blank" path="images/03.jpg" title="phpstudy www.phpstudy.net"></a></li>
    <li><a href="http://www.phpstudy.net/" target="_blank" path="images/04.jpg" title="phpstudy www.phpstudy.net"></a></li>
    <li><a href="http://www.phpstudy.net/" target="_blank" path="images/05.jpg" title="phpstudy www.phpstudy.net"></a></li>
    <li><a href="http://www.phpstudy.net/" target="_blank" path="images/06.jpg" title="phpstudy www.phpstudy.net"></a></li>
    <li><a href="http://www.phpstudy.net/" target="_blank" path="images/07.jpg" title="phpstudy www.phpstudy.net"></a></li>
   </ul>
 </div>
<!-- 代码 结束 -->
<div style="text-align:center">
<p>{download}</p>
<p>{content}</p>
<p>{google_729x90}</p>
</div>
</body>
</html>

以上就是为大家分享的jQuery平滑旋转幻灯片特效代码,希望大家可以喜欢,并应用到实践中。



相关阅读:
JavaScript简单实现弹出拖拽窗口(二)
div使用margin:0px auto不居中的原因分析及解决
javaScript中两个等于号和三个等于号之间的区别介绍
Windows 10正式版之前 绝对至少还有一个新版本
Win7、Win8.1升级Win10 TH2正式版详细图文教程
margin折叠的问题探讨
微信公众平台开发之语音识别.Net代码解析
jQuery实现购物车计算价格功能的方法
Win10下WP恢复工具无法安装怎么办?Win10 WP恢复工具无法安装解决方法
mysqli多查询特性 实现多条sql语句查询
Android编程之自定义锁屏实例分析
Win10 Build 10022截图大量流出 又增加了哪些新功能?
MongoDB性能篇之创建索引,组合索引,唯一索引,删除索引和explain执行计划
Windows RT 8.1 Update 3新特性曝光 9月推出
快速导航

Copyright © 2016 phpStudy |