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 表单验证类介绍与实例
Jun 09 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
JS实现复制功能
Mar 01 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
js注册时输入合法性验证方法
Oct 21 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
微信小程序自定义胶囊样式
Dec 27 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
我的论坛源代码(二)
2006/10/09 PHP
php动态生成JavaScript代码
2009/03/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
解析php入库和出库
2013/06/25 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
javascript求日期差的方法
2016/03/02 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
python yield和Generator函数用法详解
2020/02/10 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
排球赛新闻稿
2015/07/17 职场文书