html - jquery幻灯片选项卡和html
问题描述
我一直在做关于网络开发的在线课程，讲师向我们展示了使用 jquery 实现的幻灯片。我按照指示执行了每一步，但是当我打开浏览器时，图像似乎没有出现在幻灯片上，我不知道幻灯片框是否正常工作。这是用于 tabs-slideshow 的 jquery 工具的链接：http: //jquerytools.github.io/demos/tabs/slideshow.html
我的问题是： 1. 我的代码哪里出错了，阻止了幻灯片图像和幻灯片框的正常显示？2. br class="clearing" 和 .clearing { clear:both;} (css 文件 2) 到底在做什么？
先感谢您。
这是我的 HTML 代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Killersites CSS layout Example</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/slideshow.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
[endif]-->
<!-- enable the jquery -->
<script language="javascript">
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(function() {
$(".slidetabs").tabs(".images > div", {
//enable the "cross-fading" effect
effect:'fade',
fadeOutSpeed: "slow",
// start from the befinning after the last tab
rotate: true
//use the slideshow plugin. It accepts its own configuration
}).slideshow();
});
</script>
</head>
<body>
<content>
<header>
<a href="#" id="logo">Home</a>
<h1>Killersites Training</h1>
<p>Creating Killersites Since 1998</p>
</header>
<!-- Container for the slides-->
<header class="images">
<!-- First sliding image-->
<div>
<img src="images/killerfrog.jpg" width="940" height="250" alt="image1" title="image1">
</div>
<!-- Second sliding image-->
<div>
<img src="images/killerfrog2.jpg" width="940" height="250" alt="image2" title="image2">
</div>
<!-- Third sliding image-->
<div>
<img src="images/killerfrog3.jpg" width="940" height="250" alt="image3" title="image3">
</div>
</header>
<!-- The tabs -->
<div class="slidetabs">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. Aenean fringilla est interdum metus tempor facilisis ultrices a metus. Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
<h3>A Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices. </p>
<h3>Another Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. </p>
<section class="leftfloat">
<h3>nested left section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
</section>
<section class="rightfloat">
<h3>nested right section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus.</p>
</section>
<h3>Another Sub Headline</h3>
<p>dolor sit amet consectetur adipiscing elit. Nulla id nulla risus, vitae consequat dui. Quisque vehicula tellus sed nisl feugiat adipiscing ut in neque. Nullam id sapien eget diam ullamcorper tempus a pharetra enim. Nam at ligula ligula. Maecenas turpis nunc, suscipit et viverra in, cursus eget tortor. Aenean mollis adipiscing est. Cras elementum blandit tincidunt. Aliquam at semper lacus. Etiam hendrerit lacinia mauris, vel fermentum risus venenatis ultrices.Sed sit amet tortor sit amet nulla molestie vestibulum. Praesent id sem a libero fermentum volutpat. Maecenas pharetra neque eu leo interdum hendrerit. Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus. Integer molestie turpis id est ultricies vel commodo magna viverra. Nunc gravida fermentum placerat. Duis lorem augue, tincidunt blandit vehicula quis, aliquam nec tellus. </p>
</article>
<footer>
<section class="first">
<p>©2011 killersites Corp</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<section>
<h3>nested footer section</h3>
<p>Morbi diam ipsum, gravida sed scelerisque quis, imperdiet vitae quam. Donec sollicitudin, nunc sit amet convallis sagittis, libero ipsum sollicitudin elit, ac vestibulum ante turpis faucibus tellus.</p>
</section>
<br class="clearing">
</footer>
</content>
</body>
</html>
CSS文件1：
@charset "UTF-8";
/* slideshow css */
/* container for slides */
.images {
background:#fff url(../images/h300.png) repeat-x;
position:relative;
height:250px;
width:940px;
float:left;
cursor:pointer;
}
/* single slide */
.images div {
display:none;
position:absolute;
top:0;
left:0;
height:250px;
font-size:12px;
}
/* header */
.images h3 {
font-size:22px;
font-weight:normal;
margin:0 0 20px 0;
color:#456;
}
/* tabs (those little circles below slides) */
.slidetabs {
position:absolute;
top:365px;
right:20px;
/*clear:both;
margin-left:330px;*/
}
/* single tab */
.slidetabs a {
width:8px;
height:8px;
float:left;
margin:3px;
background:url(../images/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
}
/* mouseover state */
.slidetabs a:hover {
background-position:0 -8px;
}
/* active state (current page state) */
.slidetabs a.current {
background-position:0 -16px;
}
CSS 文件 2：
@charset "UTF-8";
*{
margin:0px;
padding:0px;
}
/*html5 display rule */
address, article, aside, canvas, content, details, figcaption, figure, footer, header, hgroup, nav, menu, section, summary {
display:block;
}
@font-face {
font-family: 'ChunkFiveRoman';
src: url('../fonts/chunkfive-webfont.eot');
src: url('../fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/chunkfive-webfont.woff') format('woff'),
url('../fonts/chunkfive-webfont.ttf') format('truetype'),
url('../fonts/chunkfive-webfont.svg#ChunkFiveRoman') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'sinkin_sans400_regular';
src: url('../fonts/sinkinsans-400regular-webfont.woff2') format('woff2'),
url('../fonts/sinkinsans-400regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: #353535;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-image: url(../images/dots.png);
}
h1, h2, h3 {
font-family: 'sinkin_sans400_regular','ChunkFiveRoman', Georgia, "Times New Roman", Times, serif;
}
content{
width:940px;
margin-top:20px;
margin-right:auto;
margin-bottom:20px;
margin-left:auto;
position:relative;
background-color:#f2f3ed;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
header {
border-bottom-color: #CCC;
border-bottom-width: 1px;
border-bottom-style: solid;
}
header h1 {
padding:20px 20px 20px 97px;
color:#353535;
font-size:42px;
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
header h1:hover{
text-shadow: 2px 2px 2px #888;
-webkit-text-shadow:2px 2px 2px #888; /* safari */
}
header p {
color:#353535;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
position: absolute;
right: 0px;
top: 33px;
background-color:#f2f3ed;
padding:10px;
/* rounded corners */
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
/* 2d skew trasnform */
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-moz-transform:skew(-20deg,0deg); /* Firefox */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
-o-transform:skew(-20deg,0deg); /* Opera */
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
header p:hover {
color:#f2f3ed;
background-color:#353535;
background-image: url(../images/dots.png);
}
#logo {
position: absolute;
top: 12px;
left: 20px;
background: url(../images/logo_small.png) no-repeat;
width: 61px;
height: 62px;
text-indent:-9999px;
/* css3 transition */
-webkit-transition:all 1s;
-o-transition-property:all;
-o-transition-duration:1s;
-moz-transition-property:all;
-moz-transition-duration:1s;
transition-property:all;
transition-duration:1s;
}
#logo:hover {
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
header#anim {
height:250px;
}
nav {
float:left;
width:200px;
}
nav li{
list-style-type:none;
}
nav li a{
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
display:block;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
font-size:18px;
/* css3 transition */
-webkit-transition:all .5s;
-o-transition-property:all;
-o-transition-duration:.5s;
-moz-transition-property:all;
-moz-transition-duration:.5s;
transition-property:all;
transition-duration:.5s;
}
nav li a:link{
color:#333;
}
nav li a:visited{
color:#333;
}
nav li a:hover{
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
background-color:#353535;
box-shadow: 0px 0px 5px #888;
-webkit-box-shadow:0px 0px 5px #888; /* safari */
background-image: url(../images/dots.png);
}
nav li a:active{
color:#333;
background-color:#666;
}
article {
width:739px;
float:right;
border-left-color: #CCC;
border-left-width: 1px;
border-left-style: solid;
box-shadow: 0px 0px 5px #888;
-webkit-box-shadow:0px 0px 5px #888; /* safari */
}
article h2, h3, p {
margin-left:20px;
margin-right:20px;
padding-top:10px;
}
article p {
padding-top:4px;
padding-bottom:20px;
line-height:18px;
}
article h2{
color:#353535;
font-size:28px;
text-transform: capitalize;
}
article h3{
color:#353535;
font-size:20px;
text-transform: capitalize;
}
article .leftfloat{
width:50%;
float:left;
}
article .rightfloat{
width:50%;
float:right;
}
footer {
border-top-color: #CCC;
border-top-width: 1px;
border-top-style: solid;
clear:both;
background-color: #407a01;
background-image: url(../images/bg_gradient.png);
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;
-moz-border-bottom-right-radius:25px;
-moz-border-bottom-left-radius:25px;
}
footer section.first {
float:left;
width:200px;
padding-top:10px;
padding-bottom:20px;
}
footer section.first p {
color:#f2f3ed;
}
footer section {
float:left;
width:246px;
padding-top:10px;
padding-bottom:20px;
color:#96C;
}
footer section h3 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#f2f3ed;
font-size:16px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #F2F3ED;
padding-bottom: 0px;
text-transform: capitalize;
font-weight:normal;
}
footer section p {
color:#333;
font-size:10px;
line-height:16px;
}
.clearing {
clear:both;
}
解决方案
这是一个工作幻灯片的示例。
我从w3schools的这个例子中得到了这个。肯定有比 w3schools 更好的例子，但这至少有效。
请注意，我所做的唯一更改是图像，现在使用“ https://via.placeholder.com/350x150 ”作为它们的来源。
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption Text #One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption #Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://via.placeholder.com/350x150" style="width:100%">
<div class="text">Caption #Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>关于您关于 CSSclear属性的作用的问题：
clear CSS 属性指定一个元素是否可以位于其前面的浮动元素旁边，或者必须在它们下方向下移动（清除）。clear 属性适用于浮动和非浮动元素。
通过：https ://developer.mozilla.org/en-US/docs/Web/CSS/clear
请注意clear:both;上面链接中的示例，并将其与其他clear选项进行比较，例如左、右和无。
推荐阅读
- django - 数组中的项目未验证：选择一个有效的选项。[“Acamedic”不是可用的选择之一
- python - 我正在尝试使用 Python 制作音乐应用程序但我遇到了一个无法修复的错误
- c++ - 使用来自 boost::array 与 std::array 的 std::string::assign 不兼容
- javascript - 如何使用 Typescript 将每个时间间隔减少 10 分钟？
- eleventy - 如何通过前端变量（Eleventy / 11ty）过滤处理过的文件？
- python - 获取对比色的循环
- python - 根据 x、y、z 坐标用 python 绘制密度场
- jupyter - 如何在 Thonny IDE 上安装 XGboost？
- puppet - 如何使用单个 puppet erb 模板创建具有不同内容的两个不同文件
- javascript - 如何使用 setinterval 检查方法是否可用