我如何结合 html、css 和 javascript 编码来使我的轮播工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15140011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i combine html, css and javascript coding to make my carousel work?
提问by James Bowen
I have the following code split into html, css and javascript, but i do not know how to combine them in notepad so i can embed it onto my website. (The image sources and texts are just examples.)
我将以下代码拆分为 html、css 和 javascript，但我不知道如何将它们组合到记事本中，以便将其嵌入到我的网站中。（图片来源和文本只是示例。）
HTML
HTML
<div id="wrapper">
<div id="text">
<h3>Geneva International Motor Show</h3>
<p>The Geneva International Motor Show will open to the public from 03 to 13 March, presenting more than 260 exhibitors and more than 175 world and European premieres. 02 March 2011.<br />
<small>Source: <a href="http://gigapica.geenstijl.nl/2011/03/geneva_international_motor_sho.html" target="_blank">gigapica.geenstijl.nl</a></small></p>
</div>
<div id="images">
<div id="a">
<img src="img/car1.jpg" alt="car1" width="275" height="200" />
<span>The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011. </span>
</div>
<div>
<img src="img/car2.jpg" alt="car2" width="275" height="200" />
<span>The new Toyota FT-86 II Concept car on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
</div>
<div>
<img src="img/car3.jpg" alt="car5" width="275" height="200" />
<span>The new Renault Dezir Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
</div>
<div>
<img src="img/car4.jpg" alt="car6" width="275" height="200" />
<span>The new Dodge Challenger SRT8 392 is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011.</span>
</div>
<div>
<img src="img/car5.jpg" alt="car8" width="275" height="200" />
<span>The new Nissan Esflow Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
</div>
<div>
<img src="img/car6.jpg" alt="car9" width="275" height="200" />
<span>A study of Volkswagen named Bulli is on display at International Geneva Motor Show at the Palexpo fairground in Geneva, Switzerland, 03 March 2011</span>
</div>
</div>
</div>
CSS
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 650px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
width: 825px;
margin: 0 0 0 -412px;
position: absolute;
left: 50%;
top: 30px;
}
#text h3 {
font-size: 26px;
}
#text small, #text small * {
font-size: 12px;
color: #666;
}
#images {
width: 900px;
overflow: hidden;
}
#images div, #images img {
display: block;
float: left;
width: 275px;
height: 200px;
}
#images span {
background-color: black;
color: #ccc;
display: block;
float: left;
width: 215px;
height: 160px;
padding: 40px 30px 0 30px;
}
Javascript
Javascript
$(function() {
$('#images > div').each(function() {
var $cfs = $(this);
$cfs.carouFredSel({
direction: 'up',
circular: false,
infinite: false,
auto: false,
scroll: {
queue: 'last'
},
items: {
visible: 1,
width: 275,
height: 200
}
});
$cfs.hover(
function() {
$cfs.trigger('next');
},
function() {
$cfs.trigger('prev');
}
);
});
});
Any help on this would be much appreciated guys!!!
任何对此的帮助将不胜感激！
回答by dezman
<!DOCTYPE html>
<html lang"en">
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="path/to/your.css" />
<script src="path/to/your.js"></script>
</head>
<body>
...your html
</body>
</html>
I added some things that normally go in the head of an html document, like the charset and lang attributes. Also, this doctype is for html5.
我添加了一些通常出现在 html 文档头部的东西，比如 charset 和 lang 属性。此外，此文档类型适用于 html5。
回答by Michael
You can reference the code inline or you can link to the files.
您可以引用内联代码，也可以链接到文件。
To reference everything inline, above your HTML put your CSS between:
要内联引用所有内容，请在 HTML 上方放置 CSS：
<style>
</style>
Then put your javascript between:
然后把你的 javascript 放在：
<script>
</script>
OR
或者
Save your CSS to a document, say slider.css
将您的 CSS 保存到一个文档中，比如 slider.css
Save your javascript to a file called slider.js
将您的 javascript 保存到名为 Slider.js 的文件中
Then link to them with:
然后通过以下链接链接到它们：
<link href="slider.css" type="text/css" rel="stylesheet" />
and
和
<script src="slider.js" type="text/javascript></script>
Note that the above two code snippets have to be placed inside your <head></head>tags
请注意，以上两个代码片段必须放在您的<head></head>标签内
回答by Alexandre Wiechers Vaz
Add this to in the <head>section in html file:
将此添加到<head>html 文件的部分中：
<link rel="stylesheet" href="yourcssfilename.css"/>
<script type="text/javascript" src="yourjsfilename.js"/>
回答by Gyhth
<head>
<script type="text/javascript" src="<Location and filename of Javascript file including file extension>"></script>
<link rel="stylesheet" type="text/css" href="<Location and filename of CSS file including file extension>">
</head>
Replace the stuff with the actual file locations on the server/machine.
用服务器/机器上的实际文件位置替换这些东西。
