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获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现动态加载瀑布流
Sep 01 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
UCenter 批量添加用户的php代码
2012/07/17 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
Three.js快速入门教程
2016/09/09 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
webpack之devtool详解
2018/02/10 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
python模拟enum枚举类型的方法小结
2015/04/30 Python
python中正则的使用指南
2016/12/04 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python多进程间通信代码实例
2019/09/30 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python线程threading模块用法详解
2020/02/26 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
keras 权重保存和权重载入方式
2020/05/21 Python
详解Anaconda 的安装教程
2020/09/23 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
给老师的保证书怎么写
2015/05/09 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
Javascript之datagrid查询详解
2021/09/15 Javascript
详解Vue slot插槽
2021/11/20 Vue.js
关于Redis的主从复制及哨兵问题
2022/06/16 Redis