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

  • 相关阅读:
    传值,传引用?一切都是传地址
    前端神器sublime
    PHP中文乱码的常见解决方法总结
    css mainDiv和popbox居中
    中文系统 上传file的input显示英文
    css 任何元素都可以加背景图
    xpath的简明语法
    JQuery技巧总结
    当工作和爱情不如意的时候...
    微软2008年将发布的产品全表
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/7225947.html
Copyright © 2011-2022 走看看