<a href="#" class="but"></a><div id="hf"><div class="con"><img src="data:images/left.png" class="left" /><img src="data:images/right.png" class="right" /><div class="scroll"><div class="scrollCon"><ul><li><img src="data:images/99-1.jpg" /></li><li><img src="data:images/11-1.jpg" /></li><li><img src="data:images/55-1.jpg" /></li><li><img src="data:images/33-1.jpg" /></li><li><img src="data:images/44-1.jpg" /></li><li><img src="data:images/55-1.jpg" /></li><li><img src="data:images/99-1.jpg" /></li><li><img src="data:images/44-1.jpg" /></li><li><img src="data:images/55-1.jpg" /></li><li><img src="data:images/99-1.jpg" /></li><li><img src="data:images/11-1.jpg" /></li><li><img src="data:images/33-1.jpg" /></li></ul></div></div></div></div>

*{margin: 0px;padding: 0px;}body{background: url('images/55.jpg');}.but{width: 50px;height: 50px;background: url('images/rtop_1.png');display: block;position: fixed;top: 0px;right: 0px;}.but:hover{background: url('images/rtop_2.png');}#hf{width: 100%;height: 200px;background: rgba(0,0,0,0.5);display: none;}#hf .con{width: 1200px;height: 200px;margin: 0 auto;position: relative;}#hf .con .left{position: absolute;top: 70px;left: 0px;cursor: pointer;}#hf .con .right{position: absolute;top: 70px;right: 0px;cursor: pointer;}#hf .con .scroll{width: 1080px;height: 200px;overflow: hidden;margin: 0 auto;position: relative;}#hf .con .scroll .scrollCon{width: 1000%;height: 200px;position: absolute;left: 0px;top: 0px;}.scroll .scrollCon ul li{list-style: none;width: 240px;height: 140px;border: 3px solid #fff;float: left;margin-left: 12px;margin-right: 12px;margin-top: 20px;cursor: pointer;}

$(".but").click(function(){$("#hf").slideToggle("slow");
});
<!-- 点击换body图 -->
$(".scrollCon ul li").click(function(){var simg=$(this).find("img").attr("src");var bimg=simg.replace(/-\d*/,'');  //根据小图找到大图的名称$("body").css("background","url("+bimg+")");//url("+bimg+"),添加 变量的方法

});
<!-- 点击左边按钮 -->
var click_num=0; //初始点击次数

$(".left").click(function(){click_num++;       //click_num+1if(click_num>2){click_num=0;}$(".scrollCon").animate({left:click_num*(-1080)},300);
});
$(".right").click(function(){click_num--;       //click_num+1if(click_num<0){click_num=2;}$(".scrollCon").animate({left:click_num*(-1080)},300);
});