Question

我正在尝试创建一个简单的网站，其中只包含旋转木马内的背景图像，这些图像将从左向右移动，带有方向箭头。我找到了一个提供简单示例的资源，但是当我尝试重现他们的模型时，脚本似乎没有自己定义。此外，还有第二个问题，实际上是全屏，因为演示只有700x500。

以下是资源的链接：Dynamic Drive。

此外，这是我的HTML

<!DOCTYPE html>

<head>

<title>Hit Heavy</title>

<link rel="shortcut icon" href="favicon.ico" type="image/ico" />

<style type="text/css">
    div.bgcarousel { /* CSS for main carousel container */
        background: black center center no-repeat; 
        width: 100%;
    }

    img.navbutton { /* CSS for the nav buttons */
        margin: 5px;
        opacity: 0.7;
    }

    div.slide{ /* CSS for each image's DIV container within main container */
        background-color: black;
        background-position: center center; /* center image within carousel */
        background-repeat: no-repeat;
        background-size: cover; /* CSS3 property to scale image within container? "cover" or     "contain" */
        color: black;
    }
</style>

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/bgcarousel.js" script type="text/javascript"></script>
<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
    wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
    imagearray: [
        ['bg.jpg'], //["image_path", "optional description"]
        ['bg.jpg'],
        ['bg.jpg'],
        ['bg.jpg'] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false,  pauseonmouseover:true},
    navbuttons: ['left.png', 'right.png'], // path to nav images
    activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
    orientation: 'h', //Valid values: "h" or "v"
    persist: true, //remember last viewed slide and recall within same session?
    slideduration: 500 //transition duration (milliseconds)
})

</script>

</head>

<body>
    <div id="mybgcarousel" class="bgcarousel"></div>
</body>
</html>

对于支持html中脚本的javascript，您可以查看它here

Answer 1

问题在于以下行，您已将宽度设置为100％

   div.bgcarousel{ /* CSS for main carousel container */
   background: black ; 
    width:700px; /* default dimensions of carousel */
    height:500px;
    }

Answer 2

@ user2122160高度很重要改变像这样的CSS

div.bgcarousel { /* CSS for main carousel container */
        background: black center center no-repeat; 
        width: 100%;
        height:100%;
    }

我创建了基于Slider的代码，其工作正常，没有错误链接：

http://www.fileconvoy.com/dfl.php?id=g7d74fb2c3b904c6a99923428881a8f81443981afd

Answer 3

我认为你需要在该代码周围添加$（document）.ready（）处理程序，我认为它正在运行BEFORE jquery并且bgcarousel被加载，将脚本更改为

<script type="text/javascript">
$(document).ready(function(){
  var firstbgcarousel=new bgCarousel({
    wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
    imagearray: [
        ['bg.jpg'], //["image_path", "optional description"]
        ['bg.jpg'],
        ['bg.jpg'],
        ['bg.jpg'] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false,  pauseonmouseover:true},
    navbuttons: ['left.png', 'right.png'], // path to nav images
    activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
    orientation: 'h', //Valid values: "h" or "v"
    persist: true, //remember last viewed slide and recall within same session?
    slideduration: 500 //transition duration (milliseconds)
  })
})
</script>

$（document）.ready部分使您的代码在执行脚本之前等待加载文档

背景图像旋转木马

3 个答案: