一款基于jquery的下拉点击改变背景图片

今天给大家介绍一款基于jquery的下拉点击改变背景图片。单击右上角的图片，下拉显示可选择的背景图片，单击图片变为背景图。效果图下：

在线预览   源码下载

实现的代码。

html代码：

  <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>

css3代码：

*
        {
            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;
        }

js代码：

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

via：http://www.w2bc.com/Article/18733