Javascript 背景图像旋转木马_Javascript_Jquery_Html_Css

Javascript 背景图像旋转木马

javascript jquery html css

Javascript 背景图像旋转木马,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试创建一个简单的网站，它只包含旋转木马中的背景图像，旋转木马将从左向右移动，并带有方向箭头。我找到了一个参考资料，它提供了一个简单的示例，但是当我试图复制它们的模型时，脚本似乎没有定义自己。此外，还有第二个问题，实际上使其全屏，因为演示只有700x500 以下是指向资源的链接：还有，这是我的HTML <!DOCTYPE html> <head> <title>Hit Heavy</title> <link rel="short

我正在尝试创建一个简单的网站，它只包含旋转木马中的背景图像，旋转木马将从左向右移动，并带有方向箭头。我找到了一个参考资料，它提供了一个简单的示例，但是当我试图复制它们的模型时，脚本似乎没有定义自己。此外，还有第二个问题，实际上使其全屏，因为演示只有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>


重创
div.bgcarousel{/*用于主旋转木马容器的CSS*/
背景：黑心无重复；
宽度：100%；
}
img.navbutton{/*导航按钮的CSS*/
保证金：5px；
不透明度：0.7；
}
div.slide{/*主容器中每个图像的div容器的CSS*/
背景色：黑色；
背景位置：中心；/*旋转木马内的中心图像*/
背景重复：无重复；
背景尺寸：cover；/*CSS3属性以缩放容器内的图像？“cover”或“contain”*/
颜色：黑色；
}
var firstbgcarousel=新bgCarousel({
wrapperid:'mybgcarousel'，//house carousel页面上空白DIV的ID
图像阵列：[
['bg.jpg']，//[“图像路径”，“可选描述”]
['bg.jpg']，
['bg.jpg']，
['bg.jpg']/问题出在下一行，您已将宽度设置为100%
   div.bgcarousel{ /* CSS for main carousel container */
   background: black ; 
    width:700px; /* default dimensions of carousel */
    height:500px;
    }

@user2122160高度很重要更改css如下
div.bgcarousel { /* CSS for main carousel container */
        background: black center center no-repeat; 
        width: 100%;
        height:100%;
    }

我根据您的代码创建了Slider，它运行良好，没有错误链接如下：

我认为您需要在代码周围添加$（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>


$（文档）.ready（函数（）{
var firstbgcarousel=新bgCarousel({
wrapperid:'mybgcarousel'，//house carousel页面上空白DIV的ID
图像阵列：[
['bg.jpg']，//[“图像路径”，“可选描述”]
['bg.jpg']，
['bg.jpg']，
['bg.jpg']//定义本身是什么意思？？？假设我用Chrome inspector检查我的网站。这是控制台告诉我的：未捕获的语法错误：意外的标识符bgcarousel.js:162未捕获的引用错误：bgcarousel未定义索引。html:34Plz检查并让我知道它还没有完全修复。最终发生的是我改变了将c从html和css结尾添加到capitol，但背景仍然是黑色的。我意识到了这一变化，并将其更改回700x500，但仍然无法修复。当我查看inspector时，html似乎甚至无法识别bgcarousel.js文件周期。