交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 简单实现jQuery进度条轮播实例代码

    本文实例为大家分享了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轮播的实现方式 附完整实例
    • 完美实现八种js焦点轮播图(下篇)
    • 完美实现八种js焦点轮播图(上篇)
    • 简单实现轮播图效果的实例
    • 基于JavaScript实现轮播图代码
    • jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
    • jQuery插件实现图片轮播特效
    • 轮播的简单实现方法

    广而告之:
    热门推荐:
    搜索引擎收录网站但是不给关键词排名的原因与解决方法

    我相信这个问题已经被一些站长遇到了,他们做的网站每天都有规律和定量的更新,而且被收录的速度也相当快。但是根据百度的统计,流量看不到,搜索排名也找不到。  没有排名,就没有流量,造成这类问题的主要因素是什么?  1、网站定位  这个共同···

    javascript实现类似超链接的效果

    实现类似超链接的效果,this代表本页面元素 复制代码 代码如下: <html> <head> <script type="text/javascript"> function mOver(obj){     obj.color="red"; } function mOut(obj){     obj.color="blue"; } </scr···

    一个XML格式数据转换为图表的例子

    源文档模板文档(这里收缩了js代码,代码放在CDATA段里) 源文档 模板文档(这里收缩了js代码,代码放在CDATA段里) 结果 这个例子使用的是转换为VML的语法,换成其他如SVG的语法,就可以转换成为SVG图形,单元数量可以任意加。 其实还有更多已经完成的例子···

    SEO云优化:扒扒当年网易的时运

     今天这篇可以认为是昨天的续文“有些东西,你学不来”的昨天发完后呢,网上突然出现一篇热文,是丁磊的专访,说时间窗口并没那么重要。有个朋友就转给我,说,你看,丁磊打你脸了。   当然,这只是一个巧合。不过我突然觉得这事可以说道说道,而且也可以···

    浅析Angular 实现一个repeat指令的方法

    在项目中常常会使用 ngFor指令,之前只会使用它,具体如何实现的却不得而知。终于这几天有时间"研究"了下它是如何实现的,顺便自己写个简单的 ngFor指令:repeat 说到指令就不得不提一下TemplateRef和ViewContainerRef TemplateRef 可以理解为dom渲染模板,指令通过TemplateRef···

    学习ExtJS Panel常用方法

     一、属性 frame:布尔类型true 或 false ,为true时表示边框为圆角且具有背景色,取false则反之。 xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:"textfiled",表示使用Ext.form.TextFile来进行初···

    mysql常用命令行操作语句

    第一招、mysql服务的启动和停止 net stop mysql net start mysql 第二招、登陆mysql 语法如下: mysql -u用户名 -p用户密码 键入命令mysql -uroot -p, 回车后提示你输入密码,输入12345,然后回车即可进入到mysql中了,mysql的提示符是: mysql> 注意,如果是连接到另外···

    php开发论坛系统

    1、总体设计 前端的一些东西 都可以点的,论坛点进去 index.php <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi···

    Vue动态生成表格的行和列

    当在开发项目的时候,固定的页面表格标题及内容不能满足需求,需要根据不同的需求动态加载不同的表格表头和表格的内容,具体的实现代码如下: <template> <div class="boxShadow"> <div style="margin-top: 20px"> <el-table :data="tables" r···

    js AspxButton的客户端操作

    javascript调用父窗口(父页面)的方法 window.parent与window.opener的区别 javascript调用主窗口方法 1: window.parent 是iframe页面调用父页面对象 2: window.opener 是window.open 打开的子页面调用父页面对象 具体例子就不写了。 DevExpress.Web控件中的AspxButt···