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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
vue中data里面的数据相互使用方式
Jun 05 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
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
onpropertypchange
2006/07/01 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 测试实现方法
2008/12/24 Python
详解python时间模块中的datetime模块
2016/01/13 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
python爬虫基础知识点整理
2020/06/02 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
劳动实践课感言
2014/02/01 职场文书
社区班子对照检查材料
2014/08/27 职场文书
大学生逃课检讨书
2015/05/04 职场文书
谢师宴学生答谢词
2015/09/30 职场文书