zoukankan      html  css  js  c++  java
  • 轮播图

    // JavaScript Document

    $(function(){
    var index = 0;
    var len = $(".banner .list li").length;
    var time;
    function banner(){
      for(i=1;i<=len;i++){
        var Obtn = $("<li>"+i+"</li>").appendTo($(".banner .btn"));
      }
      $(".banner .btn li").eq(0).addClass('hover');
      $(".banner .list li").eq(0).css("z-index","1");
      $(".banner .btn li").mouseover(function(){
      index = $(".banner .btn li").index(this);
      show(index);
    })

    function play(){
      time = setInterval(function(){
        index++;
        if(index>=len){index = 0}
          show(index);
      },5000);
    }

    $('.left').on('click',function(){
      index--;
      console.log(index+'o')
      if(index<0){
      index=len-1
    }
    show(index)
    })
    $('.right').on('click',function(){
       index++;
      if(index>=len){
        index=0
      }
      show(index)
    })
    $(".banner").mouseover(function(){
      clearInterval(time)
    })
    $('.banner').on('mouseout',function(){
      play()
    })
    function show(index){
      $(".banner .list li p").removeClass('hover');
      $(".banner .list li").eq(index).find("p").addClass('hover');

      $(".banner .btn li").eq(index).addClass('hover').siblings("li").removeClass('hover');
      $(".banner .list li").eq(index).fadeIn(900).siblings("li").fadeOut(600);
    }
      play()

    }
      banner();
    })

  • 相关阅读:
    [LCA] 最近公共祖先
    [DP] D. Beautiful Array
    [模板] [拓扑序列]
    [模板] 区间筛素数
    [DP] 简单的烦恼
    [贪心] 二元组最小值最大
    [模板] 树状数组及其应用
    [Trie] 最大异或对
    [模板][二分]倍增及其应用
    ios学习记录 day31 UI 9 多视图切换 导航控制器
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/7225947.html
Copyright © 2011-2022 走看看