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 相关文章推荐
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
详解js类型判断
May 22 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP 第二节 数据类型之数组
2012/04/28 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
php和html的区别点详细总结
2019/09/24 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python批量发送post请求的实现代码
2018/05/05 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
RealTek面试题
2016/06/28 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
黄河的主人教学反思
2014/02/07 职场文书
报效祖国演讲稿
2014/09/15 职场文书
户籍证明模板
2014/09/28 职场文书
内勤岗位职责范本
2015/04/13 职场文书
三八节活动主持词
2015/07/04 职场文书
2015暑假打工实践报告
2015/07/13 职场文书