gpt4 book ai didi

javascript - 背景图片轮播

转载 作者:太空宇宙 更新时间:2023-11-03 18:50:23 25 4
gpt4 key购买 nike

我正在尝试创建一个简单的网站,该网站仅包含轮播中的背景图片,轮播会从左向右移动,并带有方向箭头。我找到了一个提供简单示例的资源,但是当我尝试重现他们的模型时,脚本似乎没有定义自己。此外,由于演示只有 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

最佳答案

问题出在你将宽度设置为 100% 的下一行

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

关于javascript - 背景图片轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15150484/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com