html+css3+jq书写圆角的百叶窗图片切换

来源：互联网 2023-03-16 19:10:21 194

html css3 jq书写圆角的百叶窗图片切换

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

html css3 jq书写圆角的百叶窗图片切换

1相关内容未经授权抓取自百度经验

新建html文档。

html css3 jq书写圆角的百叶窗图片切换

书写hmtl代码。

div class="shutter">

div class="shutter-img"> a href="#" data-shutter-title="Iron Man">img src="images/shutter_1.jpg" alt="#">/a> a href="#" data-shutter-title="Super Man">img src="images/shutter_2.jpg" alt="#">/a> a href="#" data-shutter-title="The Hulk">img src="images/shutter_3.jpg" alt="#">/a> a href="#" data-shutter-title="The your">img src="images/shutter_4.jpg" alt="#">/a> /div>

ul class="shutter-btn">

li class="prev">/li>

li class="next">/li>

/ul>

div class="shutter-desc">

Iron Man/

/div>

html css3 jq书写圆角的百叶窗图片切换

书写css代码。

* { margin: 0; padding: 0; }

body { background-color: #333333; }

img { border: 0; vertical-align: top; }

ul, li { list-style: none; }

.shutter { overflow: hidden; width: 1000px; height: 358px; position: relative; margin: 50px auto; border-radius: 10px; }

.shutter-img { z-index: 1; }

.shutter-img, .shutter-img a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.shutter-img a { cursor: default; }

.shutter-img a > img { width: 100%; height: 100%; }

.shutter-img .created { overflow: hidden; position: absolute; z-index: 20; }

.shutter-btn { }

.shutter-btn li { position: absolute; z-index: 2; top: 50%; width: 49px; height: 49px; margin-top: -25px; cursor: pointer; }

.shutter-btn li.prev { left: 20px; background: url(../images/shutter_prevBtn.png) no-repeat 0 -49px; }

.shutter-btn li.next { right: 20px; background: url(../images/shutter_nextBtn.png) no-repeat 0 -49px; }

.shutter-desc { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: 36px; background: url(../images/shutter_shadow.png) repeat; }

.shutter-desc p { padding-left: 20px; line-height: 36px; color: #fff; font-size: 14px; }

html css3 jq书写圆角的百叶窗图片切换