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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
字节飞书面试promise.all实现示例
Jun 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
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
python创建和使用字典实例详解
2013/11/01 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
python中if及if-else如何使用
2020/06/02 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
销售心得体会
2014/01/02 职场文书
高三自我评价
2014/02/01 职场文书
教师年度考核评语
2014/04/28 职场文书
小学生环保倡议书
2014/05/15 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
防火标语大全
2014/10/06 职场文书