轮播图

标签：int   script   mouse   appendto   css   rip   app   asc   find   

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

轮播图

标签：int   script   mouse   appendto   css   rip   app   asc   find   

原文地址：http://www.cnblogs.com/huangmin1992/p/7225947.html