轮播图
Posted 面包_girl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图相关的知识，希望对你有一定的参考价值。
// 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();
})
以上是关于轮播图的主要内容，如果未能解决你的问题，请参考以下文章