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 相关文章推荐
JavaScript中读取和保存文件实例
May 08 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
手机端转盘抽奖代码分享
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编码规范之注释和文件结构说明
2010/07/09 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
js实现索引图片切换效果
2015/11/21 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python2 与python3的print区别小结
2018/01/16 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
在django view中给form传入参数的例子
2019/07/19 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python入门之井字棋小游戏
2020/03/05 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
暑期社会实践方案
2014/02/05 职场文书
建筑工地大门标语
2014/06/18 职场文书
生产设备维护保养制度
2015/08/06 职场文书
筑梦中国心得体会
2016/01/18 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL