JS幻灯片可循环播放可平滑旋转带滚动导航(自写(2)


body {
margin: 0px; padding: 0px;
}
div {
margin: 0px; padding: 0px;
}
ul {
margin: 0px; padding: 0px;
}
li {
margin: 0px; padding: 0px;
}
h4 {
margin: 0px; padding: 0px;
}
p {
margin: 0px; padding: 0px;
}
body {
no-repeat 50% 0px rgb(0, 0, 0); font: 12px/1.8 arial; color: rgb(255, 255, 255); font-size-adjust: none; font-stretch: normal;
}
a {
background: rgb(102, 102, 102); padding: 2px 5px; color: rgb(255, 255, 255); text-decoration: none;
}
a:hover {
background: rgb(255, 153, 0);
}
#box {
margin: 1px auto 0px; width: 680px; height: 320px; position: relative;
}
#box ul {
width: 680px; height: 320px; position: relative;
}
#box li {
background: rgb(0, 0, 0); list-style: none; border-radius: 3px; border:0px solid rgb(0, 0, 0); left: 377px; top: 146px; width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 0; cursor: pointer;
}
#box li div {
background: rgb(0, 0, 0); width: 100%; height:40px; bottom: -100px; position: absolute; opacity: 0.7;
}
#box li div h4 {
font: 12px/24px arial; margin: 0px 10px; border-bottom-color: rgb(51, 51, 51); border-bottom-width: 1px; border-bottom-style: solid; font-size-adjust: none; font-stretch: normal;
}
#box li div h4 span {
color: red; margin-left: 10px;
}
#box li div p {
margin: 5px 10px 0px; text-indent: 2em;
}
.numbutLeft{width: 15px; height: 5px; background-color:#AFB7B6; float: left; cursor: pointer;}
.numbut{width: 15px; height: 5px; background-color:#AFB7B6; float: left; margin-left: 5px; cursor: pointer;}
.numbutCen{width: 15px; height: 5px; background-color:#FF0000; float: left; margin-left: 5px; cursor: pointer;}
.numbutLeftCen{width: 15px; height: 5px; background-color:#FF0000; float: left; cursor: pointer;}
.numbutdiv{height: 10px;width: 100%;color: red;margin-top: 0px; padding-top: 0px}
.ndv{height: 10px;width: 95px; margin: 0 auto}
#box .next {
background-position: -39px 0px; right: -60px;
}
#copyright {
text-align: center; padding-top: 10px;
}


OOOOOKKK 了,奇特的效果就要出来了 ,还有一些不完美的地方,懒得去改了,有高手可以改改看,但希望分享哦。
效果如下:

JS幻灯片可循环播放可平滑旋转带滚动导航(自写

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzpfz.html