jQuery实现带进度条的轮播图


Posted in jQuery onSeptember 13, 2020

本文实例为大家分享了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 相关文章推荐
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
jQuery实现简单全选框
Sep 13 #jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
jquery实现简易验证插件封装
Sep 13 #jQuery
jQuery实现朋友圈查看图片
Sep 11 #jQuery
jQuery实现日历效果
Sep 11 #jQuery
jquery实现简单每周轮换的日历
Sep 10 #jQuery
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
js 动态选中下拉框
2009/11/26 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
js倒计时小程序
2013/11/05 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
python实现用户答题功能
2018/01/17 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
python 批量修改/替换数据的实例
2018/07/25 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python如何省略括号方法详解
2020/03/21 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
个人自荐书
2013/12/20 职场文书
校园公益广告语
2014/03/13 职场文书
美术教师岗位职责
2014/03/18 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
详解Python requests模块
2021/06/21 Python
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang