基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码。这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效。效果图如下:
实现的代码。
html代码:
<div class="pic">
<ul>
<li style="background: url(images/bg1.jpg) center;">
<img src="data:images/con1.png">
<div class="nav">
</div>
<div class="bar">
<p>
</p>
</div>
</li>
<li style="background: url(images/bg2.jpg) center;">
<img src="data:images/con2.png">
<div class="nav">
</div>
<div class="bar">
<p>
</p>
</div>
</li>
<li style="background: url(images/bg3.jpg) center;">
<img src="data:images/con3.png">
<div class="nav">
</div>
<div class="bar">
<p>
</p>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i = 0;
jummper();
function jummper() {
$(".pic ul li").eq(i).find("img").css("left", "-1180px");
$(".pic ul li").eq(i).find("p").css("width", "0px");
$(".pic ul li").eq(i).find("img").animate({ left: "0px" }, 500, function () {
//当图片移动完成后再加载进度条
//alert("当图片移动完成后再做操作");
$(".pic ul li").eq(i).find("p").animate({ width: "1174px" }, 8000, function () {
$(".pic ul li").eq(i).find("img").animate({ left: "1180px" }, 500, function () {
i++;
if (i > 2)
i = 0;
$(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
});
});
});
}
setInterval("jummper()", 9100);
</script>
via:http://www.w2bc.com/Article/35027
基于jQuery带进度条全屏图片轮播代码的更多相关文章
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
- jquery-自适应全屏背景轮播动画
实时自适应浏览器窗口大小的全屏背景轮播动画 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- jquery图片轮播代码
自己写的轮播代码 来张样式效果图 先贴HTML样式 <body> <div id = "wrap"> <div id="lunbo-img& ...
- js 图片轮播代码编辑
图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
- jquery全屏幻灯轮播焦点图
<!--banner s--> <div class="banner"> <div class="hd"> <ul&g ...
- js最简单焦点图片轮播代码
将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.j ...
- 全新jquery多点滑动幻灯片——全屏动画animateSlide
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...
随机推荐
- 关于vsftpd的refusing to run with writable root inside chroot()问题
今天在上班帮测试的同事搭建ftp服务器时出现的一个问题 服务搭建完成后连接时报这个错误: refusing to run with writable root inside chroot() 查了资料 ...
- 使用loadrunner对https协议(单双向SSL)的web端性能测试 (转)
1.项目背景 1.1 单双向SSL的含义及部署 单向SSL即我们说到的https协议. 特点是,浏览器需要请求验证服务器证书: 基本含义是:一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务 ...
- 在C#中判断某个类是否实现了某个接口
有时我们需要判断某个类是否实现了某个接口(Interface),比如在使用反射机制(Reflection)来查找特定类型的时候. 简单来说,可以使用Type.IsAssignableFrom方法: t ...
- 原生php如何获取当前页面的url
原生php如何获取当前页面的url? //php获取当前访问的完整url地址 function get_current_url(){ $current_url='http://'; if(isset( ...
- HDUOJ---1996汉诺塔VI
汉诺塔VI Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...
- SVN标准开发布局目录,trunk,branches,tags用法详解
http://www.cnblogs.com/newstar/archive/2011/01/04/svn.html 关于 SVN 目录结构 Subversion有一个很标准的目录结构,是 ...
- SDUT 2623 The number of steps (概率)
The number of steps Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 Mary stands in a stra ...
- Java JNI的具体介绍
JNI就是Java Native Interface的简称,也就是java本地接口.它提供了若干的API实现了和Java和其它语言的通信(主要是C&C++).也许不少人认为Java已经足够强大 ...
- 把git上的larave项目通过SourceTree安装上再通过composer安装依赖库
1.项目地址克隆 https://gitee.com/fps2tao/laravel5.5-alitaobao.git 通过SourceTree工具下载到本地 2.在命令行方式打开项目地址安装依赖库( ...
- Hadoop本地库介绍及相关问题解决方法汇总
1.hadoop本地库的作用是什么?2.哪两个压缩编码器必须使用hadoop本地库才能运行?3.hadoop的使用方法?4.hadoop本地库与系统版本不一致会引起什么错误?5.$ export HA ...