jquery左右全屏大尺寸多图滑动效果代码分享


Posted in Javascript onAugust 28, 2015

本文实例讲述了jquery左右全屏大尺寸多图滑动效果。分享给大家供大家参考。具体如下:
这是一款基于jquery实现的banner焦点图播放效果的插件,图片播放时处于满屏的状态,很具有画面感,呈现的效果更佳充实,用户的视觉体验更加具体,是一款很时尚大方的特效代码。
运行效果图:                                        -------------------查看效果 下载源码-------------------

jquery左右全屏大尺寸多图滑动效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jquery左右全屏大尺寸多图滑动效果代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery商城网站全屏多张图片滑动切换代码</title>
<link rel="stylesheet" type="text/css" href="css/slide.css"/>
</head>
<body>

<!-- 代码部分begin -->
<div class="slides">
 <div class="slideInner">
 <a href="#" style="background: url(images/slide1.jpg) no-repeat;">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div>
 </a>
 <a href="#" style="background: url(images/slide2.jpg) no-repeat">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide2p1.png" /> </div>
 </a>
 <a href="#" class="slide3" style="background: url(images/slide3.jpg) no-repeat;">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide3p1.png" /> </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide3p2.png" /> </div>
 <div class="moveElem img3" rel="300,easeInOutExpo"> <img src="images/slide3p3.png" /> </div>
 </a>
 <a href="#" style="background: rgb(113, 209, 231);">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div>
 </a>
 <a href="#" style="background: rgb(178, 44, 44);">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div>
 </a>
 </div>
 <div class="nav">
 <a class="prev" href="javascript:;"></a>
 <a class="next" href="javascript:;"></a>
 </div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/slide.js"></script>
<script >
$(document).ready(function() {
 $(".slideInner").slide({
 slideContainer: $('.slideInner a'),
 effect: 'easeOutCirc',
 autoRunTime: 5000,
 slideSpeed: 1000,
 nav: true,
 autoRun: true,
 prevBtn: $('a.prev'),
 nextBtn: $('a.next')
 })
})
</script>
<!-- 代码部分end -->

</body>
</html>

以上就是为大家分享的jquery左右全屏大尺寸多图滑动效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
基于vue.js实现购物车
Jan 15 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 #Javascript
js实现简单折叠、展开菜单的方法
Aug 28 #Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 #Javascript
js实现超简单的展开、折叠目录代码
Aug 28 #Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 #Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 #Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 #Javascript
You might like
基于mysql的bbs设计(四)
2006/10/09 PHP
PHP 字符串 小常识
2009/06/05 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python实现屏保计时器的示例代码
2018/08/08 Python
transform python环境快速配置方法
2018/09/27 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
详解Python 循环嵌套
2020/07/09 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
管理科学大学生求职信
2013/11/13 职场文书
信息系统专业个人求职信范文
2013/12/07 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
同事离别感言
2015/08/04 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL