轮播图

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

 

posted @ 2017-07-23 20:25  面包_girl  阅读(164)  评论(0编辑  收藏  举报
/* 鼠标点击文字特效 */