找了一下背景换肤，自己写了一个小东西~直接上效果
接下来是源码，写的可能有点啰嗦
简单布局一下：
<body>
<input type="button" value="换肤" id="btn">
<div id="box">
<div id="con">
<a href="#" id="prev"><</a>
<a href="#" id="next">></a>
<div id="img">
<div class="img_con">
<ul class="list">
<li><img src="img/1.jpg" width="136" height="72" alt=""></li>
<li><img src="img/2.jpg" width="136" height="72" alt=""></li>
<li><img src="img/3.jpg" width="136" height="72" alt=""></li>
<li><img src="img/4.jpg" width="136" height="72" alt=""></li>
<li><img src="img/5.jpg" width="136" height="72" alt=""></li>
<li><img src="img/6.jpg" width="136" height="72" alt=""></li>
<li><img src="img/7.jpg" width="136" height="72" alt=""></li>
<li><img src="img/8.jpg" width="136" height="72" alt=""></li>
<li><img src="img/9.jpg" width="136" height="72" alt=""></li>
<li><img src="img/10.jpg" width="136" height="72" alt=""></li>
<li><img src="img/5.jpg" width="136" height="72" alt=""></li>
<li><img src="img/6.jpg" width="136" height="72" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</body>
添加点样式：
<style>
*{margin:0;padding:0;}
a{text-decoration: none;}
#btn{ width: 60px;height: 30px;border:1px solid #cacaca;border-radius: 4px;line-height: 30px;text- align: center; }
body{ background: url(img/1.jpg) no-repeat;width:1366px;height: 638px; }
#box{width: 100%;height: 120px;background: rgba(0,0,0,0.5);display: none;}
#box #con{width: 750px;height: 120px;margin:0 auto;position: relative;}
#prev,#next{width:30px;height:40px;font-size:30px;position:absolute;background: rgba(0,0,0,0.2);line-height: 40px;text-align: center;color:#fff;}
#prev{ top:38px;left:0; }
#next{ top:38px;right:0; }
#prev:hover,#next:hover{ background: rgba(0,0,0,0.7); }
#img{ width: 664px;height: 120px;margin:0 auto; position:relative;overflow: hidden;}
#img .img_con{ width: 1000%;height: 120px;position: absolute;top:0;left:0; }
.list li{ width: 136px;height: 72px;float:left;margin:15px 11px 10px 11px;border:4px solid #fff;
list-style: none;}
</style>
用jquery写，比较简单
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$('#btn').click(function(){
$('#box').slideToggle("slow");
});
$('.img_con .list li').click(function(){
var simg=$(this).find('img').attr('src');
$('body').css("background","url("+simg+")");
});
// 点击左边按钮
var num=0;
$('#prev').click(function(){
num++;
if(num>2){
num=0;
}
$('.img_con').animate({left:num*(-664)},1000);
});
// 点击右边按钮
$('#next').click(function(){
num--;
if(num<0){
num=2;
}
$('.img_con').animate({left:num*(-664)},1000);
});
});
</script>
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
