<style type="text/css">
*{ margin:0px;}
.way{width:100%; height:460px; overflow:hidden; position:relative;}
ul{ padding:0px;}
ul li{ list-style:none;}
ul li img{ width:100%;}
.but{ position:absolute; width:100%; height:80px; bottom:10px;}
.butt{ width:1100px; height:80px; margin:0px auto; position:relative;}
.listimg{ width:100%; height:80px; overflow:hidden; left:0px;}
.butt ul{ width:5000px; position:relative;}
.butt ul li{ margin:0px 5px; list-style:none; float:left; }
.butt ul li img{ width:147px;height:80px;}
.listimg ul li.hava img{ border:3px solid #FF0; width:141px; height:74px;}
</style>
<body>
<div class="way">
<ul>
<li><img src="../img/pic_1.jpg" /></li>
<li><img src="../img/pic_2.jpg" /></li>
<li><img src="../img/pic_3.jpg" /></li>
<li><img src="../img/pic_4.jpg" /></li>
<li><img src="../img/pic_13.jpg" /></li>
<li><img src="../img/pic_6.jpg" /></li>
<li><img src="../img/pic_7.jpg" /></li>
<li><img src="../img/pic_8.jpg" /></li>
<li><img src="../img/pic_9.jpg" /></li>
<li><img src="../img/pic_10.jpg" /></li>
<li><img src="../img/pic_11.jpg" /></li>
<li><img src="../img/pic_12.jpg" /></li>
</ul>
<div class="but">
<div class="butt">
<img id="bb" src="../img/100.png" style="width:40px; height:40px; position:absolute; left:-40px; margin-top:20px;"/>
<img id="cc" src="../img/200.jpg" style="width:40px; height:40px; position:absolute;right:-40px; margin-top:20px;"/>
<div>
<div class="listimg">
<ul>
<li class="hava"><img src="../img/ico_1.jpg" /></li>
<li><img src="../img/ico_2.jpg" /></li>
<li><img src="../img/ico_3.jpg" /></li>
<li><img src="../img/ico_4.jpg" /></li>
<li><img src="../img/ico_13.jpg" /></li>
<li><img src="../img/ico_6.jpg" /></li>
<li><img src="../img/ico_7.jpg" /></li>
<li><img src="../img/ico_8.jpg" /></li>
<li><img src="../img/ico_9.jpg" /></li>
<li><img src="../img/ico_10.jpg" /></li>
<li><img src="../img/ico_11.jpg" /></li>
<li><img src="../img/ico_12.jpg" /></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".listimg ul li").mousemove(function(){
$(this).addClass("hava").siblings("li").removeClass("hava");
var aa=$(this).index();
$(".way ul li").eq(aa).fadeIn().siblings("li").hide();
});
var dd=0;
$ ("#cc").click(function(){
dd++;
if(dd>2){dd=2}
$(".listimg ul").animate({left:-472*dd},500);
});
$("#bb").click(function(){
dd--;
if(dd<0){dd=0}
$(".listimg ul").animate({left:-472*dd},500);
});
$(window).resize(function(){
var w=$(window).width()-40;//获取浏览器分辨率
var len=parseInt(w/147);
$(".butt").width(len*147);
})
});
</script>
</body>
浙公网安备 33010602011771号