jQuery平滑旋转幻灯片特效代码分享_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.jb51.net/" target="_blank" path="images/01.jpg" title=" www.jb51.net"></a></li>
    <li><a href="http://www.jb51.net/" target="_blank" path="images/02.jpg" title=" www.jb51.net"></a></li>
    <li><a href="http://www.jb51.net/" target="_blank" path="images/03.jpg" title=" www.jb51.net"></a></li>
    <li><a href="http://www.jb51.net/" target="_blank" path="images/04.jpg" title=" www.jb51.net"></a></li>
    <li><a href="http://www.jb51.net/" target="_blank" path="images/05.jpg" title=" www.jb51.net"></a></li>
    <li><a href="http://www.jb51.net/" target="_blank" path="images/06.jpg" title=" www.jb51.net"></a></li>
    <li><a href="http://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幻灯片代码
, jQuery幻灯片
, jQuery幻灯片特效
, jQuery幻灯片旋转
jQuery旋转特效
jquery 幻灯片特效、jquery旋转木马特效、unity 平滑旋转、unity 摄像机平滑旋转、unity3d 物体平滑旋转,以便于您获取更多的相关知识。

时间: 2024-11-19 00:40:29

jQuery平滑旋转幻灯片特效代码分享_jquery的相关文章

jQuery超精致图片轮播幻灯片特效代码分享_jquery

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"

jquery图片轮播特效代码分享_jquery

本文实例讲述了jquery图片轮播特效.分享给大家供大家参考.具体如下: 这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效. 运行效果图:         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片轮播特效代码如下 <!DOCTYPE html> <head> <meta http-equiv=

jQuery焦点图切换特效代码分享_jquery

本文实例讲述了jQuery焦点图切换特效.分享给大家供大家参考.具体如下: 这是一款网易保健品商城网站的jQuery焦点图代码,界面简洁.时尚.大方,通用性比较强,实现过程很简单. 运行效果图:      -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc.css

jQuery手机拨号界面特效代码分享_jquery

本文实例讲述了jQuery手机拨号界面特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的手机拨号界面特效源码,是一款个性的phone网页版手机拨号界面样式代码.点击界面上数字按键可实时显示手机拨号效果,点击底部拨号键可模拟拨号通话的效果. 运行效果图:                         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery

Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)_jquery

这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,需要的朋友可以参考下 幻灯片效果描述:与前两节不同的是,这款特效可以打开页面随机选择切换方式(方向)   运行效果截图如下: 具体代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

jQuery实现图片轮播特效代码分享_jquery

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: jquery图片轮播插件PgwSlider是一款非常简单的jquery插件,它可以帮你快速创建一个垂直轮播图. 运行效果图:  小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="css/pgwslider.min.css" rel="stylesheet"> (2)js代码: <script s

jquery图片倾斜层叠切换特效代码分享_jquery

本文实例讲述了jquery图片倾斜层叠切换特效代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery.roundabout.js制作的CSS3图片倾斜层叠切换效果代码,很有层次感还可以左右切换,一款很清新的代码实例. 运行效果图:                -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 我们需要以下代码把样式和特效导入: <link rel="style

jQuery实现自动与手动切换的滚动新闻特效代码分享_jquery

本文实例讲述了jQuery实现滚动新闻特效.分享给大家供大家参考.具体如下: jQuery实现滚动新闻代码是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.有三种展示新闻的方式,自动向下循环展示,自动向上循环展示以及手动循环展示,总有一款适合你的. 运行效果图:                                -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式.

js带点自动图片轮播幻灯片特效代码分享_javascript技巧

本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc.css&qu