如何使用jquery水平移動全尺寸圖像滑塊

我想使用jquery創建一個完整頁面的背景圖像，我將如何水平顯示下一個圖像並隱藏以前的圖像。檢查我的HTML和CSS代碼，以及我如何處理這個問題。我正嘗試使用slidetoggle()或任何幻燈片效果來移動圖像。如何使用jquery水平移動全尺寸圖像滑塊

這裏是我的html：

<!DOCYPTE.html> 
<html lang="en"> 
<head> 

</head> 
<body> 
    <div id="center">   
    </div> 

    <div id="img"> 
     <img src="http://brainlubricator.com/wp-content/uploads/2013/11/data-center-google.jpg"> 
    </div> 
</body> 
</html>

這裏是我的CSS：

html,body 
{ 
    height:100%; 
} 

#center 
{ 
    margin-right:auto; 
    margin-left:auto; 
} 

#img 
{ 
    position:fixed; 
    top:-50%; 
    left:-50%; 
    height:200%; 
    width:200%; 
} 

#img img 
{ 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-height:50%; 
    min-width:50%; 
}

這裏是我的Jquery：

$(document).ready(function(){ 
    $("img").slidetoggle("slow"); 
});

來源

2014-02-21 chris

試試這個

<html lang="en"> 
<head> 
<style> 

html,body 
{ 
height:100%; 
} 
#center 
{ 
margin-right:auto; 
margin-left:auto; 
} 
#img 
{ 
position:fixed; 
top:-50%; 
left:-50%; 
height:200%; 
width:200%; 
} 
#img img 
{ 
position:absolute; 
top:0; 
left:0; 
right:0; 
bottom:0; 
margin:auto; 
min-height:50%; 
min-width:50%; 
} 
</style> 

    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script> 
<script> 

    jQuery(function($) { 

    var images = ['LtS_1.jpg', 'LtS_2.jpg', 'LtS_3.jpg', 'LtS_4.jpg'], 
     quotes = ['Wowingly', 'Smooth', 'Something', 'Some quote'], 
     tempR = 0, 
     n = images.length, 
     $bo = $('body'), 
     $bg = $('#bg'), 
     $qt = $('#qtext'); 


     for (var i = 0; i < n; i++) { 
      var img = new Image().src = images[i]; 
     } 

     function fader() { 
      var r = Math.floor(Math.random() * n); 
      $qt.html(quotes[r]); 
      $bg.fadeTo(0, 1).css({ backgroundImage: "url(" + images[tempR] + ")" }).fadeTo(400, 0); 
      $bo.css({ backgroundImage: "url(" + images[r] + ")" }); 
      tempR = r; 
     } 
     fader(); 

     setInterval(fader, 2000); 

    }); 
</script> 

</head> 
<body> 
<div class="bodyBG"></div> 
<div id="qtext"></div> 


</body> 
</html>

來源

2014-02-21 12:08:14 social

你可以在我的小提琴上嘗試它不工作我的結束http://jsfiddle.net/8fZKp/ – chris

在您的頁面中添加jQuery腳本引用.. – social

請參閱我編輯的區域！ – social

在烏爾jQuery的變化 ü忘記＃的選擇T現在是資本它工作

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
<script> 
    $(document).ready(function(){ 
      $("#img").slideToggle("slow"); 
     }); 
<script>

來源

2014-02-21 11:56:59

了答案這是工作，我做了幾乎 –

沒有工作http://jsfiddle.net/8fZKp/ – chris

üjQuery的 –

如何使用jquery水平移動全尺寸圖像滑塊

回答

相關問題