Js轮播切换的原理;怎么实现轮播句柄与按钮的互动

2022-08-16 社会 23阅读
回答完毕,劳心费力,将心比心,采纳即可。

HTML>



轮播

#box {
margin: auto;
width: 400px;
height: auto;
position: relative;
overflow: hidden;
background: #ccc;
}

.Ctn {
width: 380px;
margin: 10px auto;
background: red;
height: 380px;
transition: all 0.35s linear 0s;
-moz-transition: all 0.35s linear 0s;
-webkit-transition: all 0.35s linear 0s;
-o-transition: all 0.35s linear 0s;
}

.Nav {
width: 300px;
height: 44px;
background: pink;
position: absolute;
left: 50px;
bottom: 30px;
}

.Nav a {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
margin: 2px;
background: blue;
float: left;
display: inline-block;
}

.next {
width: 40px;
height: 40px;
background: #CC3;
text-align: center;
line-height: 40px;
color: green;
font-size: 12px;
position: absolute;
top: 180px;
left: 20px;
}

.prev {
width: 40px;
height: 40px;
background: #CC3;
text-align: center;
line-height: 40px;
color: green;
font-size: 12px;
position: absolute;
top: 180px;
right: 20px;
}

.abc {
background: red !important;
box-shadow: 0 0 3px #690;
-webkit-box-shadow: 0 0 3px #690;
-moz-box-shadow: 0 0 3px #690;
border: 1px #b4c88b solid;
}







上一张
下一张


声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com