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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
原生JavaScript实现拖动校验功能
Sep 29 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脚本加密专家php解密算法
2020/09/13 PHP
php编程每天必学之表单验证
2016/03/01 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
js单例模式的两种方案
2013/10/22 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
JS实现多选框的操作
2020/06/24 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python subprocess库的使用详解
2018/10/26 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
五心教育心得体会
2014/09/04 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技