脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery轮播图

jQuery实现带进度条的轮播图

 更新时间：2020年09月13日 13:12:14   作者：暗锁读客  
这篇文章主要为大家详细介绍了jQuery实现带进度条的轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现带进度条轮播图的具体代码，供大家参考，具体内容如下

1.html模块

<div class="banner">
 <ul>
 <li style="background: url(img/bg1.jpg) center;">
  <img src="img/con1.png" />
  <div class="nav"></div>
  <div class="bar">
  <p></p>
  </div>
 </li>
 <li style="background: url(img/bg2.jpg) center;">
  <img src="img/con2.png" />
  <div class="nav"></div>
  <div class="bar">
  <p></p>
  </div>
 </li>
 <li style="background: url(img/bg3.jpg) center;">
  <img src="img/con3.png" />
  <div class="nav"></div>
  <div class="bar">
  <p></p>
  </div>
 </li>
 </ul>
</div>

2.css模块

<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 list-style: none;
 }
 .banner{
 width: 100%;
 height: 600px;
 position: relative;
 }
 ul li{
 width: 100%;
 height: 600px;
 position: absolute;
 top: 0;
 left: 0;
 overflow:hidden;
 }
 ul li img{
 width: 100%;
 height: 600px;
 position: absolute;
 left: -100%;
 }
 .nav{
 width: 100%;
 height: 70px;
 background: rgba(255,255,255,0.3);
 position: absolute;
 bottom: 0;
 }
 .bar{
 width: 80%;
 height: 3px;
 background-color: #999;
 position: absolute;
 bottom: 0;
 left: 10%;
 }
 .bar p{
 width: 0px;
 height: 3px;
 background-color: green;
 }
</style>

3.jQuery模块

<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 var i=0;//定义当前索引
 imgChange();//初始化调用
 //定时切换
 setInterval("imgChange()",6000);
 //图片轮播的函数
 function imgChange(){
 //进度条完成后显示下一张背景
 $("ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
 //初始化文字图片---设置到外部
 $("ul li").eq(i).find("img").css("left","-100%");
 //初始化进度条
 $("ul li").eq(i).find("p").css("width","0px");
 //设置文字图片从左进入的动画
 $("ul li").eq(i).find("img").animate({"left":"0px"},500,function(){
  //设置进度条动画
  $("ul li").eq(i).find("p").animate({"width":"100%"},5000,function(){
  $("ul li").eq(i).find("img").animate({left:"100%"},400);
  //改变当前索引，当索引为最后一个则设为0，否则就加一
  if(i>=$("ul li").length-1){
  i=0
  }else{
  i++;
  }
  })
 })
 }
</script>

4.方法二

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>带进度条的轮播图</title>
 <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 $(function () {
 // 初始环境
 var i=0,m;
 tin(i);
 // 定时器
 m=setInterval(function () {
  if (i>=2) {
  i=0;
  }else{
  i++; 
  }
  tin(i);
 },5000);
 })
 // 动画效果
 var tin = function (i) {
  $(".cont li").eq(i).find("img").css("left","-100%");
  $(".bar span").css("width","0%");
  $(".cont li").eq(i).fadeIn(100).siblings().fadeOut(100);
  $(".cont li").eq(i).find("img").animate({left:"0%"},1000);
  $(".bar span").animate({width:"100%"},4500,function () {
  $(".cont li").eq(i).find("img").animate({left:"100%"},400);
  });
 }
 </script>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 list-style: none;
 }
 .box{
 width: 100%;
 height: 630px;
 position: relative;
 }
 .cont{
 width: 100%;
 height: 630px;
 position: relative;
 overflow: hidden;
 }
 .cont li{
 width: 100%;
 height: 630px;
 position: absolute;
 top: 0;
 left: 0;
 }
 .bar{
 width: 70%;
 height: 3px;
 position: absolute;
 bottom: 0px;
 left: 15%;
 background-color: white;
 border-radius: 50px;
 }
 .bar span{
 width: 0px;
 display: block;
 height: 80%;
 background-color: green;
 border-radius: 50px;
 }
 .cont li img{
 width: 100%;
 height: 630px;
 position: absolute;
 left: -100%;
 top: 0;
 }
 .con1{
 background: url(img/bg1.jpg) center;
 }
 .con2{
 background: url(img/bg2.jpg) center;
 }
 .con3{
 background: url(img/bg3.jpg) center;
 }
 .pav{
 width: 100%;
 height: 70px;
 position: absolute;
 bottom: 0px;
 background-color: rgba(255,255,255,0.3);
 }
 </style>
 </head>
 <body>
 <div id="main">
 <div id="box" class="box">
 <!--图片-->
 <ul class="cont">
  <li class="con1"><img src="img/con1.png"/></li>
  <li class="con2"><img src="img/con2.png"/></li>
  <li class="con3"><img src="img/con3.png"/></li>
 </ul>
 <div class="pav"></div>
 <!--进度条-->
 <div class="bar">
  <span></span>
 </div>
 </div>
 </div>
 </body>
</html>

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jquery form表单提交插件asp.net后台中文解码

    jquery form表单提交插件asp.net后台中文解码

    对于jquery form表单提交插件jquery.form.js，在提交表单数据时，如果表单数据有中文，则被提交的数据是要经过编码的。
    2010-06-06
  • jquery原理以及学习技巧介绍

    jquery原理以及学习技巧介绍

    JQuery上手简单，也很容易学，即使是刚接触JQuery的开发人员，借助JQuery手册，也很快能在项目中使用开发，这篇文章针对jquery原理以及学习技巧进行介绍，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 利用jQuery异步上传文件的插件用法详解

    利用jQuery异步上传文件的插件用法详解

    这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下
    2017-07-07
  • jCallout 轻松实现气泡提示功能

    jCallout 轻松实现气泡提示功能

    在提交表单前、焦点转移后或者 keyup 时往往需要对输入的文本就行检验，如果输入内容不符合相关约定则要进行提示或警告，有一个叫 jCallout 的插件可以轻松实现该功能，该插件基于 jQuery 使用，所以使用前需要添加引用 jQuery
    2013-09-09
  • jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理

    jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理

    这篇文章主要介绍了jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理的相关资料,需要的朋友可以参考下
    2015-11-11
  • jQuery样式操作方法整理介绍

    jQuery样式操作方法整理介绍

    这篇文章主要介绍了jQuery样式操作方法，并通过实际案例更浅显的理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • jquery实现浮动的侧栏实例

    jquery实现浮动的侧栏实例

    这篇文章主要介绍了jquery实现浮动的侧栏,实例分析了基于jQuery的stickySidebar插件实现浮动层的相关技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery实现圣诞节礼物传送（花式轮播）

    jQuery实现圣诞节礼物传送（花式轮播）

    本文主要对jQuery实现圣诞节礼物传送的方法、思路进行详细介绍，具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • jQuery文件上传控件 Uploadify 详解

    jQuery文件上传控件 Uploadify 详解

    本文主要介绍jQuery文件上传控件 Uploadify的用法，原作者做了非常详细的备注，有需要的朋友可以参考一下。
    2016-06-06
  • 事件冒泡是什么如何用jquery阻止事件冒泡

    事件冒泡是什么如何用jquery阻止事件冒泡

    什么是事件起泡：一个事件不能凭空产生，这就是事件的发生等等，接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证，感兴趣的朋友可以参考下哈
    2013-03-03

最新评论