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


Posted in Javascript onSeptember 15, 2015

本文实例讲述了jQuery超精致图片轮播幻灯片特效。分享给大家供大家参考。具体如下:
jquery图片轮播插件PgwSlider是一款非常简单的jquery插件,它可以帮你快速创建一个垂直轮播图。
运行效果图: 

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

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

<link href="css/pgwslider.min.css" rel="stylesheet">

(2)js代码:

<script src="js/jquery.min.js"></script>
<script src="js/pgwslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(document).ready(function() {
 $('.pgwSlider').pgwSlider();
 });
});
</script>

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery图片轮播插件PgwSlider</title>
<link href="css/pgwslider.min.css" rel="stylesheet">
<style type="text/css">
body { margin: 0px; background-color: #000000; }
.m{ width: 800px; height: 600px; margin-left: auto; margin-right: auto; margin-top: 10%; }
</style>
<script src="js/jquery.min.js"></script>
<script src="js/pgwslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(document).ready(function() {
 $('.pgwSlider').pgwSlider();
 });
});
</script>
</head>

<body>
<div class="m">
 <ul class="pgwSlider">
 <li><img src="img/paris.jpg" alt="Paris, France" data-description="Eiffel Tower and Champ de Mars"></li>
 <li><img src="img/new-york.jpg" alt="Montréal, QC, Canada" data-large-src="img/new-york.jpg"></li>
 <li> <img src="img/shanghai.jpg"> <span>Shanghai, China</span> </li>
 <li> <img src="img/new-york.jpg"> <span>New York, NY, USA</span> </a> </li>
 </ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

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

Javascript 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
js实现密码强度检验
Jan 15 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 #Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 #Javascript
JQuery实现图片轮播效果
Sep 15 #Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 #Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 #Javascript
jquery图片轮播特效代码分享
Apr 20 #Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 #Javascript
You might like
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python 串口通信的实现
2020/09/29 Python
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
担保书怎么写
2014/04/01 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
大学毕业生个人总结
2015/02/28 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
大学生村官入党自传
2015/06/26 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
《绝招》教学反思
2016/02/20 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android