1

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

这是资源的链接：动态驱动器。

另外，这是我的 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，你可以在这里查看

4

3 回答 3

0

@user2122160 高度很重要，像这样更改 css

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

我创建了基于您的代码的滑块，它运行良好，没有错误链接如下：

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

于 2013-03-01T13:52:03.457 回答
0

问题在于您已将宽度设置为 100%

   div.bgcarousel{ /* CSS for main carousel container */
   background: black ; 
    width:700px; /* default dimensions of carousel */
    height:500px;
    }
于 2013-03-01T04:41:46.210 回答
0

我认为您需要在该代码周围添加一个 $(document).ready() 处理程序，我认为它在 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 部分使您的代码在执行脚本之前等待文档加载

于 2013-03-01T14:02:03.167 回答