java图片特效轮播代码_js 轮播图效果

* {box-sizing:border-box}

body {font-family: Verdana,sans-serif;}.mySlides {display:none}/*幻灯片容器*/

.slideshow-container {max-width:1000px;

position:relative;

margin:auto;

}/*下一张 & 上一张 按钮*/

.prev, .next{

cursor:pointer;

position:absolute;

top: 50%;

width:auto;

margin-top: -22px;

padding:16px;

color:white;

font-weight:bold;

font-size:18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

}/*定位 "下一张" 按钮靠右*/

.next{

right: 0;

border-radius: 3px 0 03px;

}/*On hover, add a black background color with a little bit see-through*/

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);

}/*标题文本*/

.text {

color: #f2f2f2;

font-size:15px;

padding:8px 12px;