简单实现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 相关文章推荐
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
ES6 十大特性简介
Dec 09 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数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
python写xml文件的操作实例
2014/10/05 Python
python 的列表遍历删除实现代码
2020/04/12 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
python中操作文件的模块的方法总结
2021/02/04 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
毕业自我鉴定
2013/11/05 职场文书
酒店个人求职信范文
2014/01/25 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
小学优秀教师材料
2014/12/15 职场文书
退休职工欢送会致辞
2015/08/01 职场文书