涓嬮潰灏忕紪灏变负澶у甯︽潵涓�绡囧畬缇?/p>
JQuery
鍥剧墖鍒囨崲鏁堟灉鐨勭畝鍗曞疄鐜般�?/p>
灏忕紪瑙夊緱鎸轰笉閿欑殑锛?/p>
鐜板湪灏卞垎浜粰澶у锛屼篃缁欏ぇ瀹跺仛涓弬鑰冦�?/p>
css
锛?/p>
body { font-family:"Microsoft Yahei"; }
body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;}
img{vertical-align: top;}
/***
澶у浘鍒囨崲
***/
.scroll_view{margin: 0px auto;overflow:hidden;position: relative;}
.photo_view li{position:absolute;width: 100%;}
.photo_view
li
em,.photo_view
li
h3{position:
absolute;bottom:
0px;z-index:
1;height:
35px;line-height: 35px;width: 100%;left: 0px;}
.photo_view
li
em{z-index:
1;background:rgba(0,0,0,0.5);filter:
progid:DXImageTransform.Microsoft.gradient(
GradientType
=
0,startColorstr
=
'#50000000',endColorstr = '#50000000');_background:#000;}
.photo_view li h3{z-index: 2;text-indent: 1em;font-weight: normal;}
.photo_view li h3 a{color:#fff;}
.photo_view li h3 a:hover{color:#f60;}
.small_photo{position: absolute;bottom: 40px;right: 10px;cursor: pointer;z-index: 4;}
.small_photo li {float: left;padding-right: 10px;}
.small_photo li img{width: 80px;height: 35px;border: solid 2px #ccc;border-radius: 2px;}
.small_photo li.active img{border: solid 2px #f60;}
html
锛?/p>
<!-- start:
澶у浘鍒囨崲
-->
<div class="scroll_view">
<ul class="photo_view">
<li><img
src="images/ad1.jpg"
alt=""
class=""
/><em></em><h3><a
href="javascript:void(0);">
鍥?/p>
鐗?/p>
鏁?/p>
鏋?/p>
1</a></h3></li>
<li><img
src="images/ad2.jpg"
alt=""
class=""
/><em></em><h3><a
href="javascript:void(0);">
鍥?/p>
鐗?/p>
鏁?/p>
鏋?/p>
2</a></h3></li>
<li><img
src="images/ad3.jpg"
alt=""
class=""
/><em></em><h3><a
href="javascript:void(0);">
鍥?/p>
鐗?/p>
鏁?/p>
鏋?/p>
3</a></h3></li>
<li><img
src="images/ad4.jpg"
alt=""
class=""
/><em></em><h3><a
href="javascript:void(0);">
鍥?/p>
鐗?/p>
鏁?/p>
鏋?/p>
4</a></h3></li>
</ul>
<ul class="small_photo"></ul>
</div>
<!-- End:
澶у浘鍒囨崲
-->
js
锛?/p>