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 查找select ,并触发事件的实现代码
Mar 30 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
Angular的$http与$location
Dec 26 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
Vue数据绑定简析小结
May 07 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
如何使用vue3打造一个物料库
May 08 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
如何使用angularJs
2017/05/08 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
小程序实现tab标签页
2020/11/16 Javascript
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
详解Python 解压缩文件
2019/04/09 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python的形参和实参使用方式
2019/12/24 Python
Python 解析xml文件的示例
2020/09/29 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
python3中确保枚举值代码分析
2020/12/02 Python
abstract是什么意思
2012/02/12 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
清扬洗发水广告词
2014/03/14 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
骨干教师考核评语
2014/12/31 职场文书
工会工作个人总结
2015/03/03 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
退休欢送会致辞
2015/07/31 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis