基于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带进度条全屏图片轮播代码的更多相关文章

  1. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  2. jquery-自适应全屏背景轮播动画

    实时自适应浏览器窗口大小的全屏背景轮播动画 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  3. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  4. jquery图片轮播代码

    自己写的轮播代码 来张样式效果图 先贴HTML样式 <body> <div id = "wrap"> <div id="lunbo-img& ...

  5. js 图片轮播代码编辑

    图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...

  6. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  7. jquery全屏幻灯轮播焦点图

    <!--banner s--> <div class="banner"> <div class="hd"> <ul&g ...

  8. js最简单焦点图片轮播代码

    将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.j ...

  9. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

随机推荐

  1. 关于vsftpd的refusing to run with writable root inside chroot()问题

    今天在上班帮测试的同事搭建ftp服务器时出现的一个问题 服务搭建完成后连接时报这个错误: refusing to run with writable root inside chroot() 查了资料 ...

  2. 使用loadrunner对https协议(单双向SSL)的web端性能测试 (转)

    1.项目背景 1.1 单双向SSL的含义及部署 单向SSL即我们说到的https协议. 特点是,浏览器需要请求验证服务器证书: 基本含义是:一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务 ...

  3. 在C#中判断某个类是否实现了某个接口

    有时我们需要判断某个类是否实现了某个接口(Interface),比如在使用反射机制(Reflection)来查找特定类型的时候. 简单来说,可以使用Type.IsAssignableFrom方法: t ...

  4. 原生php如何获取当前页面的url

    原生php如何获取当前页面的url? //php获取当前访问的完整url地址 function get_current_url(){ $current_url='http://'; if(isset( ...

  5. HDUOJ---1996汉诺塔VI

    汉诺塔VI Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  6. SVN标准开发布局目录,trunk,branches,tags用法详解

    http://www.cnblogs.com/newstar/archive/2011/01/04/svn.html 关于 SVN 目录结构       Subversion有一个很标准的目录结构,是 ...

  7. SDUT 2623 The number of steps (概率)

    The number of steps Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 Mary stands in a stra ...

  8. Java JNI的具体介绍

    JNI就是Java Native Interface的简称,也就是java本地接口.它提供了若干的API实现了和Java和其它语言的通信(主要是C&C++).也许不少人认为Java已经足够强大 ...

  9. 把git上的larave项目通过SourceTree安装上再通过composer安装依赖库

    1.项目地址克隆 https://gitee.com/fps2tao/laravel5.5-alitaobao.git 通过SourceTree工具下载到本地 2.在命令行方式打开项目地址安装依赖库( ...

  10. Hadoop本地库介绍及相关问题解决方法汇总

    1.hadoop本地库的作用是什么?2.哪两个压缩编码器必须使用hadoop本地库才能运行?3.hadoop的使用方法?4.hadoop本地库与系统版本不一致会引起什么错误?5.$ export HA ...