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


Posted in Javascript onSeptember 10, 2015

本文实例讲述了jQuery超精致图片轮播幻灯片特效。分享给大家供大家参考。具体如下:
这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单。
运行效果图:                               -------------------查看效果 下载源码-------------------

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

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
(1)在head区域引入CSS样式:

<link href="styles/97zzw.css" rel="stylesheet" type="text/css" />

(2)js代码:

<script src="scripts/jquery.min_v1.0.js" type="text/javascript"></script>
<script src="scripts/slides.min.jquery_v1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $('#slides').slides({
 preload: true,
 preloadImage: 'images/loading.gif',
 play: 5000,
 pause: 2500,
 hoverPause: true,
 fadeSpeed: 350,
 effect: 'fade'
 });
});
</script>

为大家分享的jQuery超精致图片轮播幻灯片特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery超精致图片轮播幻灯片特效</title>
<link href="styles/97zzw.css" rel="stylesheet" type="text/css" />
</head>
<body>
<style>
ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}
ul#bcty365_nav li{float:left; display:inline; margin:10px;}
ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;}
ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微软雅黑";}
ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;}
</style> 
 <div id="focus">
 <div id="slides">
  <style type="text/css">
      ul.pagination{width:55px !important;}
    </style>
  <div class="slides_container">
  <a href="https://3water.com/" title="微车" rel="external"><img src="images/focus/weiche_banner.png" alt="微车" /></a>
  <a href="http:https://3water.com/" title="布丁电影票" rel="external"><img src="images/focus/ticket_banner.png" alt="布丁电影票" /></a>
  <a href="https://3water.com/" title="布丁优惠券" rel="external"><img src="images/focus/coupon.jpg" alt="布丁优惠券" /></a>
  </div>
 </div>
 </div>
 
<script src="scripts/jquery.min_v1.0.js" type="text/javascript"></script>
<script src="scripts/slides.min.jquery_v1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $('#slides').slides({
 preload: true,
 preloadImage: 'images/loading.gif',
 play: 5000,
 pause: 2500,
 hoverPause: true,
 fadeSpeed: 350,
 effect: 'fade'
 });
});

</script>
</body>
</html>

以上就是为大家分享的jQuery超精致图片轮播幻灯片特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
手机端转盘抽奖代码分享
Sep 10 #Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 #Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 #Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 #Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 #Javascript
js实现的动画导航菜单效果代码
Sep 10 #Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 #Javascript
You might like
php分页函数
2006/07/08 PHP
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
express express-session的使用小结
2018/12/12 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
应届毕业生自荐信
2014/05/28 职场文书
计生专干事迹
2014/05/28 职场文书
辞职信范文大全
2015/03/02 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
干部培训工作总结2015
2015/05/25 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
Redis+AOP+自定义注解实现限流
2022/06/28 Redis