如何将html、css和javascript编码结合起来使我的旋转木马工作
How do i combine html, css and javascript coding to make my carousel work?
我将以下代码拆分为html、css和javascript,但我不知道如何将它们组合在记事本中,以便将其嵌入到我的网站上。(图片来源和文本只是示例。(
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');
}
);
});
});
如果能在这方面提供任何帮助,我们将不胜感激!!!
<!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。
您可以内联引用代码,也可以链接到文件。
要内联引用所有内容,请将CSS放在HTML上方:
<style>
</style>
然后将您的javascript放在:之间
<script>
</script>
或
将CSS保存到文档中,比如slider.CSS
将您的javascript保存到一个名为slider.js 的文件中
然后用链接到它们
<link href="slider.css" type="text/css" rel="stylesheet" />
和
<script src="slider.js" type="text/javascript></script>
请注意,以上两个代码片段必须放置在<head></head>
标签
将其添加到html文件的<head>
部分:
<link rel="stylesheet" href="yourcssfilename.css"/>
<script type="text/javascript" src="yourjsfilename.js"/>
<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>
将这些内容替换为服务器/机器上的实际文件位置。
相关文章:
- 有可能将SYSTEMJS与REQUIREJS结合起来吗
- Firebase:我可以将推送与多位置更新结合起来吗?
- 正确地将javascript与php结合起来
- Ajax成功地将表与progressbar结合起来
- 将按钮组与表单结合起来-Bootstrap 3
- 如何正确地将javascript与razor语法结合起来
- JS:有没有办法在点击函数中调用滚动函数,或者两者结合起来
- 我怎样才能将Confluence插件与jQuery代码结合起来
- 尝试将 href 属性和 location.search 结合起来
- 将React和Leaflet结合起来的好方法
- 将MVC.NET Razor与Javascript结合起来构建一个数组
- 端口8888上的Socket.io和端口80上的Web服务器-可以'不要把两者结合起来
- 如何将谷歌地图和基于骨干视图的信息框结合起来
- 如何将extjs图形元素和easelJs元素结合起来
- 将正常形式与多个下拉区结合起来
- 有没有办法把这些脚本结合起来
- 将d3.js与jquery函数调用结合起来
- 为什么我要把Math.floor和Math.random结合起来
- 有可能把gulp watch和jasmine-spec-reporter结合起来吗?
- 是否有可能将cookie同意通知与HTML输出缓存结合起来?