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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jquery实现图片放大镜效果
Dec 23 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
AM/FM收音机的安装与调试
2021/03/02 无线电
Smarty模板快速入门
2007/01/04 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python中文件的读取和写入操作
2018/04/27 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
python文件排序的方法总结
2020/09/13 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
银行求职信怎么写
2014/05/26 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python