轮播图(jquery)

1.）注意 首先插入Js,然后再插入自己写的Js代码，不然会无法识别

写好基础结构：

$(function(){

})

2.）addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

 

3.）removeClass() 方法从被选元素移除一个或多个类。

注释：如果没有规定参数，则该方法将从被选元素中删除所有类

 

 4.）siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的

 例如：

查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：

$("p").siblings(".selected")

 

 

 

 

 

 

$(function(){
var current=0;
var length=$(".pics-list li").length-1;
var width=$(".pics-list li").width();

function next(){
if(current >= length){
current=0;
}
else {
current++;
}

$(".points-list li").eq(current).addClass("active").siblings().removeClass("active");
$(".pics-list").css("left",-1*width * current + "px");
}

function prev(){
if(current<=0)
current=length;
else
current--;

$(".points-list li").eq(current).addClass("active").siblings().removeClass("active");
$(".pics-list").css("left",-1*width * current + "px");
}

setInterval(function(){
next();
},3000)

$(".banner-box .next").click(function(){
next();
})

$(".banner-box .prev").click(function(){
prev();
})
})