Shulou(Shulou.com)06/01 Report--

这篇文章将为大家详细讲解有关如何使用css3实现图片轮播和按钮，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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代码遇新是直朋能到：

$（"#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;functionshow（）{

next++;if（next==len）{

next=0;

}

img.eq（next）。css（"left",divW）;

img.eq（index）。animate（）;

img.eq（next）。animate（）;

li.eq（next）。css（"background","red"）;

li.eq（index）。css（"background","lawngreen"）;

index=next;

}

t=setInterval（show,2000）;functionshow1（）{

next--;if（next==-1）{

next=len-1;

}

img.eq（next）。css（"left",-divW）;

img.eq（index）。animate（）;

img.eq（next）。animate（）;

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（）;

img.eq（num）。animate（）;

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（）;

img.eq（num）。animate（）;

li.eq（num）。css（"background","red"）;

li.eq（index）。css（"background","lawngreen"）;

index=num;

next=num;

}

}）

li.mouseup（function（）{

t=setInterval（show,2000）;

}）

}）

关于"如何使用css3实现图片轮播和按钮"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.