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 相关文章推荐
js动态加载以及确定加载完成的代码
Jul 31 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
Webpack如何引入bootstrap的方法
Jun 17 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
微信小程序利用云函数获取手机号码
Dec 17 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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自定义函数之递归删除文件及目录
2010/08/08 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
JS动态日期时间的获取方法
2015/09/28 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
使用matplotlib画散点图的方法
2018/05/25 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python实现图片插入文字
2019/11/26 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
python实现扫雷小游戏
2020/04/24 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
python模块内置属性概念及实例
2021/02/18 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
职称自我鉴定
2013/10/15 职场文书
大学生校园创业计划书
2014/02/08 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers