正如标题所示，我是网页设计的新手。 我希望建立一个跨平台的网站。浏览器友好（移动，平板电脑，桌面等）。目前我正在使用Microsoft的Expression Web 4来训练轮子，如果我决定使用Adobe Dreamweaver（如果值得的话）。
在观看视频并搜索不同类型的图像滑块之后，我无法理解我所缺少的某些形式，ID等似乎是标准jquery的内容。话虽如此，我不确定如何制作我自己的外部js页面进行基本闪烁甚至是标准的滑入式图像滑块。
如果有人愿意提供帮助，我们将不胜感激！
其他信息： html 5，css 2.1和网页大小为900px宽，但使用Google建议的HTML脚本来缩放查看大小。
html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title> Bear's Den Lodge Home </title>
<link href="CSS/styles.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="bDL-jquery.js"></script>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logo">
<img src="Images/logov2.png" />
</div>
<div id="social-media">
<p>Connect With Us</p>
<ul>
<li><a href="https://www.facebook.com/bearsdenlodge"> <img src="Images/facebook-icon35p.png" /></a> </li>
<li><a href="https://plus.google.com/+BearsDenLodgeAlban"> <img src="Images/google-plus-icon35p.png" /> </a></li>
<li><a href="https://twitter.com/BearsDenFishing"> <img src="Images/twitter-icon35p.png" /> </a></li>
</ul>
<p>Fish With Us Today; Summer: (705).857.2757 <br>
Winter: (814).839.2443 </p>
</div>
</div>
<div id="topnav">
<ul>
<li><a href="index.html"> Home</a></li>
<li><a href="fishing.html"> Fishing & Guides</a></li>
<li><a href="accommodations.html"> Accommodations</a></li>
<li><a href="area.html"> Area & History</a></li>
<li><a href="rates.html"> Rates</a></li>
<li><a href="contact.html"> Contact</a></li>
</ul>
</div>
<div id="banner">
<div id="bannerslider">
<ul class="slides">
<li class="slide"><img id="Image 1" src="Images/bassperfect-900px.png" alt="bassperfect" width="100%"/></li>
<li class="slide"><img id="Image 2" src="Images/chrismuskie.png" alt="muskie" width="100%"/></li>
<li class="slide"><img id="Image 3" src="Images/kuntzpike.png" alt="kuntzpike" width="100%"/></li>
<li class="slide"><img id="Image 4" src="Images/unitedlumberdinner.png" alt="dinner" width="100%"/></li>
</ul>
</div>
</div>
<div id="subbanner"><h3>Fishing French River, Canada's Premier Fishing Destination. Northeastern ON</h3></div>
<div id="content">
<h2> Welcome to Bear's Den Lodge!</h2> <p>We are a seasonal hunting and fishing operator
located in the French River Delta. Providing clients over the past 30 years
exceptional family style care. Our dedicated staff are here to ensure your
satisfaction from the facilities and equipment we provide to the experiences
and memories made!</p>
</div>
<div id="rightside">
<h3>French River Forecast</h3>
<iframe marginheight="0" marginwidth="0" name="wxButtonFrame" id="wxButtonFrame" height="110" src="http://btn.weather.ca/weatherbuttons/template5.php?placeCode=CAON0007&category0=Cities&containerWidth=150&btnNo=&backgroundColor=blue&multipleCity=0&citySearch=1&celsiusF=F" align="top" frameborder="0" width="150" scrolling="no"></iframe>
<a href="https://www1.on.wildlifelicense.com/custlkup.php?lang=1https://www1.on.wildlifelicense.com/custlkup.php?lang=1"><h3>Fishing & Hunting Liscense </h3> </a>
</div>
<div id="footer">
<p>©All rights reserved by Bear's Den Lodge 2001-2015</p>
</div>
</div>
</body>
CSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Print style */
h1, h2, h3 {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif; font-weight:normal; font-style:italic;}
h1 { font-size: 30px;}
h2 { font-size: 26px;}
h3 { font-size: 21px;}
p {font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 12px;
}
/* Global */
html { }
body { background-color:#eeeeee;}
/* Sliders and Buttons */
#bannerslider {position:relative; width: auto; }
.bannerslider {width:100%; height: 560px;}
.bannerslidier img {width:900px; height: 560px; display:none;}
#slide { }
.slide { }
#slides { }
.slides { }
/* Containers */
#wrapper {width: 900px; margin:0px auto; background-color:ffffff;}
#top {background-image:url('../Images/header2.png'); width:100%; padding:10px 0px; overflow:hidden;}
#logo {float:left; padding-left:10px;}
#social-media {float:right; margin: 0px 10px 0px 0px;}
#social-media p {color:#FFBF00; font-size:13px; margin:4px 10px 4px 0px; }
#social-media img {width:24px; height:24px;}
#social-media ul li {display:inline;}
#topnav { background-color:#333333; clear:both; border-bottom: 3px #cccccc solid; overflow:hidden;}
#topnav ul {width:100%; float:left; margin: 0px; background-color:#333333;}
#topnav ul li { display:inline; }
#topnav ul li a {float:left; padding:10px 20px; color:white; text-decoration:none;}
#topnav a:visited {color:#ffffff;}
#topnav a:active {color:#ffffff;}
#topnav a:hover {color:#ffffff; background-color:maroon;}
#topnav a:focus {color:#ffffff;}
#banner {width: 100%; background-color:#555555;}
#banner bannerslider {background-color:#333333; overflow:hidden;border:0px; }
#banner bannerslider ul {}
#banner img { }
#subbanner { width:100%; background-color:#555555; padding:15px 0px; overflow:hidden;}
#subbanner h3 {color:#ffffff; font-size:18px; font-weight:bold; text-align:center; line-height:180%; float:none;}
#content {float:left; with:550px; padding:20px; }
#content h1 {margin: 0px 0px 20px 0px; font-size: 32px; border-bottom: 1px #777777 solid; padding: 20px 0px;}
#content p {margin: 16px 0px; line-height:160%; width:500px;}
#content h2 {margin: 20px 0 0 0;}
#content img {padding:8px;border:1px #888888 solid; margin: 8px;}
#rightside {padding:20px; float:right; width: 300px;}
#rightside h3 {padding:22px;}
#rightside iframe {padding-left: 25px;}
#rightside p {margin: 8px 0; line-height:160%;}
#footer {clear:both; background-color:#000000; width=100%; text-align:center; padding: 10px 0;}
#footer p {color:white; width=100%; text-align:center;}
答案 0 :(得分：0)
看一下能够为你做这件事的众多jQuery插件。最简单的一个是cycle2（http://jquery.malsup.com/cycle2/）。您需要在页面中包含jQuery而不是jQuery Mobile。 jQuery Mobile适用于设计为在手机而非浏览器上运行的网站。然后包括cycle2文件。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
然后添加适当的标记：
<div class="cycle-slideshow">
<img src="Images/bassperfect-900px.png" width="900">
<img src="Images/chrismuskie.png" width="900">
<img src="Images/kuntzpike.png" width="900">
<img src="Images/unitedlumberdinner.png" width="900">
</div>
如果您想构建网站以便移动设备友好。您可能希望查看其中一个网格系统。我个人使用Bootstrap（http://getbootstrap.com/）。它是最受欢迎的之一。
这是一个小提琴，让您了解它的作用：http://jsfiddle.net/2c61u8a5/