html图片圆点切换,JQuery和html+css实现带小圆点和左右按钮的轮播图实例

搜索按钮

$("#ss").click(function(){

var new_li = $("

"+ $("#skuang").val() +"");

$("#d1 ul").append(new_li);

$("#d1").hide();

$("#skuang").val("");

})

$("#skuang").focus(function(){

$("#d1").css("display","block");

});

$("#skuang").blur();

$("#qingch").click(function(){

$("#d1 li:gt(0)").remove();

$("#d1").hide();

});

//轮播图

var img=$(".img_Box img");

var li=$(".ul5 li");

var divW=$(".img_Box").width();

var len=$(".img_Box img").length;

img.css("left",divW);

img.eq(0).css("left",0);

li.eq(0).css("background","red");

var index=0;

var next=0;

function show(){

next++;

if(next==len){

next=0;

}

img.eq(next).css("left",divW);

img.eq(index).animate({"left":-divW});

img.eq(next).animate({"left":0});

li.eq(next).css("background","red");

li.eq(index).css("background","lawngreen");

index=next;

}

t=setInterval(show,2000);

function show1(){

next--;

if(next==-1){

next=len-1;

}

img.eq(next).css("left",-divW);

img.eq(index).animate({"left":divW});

img.eq(next).animate({"left":0});

li.eq(next).css("background","lawngreen");

index=next;

}

img.hover(function(){

clearInterval(t);

},function(){

t=setInterval(show,2000);

})

//左右按钮

$(".d2").mousedown(function(){

clearInterval(t);

show();

})

$(".d2").mousedown(function(){

t=setInterval(show,2000);

})

$(".d1").mousedown(function(){

clearInterval(t);

show1();

})

$(".d1").mousedown(function(){

t=setInterval(show,2000);

})

//小白点 点击

li.mousedown(function(){

num=$(this).index();

if(num==next){

return;

}else if(num

clearInterval(t);

img.eq(num).css("left",-divW);

img.eq(index).animate({"left":divW});

img.eq(num).animate({"left":0});

li.eq(num).css("background","red");

li.eq(index).css("background","lawngreen");

index=num;

next=num;

}else if(num>next){

clearInterval(t);

img.eq(num).css("left",divW);

img.eq(index).animate({"left":-divW});

img.eq(num).animate({"left":0});

li.eq(num).css("background","lawngreen");

index=num;

next=num;

}

})

li.mouseup(function(){

t=setInterval(show,2000);

})

})