电话
13363039260
dw怎么用css做图片轮播
2024-01-18 10:10 小编
这个html很简单，就设置了两个div,一个放置img，一个设置下面的12345图标，当点击1~5的时候，会链接到相应的图片，而图片的切换效果最终还是由#imagesimg和#imagesimg:target的属性来设置的。
HTML
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>HowtoCreateAnImageSliderWithPureCSS3</title>
<linkhref="images.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<h1>CSS3ImageSlider</h1>
<divid="images">
<imgid="image1"src="./images/1.jpg"/>
<imgid="image2"src="./images/2.jpg"/>
<imgid="image3"src="./images/3.jpg"/>
<imgid="image4"src="./images/4.jpg"/>
<imgid="image5"src="./images/5.JPG"/>
</div>
<divid="slider">
<ahref="#image1">1</a>
<ahref="#image2">2</a>
<ahref="#image3">3</a>
<ahref="#image4">4</a>
<ahref="#image5">5</a>
</div>
</body>
</html>
CSS
@CHARSET"UTF-8";
body{
background-image:url("./images/sdl(31).png");
background-attachment:fixed;
}
h1{
font:bold35px/60pxHelvetica,Arial,Sans-serif;
text-align:center;color:#eee;
text-shadow:0px2px6px#333;
}
#images{
width:400px;
height:600px;
overflow:hidden;
position:relative;
margin:20pxauto;
}
#imagesimg{
width:400px;
height:600px;
position:absolute;
top:0;
left:-400px;
z-index:1;
opacity:1;
transition:alllinear500ms;
-o-transition:alllinear500ms;
-moz-transition:alllinear500ms;
-webkit-transition:alllinear500ms;
}
#imagesimg:target{
left:0;
z-index:9;
opacity:1;
}
#imagesimg:first-child{
left:0;
}
#slider{
width:150px;
height:30px;
margin:20pxauto;
}
#slidera{
text-decoration:none;
background:#45b97c;
border:1pxsolid#C6E4F2;
padding:4px6px;
color:#222;
margin:20pxauto;
}
#slidera:hover{
background:#C6E4F2;
}
猜你喜欢
联络方式：
13363039260
微信二维码 