我如何结合html，CSS和JavaScript编码，使我的旋转木马工作？ [英] How do i combine html, css and javascript coding to make my carousel work?
本文介绍了我如何结合html，CSS和JavaScript编码，使我的旋转木马工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码分为html，css和javascript，但我不知道如何将它们组合在记事本中，所以我可以将它嵌入到我的网站。 （图片来源和文字只是示例。）
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
<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
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
$(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!!!
推荐答案
<!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>
我添加了一些通常放在html文档头部的东西，比如charset和lang 。此外，此doctype是html5。
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，CSS和JavaScript编码，使我的旋转木马工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
