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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现评论模块
Aug 19 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP 编写大型网站问题集
2010/05/07 PHP
PHP 图片上传代码
2011/09/13 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python实现公司年会抽奖程序
2019/01/22 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python字符串的index和find的区别详解
2020/06/20 Python
python爬虫---requests库的用法详解
2020/09/28 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
六五普法规划实施方案
2014/03/21 职场文书
刘公岛导游词
2015/02/05 职场文书
针对吵架老公保证书
2015/05/08 职场文书
入党群众意见范文
2015/06/02 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
python获取对象信息的实例详解
2021/07/07 Python