简单实现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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
JS解密入门之凭直觉解
Jun 25 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
js获取视频时长代码
Apr 10 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 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
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php利用事务处理转账问题
2015/04/22 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python requests模块实例用法
2019/02/11 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
python和c语言哪个更适合初学者
2020/06/22 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
我的求职计划书
2014/01/10 职场文书
建材投资建议书
2014/05/16 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2015年领班工作总结
2015/04/29 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
Python Django ORM连表正反操作技巧
2021/06/13 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server
zabbix配置nginx监控的实现
2022/05/25 Servers