简单实现jQuery进度条轮播实例代码


Posted in Javascript onJune 20, 2016

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

<div class="bannar">
      <div class="img">
        <ul>
          <li style="background:url(img/1.jpg);display:block;"></li>
          <li style="background:url(img/2.jpg);"></li>
          <li style="background:url(img/3.jpg);"></li>
          <li style="background:url(img/4.jpg);"></li>
        </ul>
      </div>
      <div class="text">
        <ul>
          <li>0</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="nav">
        <ul>
          <li><p></p></li>
          <li><p></p></li>
          <li><p></p></li>
          <li><p></p></li>
        </ul>
      </div>
    </div>

CSS: 

<style>
    *{
      margin:0 auto;
      padding:0;
    }
    
    .bannar{
      width:100%;
      height:490px;
      position:relative;
    }
    .img{
      width:100%;
      height:490px;
      overflow:hidden;
    }
    .img ul li{
      width:100%;
      height:490px;
      list-style-type: none;
      display:none;
    }
    .text{
      width:1000px;
      height:6px;
      position:absolute;
      bottom:28px;
      left:50%;
      margin-left:-500px;
    }
    .nav{
      width:1000px;

      height:10px;
      position:absolute;
      bottom:4px;
      left:50%;
      margin-left:-500px;
    }
    .text ul li{
      width:200px;
      height:100%;
      float:left;
      margin-left:38px;
      list-style-type: none;
      
    }
    .nav ul li{
      width:200px;
      height:10px;
      
      float:left;
      margin-left:38px;
      list-style-type: none;
      background:gray;
    }
    .nav ul li p{
      width:0px;
      height:100%;
      background:red;
      float:left;
    }
  </style>

Javascript: 

<script>
      var i=0;
      var time_id=null;
      function auto(){
        $(".nav ul li").eq(i).find("p").animate({
          "width":"200px"
        },3900,function(){
          i++;
          $(this).css("width", '0px');
          if(i>3){
            i=0;
          }
          $(".img ul li").eq(i).fadeIn(300).siblings().fadeOut(300);
        });
      }

      time_id=setInterval("auto()",4000);
      
      $(".text ul li").click(function(){
        $(".nav ul li").find("p").stop().css("width","0px");
        clearInterval(time_id);
        i=$(this).index();
        $(".img ul li").eq(i).fadeIn().siblings().fadeOut();
        auto();
        time_id=setInterval("auto()",4000);
      });

      $(".nav ul li").click(function(){
        $(".nav ul li").find("p").stop().css("width","0px");
        clearInterval(time_id);
        i=$(this).index();
        $(".img ul li").eq(i).fadeIn().siblings().fadeOut();
        auto();
        time_id=setInterval("auto()",4000);
      })
      
    </script>

效果图:

简单实现jQuery进度条轮播实例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 #Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 #Javascript
jQuery插件 Jqplot图表实例
Jun 18 #Javascript
jqPlot jQuery绘图插件的使用
Jun 18 #Javascript
jQuery获取radio选中项的值实例
Jun 18 #Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 #Javascript
jQuery解决$符号命名冲突
Jun 18 #Javascript
You might like
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python补齐字符串长度的实例
2018/11/15 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
小学教师管理制度
2014/01/18 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
民主生活会意见
2015/06/05 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL