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 相关文章推荐
JQuery文本框高亮显示插件代码
Apr 02 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
javascript canvas实现雨滴效果
Jun 09 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 之入门篇
2006/12/04 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python3调用R的示例代码
2018/02/23 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
自我评价怎么写好呢?
2013/12/05 职场文书
安全承诺书范文
2014/03/26 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server