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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 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
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
Python3实现定时任务的四种方式
2019/06/03 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
阿德的梦教学反思
2014/02/06 职场文书
大学军训感言800字
2014/02/27 职场文书
高中教师考核方案
2014/05/18 职场文书
化妆品活动策划方案
2014/05/23 职场文书
开展创先争优活动总结
2014/08/28 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
绿里奇迹观后感
2015/06/15 职场文书
环保建议书作文400字
2015/09/14 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android