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

  • 相关阅读:
    树形结构的数据库表Schema设计-基于左右值编码
    windows下的coreseek安装及PHP调用入门
    C#string详解
    C#(Wpf)实现小键盘
    c#实现任务栏添加控制按钮
    c#解析Lrc歌词文件
    wpf仿QQ之窗体翻转
    C#(wpf)迷你词典
    wpf常见枚举收集
    最新百度音乐api
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/7225947.html
Copyright © 2011-2022 走看看