如何使用css3实现图片轮播和按钮

这篇文章将为大家详细讲解有关如何使用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实现图片轮播和按钮”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。