Как перемещать ползунок полноразмерного изображения по горизонтали с помощью 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

ответ

Смежные вопросы