html图片圆点切换,jQuery教程之jQuery和html+css实现带小圆点和左右按钮的轮播图

使用jQuery和HTML+CSS实现轮播图的详细教程

最新推荐文章于 2024-02-20 00:03:41 发布

转载最新推荐文章于 2024-02-20 00:03:41 发布 · 344 阅读

文章标签：

#html图片圆点切换

本文介绍了如何利用jQuery、HTML和CSS创建带小圆点和左右按钮的轮播图。通过解析CSS代码、HTML结构以及JavaScript实现的轮播图动画效果，读者将了解到轮播图的完整实现过程。文章还提供了关键代码示例，帮助读者更好地理解和应用。

本篇文章探讨了jQuery教程之jQuery和html+css实现带小圆点和左右按钮的轮播图，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

CSS代码：

/*轮播图左右按钮小白点*/

#second_div{

margin-top: 160px;

}

.img_box{

overflow: hidden;

width:100%;

height:420px;

border:1px solid;

position:relative;

}

.img_box img{

width:100%;

position:absolute;

}

.ul5{

list-style: none;

position:absolute;

left:580px;

top:565px;

}

.ul5 li{

float:left;

margin-left:20px;

width:40px;

height:5px;

border:0px;

background:lawngreen;

}

.d1,.d2{

width:50px;

height:60px;

background-color: rgba(10,10,10,0.5);

text-align: center;

font-size:26px;

font-weight: 800px;

line-height:60px;

cursor: pointer;

}

.d1{

position:absolute;

top:373px;

left:25px;

}

.d2{

position:absolute;

top:373px;

left:1445px;

}

HTML代码：

js代码：

$(document).ready(function(){

//搜索按钮

$("#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","red");

li.eq(index).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","red");

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

index=num;

next=num;

}

})

li.mouseup(function(){

t=setInterval(show,2000);

})

就是这样的！你们懂了吗？

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！