• 轮播图


    // 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();
    })

  • 相关阅读:
    foreach
    if
    注意事项
    Maven测试
    课程评价
    个人总结
    HTML表格CSS美化
    让多个输入框对齐
    CSS样式写在JSP代码中的几种方法
    日常
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/7225947.html
Copyright © 2020-2023  润新知