jqueryスライダーで体の背景を変更する

Question

潜在的な背景の20pxから20pxのミニメニューを追加したいと思います。 ユーザーが1つをクリックすると、本体の背景イメージが変更され、その選択がユーザーの選択として保存されます。

私はスライダーを使用することを考えましたが、liの画像をどのように持つことができず、選択に基づいてボディCSSを変更できるようになるかわかりません。

アイデア？

ハッピー7月4日

EDIT 私は以下、そのクッキーにIMGのURLを保存するために、その動作していないカントー、クッキーでの節約が、そのクッキーのコンテンツを取得しませ

EDIT をしようとしています作品、!!!!!!!しかし、背景色は常に白である私は を追加した場合でも$("html").css("background-color","red");

FIX、URL

$("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 


$(document).ready(function() { 
$("#BGSelector a").click(function() { 
    var imgLink = $("img", this).attr("src"); 
    $.cookie("html_img", "" + imgLink + "", { expires: 7 }); 
    var imgCookieLink = $.cookie("html_img"); 
    $("html").css("background", "url('" + imgCookieLink + "')"); 
}); 
}); 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#BGSelector a").click(function() { 
     var imgLink = $("img", this).attr("src"); 
     $.cookie("html_img", "" + imgLink + "", { path: '/vitamovie', expires: 7 }); 
     var imgCookieLink = $.cookie("html_img");  
     $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top"); 
    }); 
}); 

</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
     var imgCookieLink = $.cookie("html_img"); 
     $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top"); 

}); 

</script> 

Answer 1

の終わりに、あなたが何かを「選ぶ」という点で、スライダを使用する理由は考えて色を追加していません離散。一般的に、スライダはRGB値の選択（各チャンネルは0〜255から始まる）のような連続的に変化する値のためのものです。非常に単純なJQ + CSSであなたのミニメニューの事について：

HTMLマークアップメニュー

<ul id="BGSelector"> 
    <li><a href="#ChangeBG"><img src="bgImageSource1"/></a></li> 
    <li><a href="#ChangeBG"><img src="bgImageSource2"/></a></li> 
    <li><a href="#ChangeBG"><img src="bgImageSource3"/></a></li> 
</ul> 

と魔法JQ文

// Init the bg change UI (which is within document ready) 
$(function(){ 
    $("#BGSelector a").click(function() { 
     var imgLink = $("img", this).attr("src"); 

     // change the body background css 
     $("body").css("background", "url('" + imgLink + "')"); 
    }); 
}); 

Answer 2

ため、私は同じ問題を抱えていました。これが便利なのかどうかわかりませんが、私がしていたのは

var url= data.bgimg[0] ; 
$('body').css('background-image',"url(" + url + ")"); 

です。ここで、urlは（明らかに）imgのパスです。私はjson経由で入手しましたが、あなたはそれを変更することができます。

Answer 3

var newBg = ['headercaption.gif', 'loading.gif', 'excelexport.gif', 'grid-layer.gif']; 
var path="themes/default/images/"; 
var i = 0; 
var rotateBg = setInterval(function(){ 
    $('body').css('backgroundImage' , "url('" +path+newBg[i]+ "')"); 
    if(i==4) 
    i=0; 
    else 
     i++; 
}, 5000);