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中的prototype和constructor简明总结
Apr 05 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
浅析Jquery操作select
Dec 13 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
小程序实现tab标签页
Nov 16 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
对VUE中的对象添加属性
2018/09/18 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
pandas删除指定行详解
2019/04/04 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
Java面试题及答案
2012/09/08 面试题
后备干部考察材料
2014/02/12 职场文书
八项规定整改方案
2014/02/21 职场文书
委托书的格式
2014/08/01 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
Pandas数据结构之Series的使用
2022/03/31 Python
Redis分布式锁的7种实现
2022/04/01 Redis
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技