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实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
js常用代码段收集
2011/10/28 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python实现中文文本分句的例子
2019/07/15 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python map及filter函数使用方法解析
2020/08/06 Python
影视后期实训报告
2014/11/05 职场文书
教师节主题班会方案
2015/08/17 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
Python字符串格式化方式
2022/04/07 Python