jQuery带进度条全屏图片轮播特效代码分享


Posted in Javascript onJune 28, 2020

本文实例讲述了jQuery带进度条全屏图片轮播特效。分享给大家供大家参考。具体如下:
jQuery实现的带进度条转接全屏图片轮播效果是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效代码,实现效果大气,简洁大方

运行效果图:                  -------------------查看效果 下载源码-------------------

jQuery带进度条全屏图片轮播特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
(1)在head区域引入CSS样式:

link rel="stylesheet" type="text/css" href="css/style.css">

(2)js代码:

<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>

为大家分享的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/style.css">

</head>
<body>

<div class="pic">
 <ul>
 <li style="background:url(images/bg1.jpg) center;">
 <img src="images/con1.png">
 <div class="nav"></div>
 <div class="bar"><p></p></div>
 </li>
 <li style="background:url(images/bg2.jpg) center;">
 <img src="images/con2.png">
 <div class="nav"></div>
 <div class="bar"><p></p></div>
 </li>
 <li style="background:url(images/bg3.jpg) center;">
 <img src="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>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

</div>
</body>
</html>

以上就是为大家分享的jQuery带进度条全屏图片轮播特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
js获取 type=radio 值的方法
May 09 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
JQuery实现图片轮播效果
Sep 15 #Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 #Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 #Javascript
jquery图片轮播特效代码分享
Apr 20 #Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 #Javascript
jQuery焦点图切换特效代码分享
Sep 15 #Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 #Javascript
You might like
PHP注释实例技巧
2008/10/03 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
深入理解Python爬虫代理池服务
2018/02/28 Python
Python单元测试简单示例
2018/07/03 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python 如何测试文件是否存在
2020/07/31 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
初一生物教学反思
2014/01/18 职场文书
主题党日活动总结
2014/07/08 职场文书
机关作风建设心得体会
2014/10/22 职场文书
高中班主任评语
2014/12/30 职场文书
学雷锋活动简报
2015/07/20 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js