Question

我正在尝试使用jquery创建整页背景图像，如何水平显示下一个图像并隐藏上一个图像。检查我的html和css代码以及我如何处理这个问题。我正在尝试使用slidetoggle()或任何幻灯片效果来移动图片。

这是我的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");
});

Answer 1

试试这个

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

Answer 2

更改你的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>

如何使用jquery水平移动全尺寸图像滑块

2 个答案: