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 相关文章推荐
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
webpack external模块的具体使用
Mar 10 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JS图片懒加载技术实现过程解析
Jul 27 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
再说下636单管机
2021/03/02 无线电
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
PHP实现的简单日历类
2014/11/29 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
YII框架关联查询操作示例
2019/04/29 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
python 模拟银行转账功能过程详解
2019/08/06 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python中的itertools的使用详解
2020/01/13 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
法学专业应届生求职信
2013/10/16 职场文书
倡议书范文
2014/04/16 职场文书
合作协议书
2014/04/23 职场文书
建筑施工安全责任书
2014/07/24 职场文书
2014企业年终工作总结
2014/12/23 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
行政复议决定书
2015/06/24 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书