- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我仍在学习 Javascipt 的基础知识,但我似乎在使用 everythingslider 时遇到了一些问题。无论我重新整理这段代码多少次,我似乎都找不到错误,并且 slider 没有加载。它只是将图像堆叠在页面上,并在中间添加标题。
任何人都可以找到并向我解释该错误,以便我将来可以避免它吗?
我的主页最终看起来像这样: Picture of the main page
演示链接:https://css-tricks.github.io/AnythingSlider/simple.html#&panel1-1
<小时/>HTML
<小时/><!doctype html>
<html>
<head>
<title>
| Template |
</title><!-- reference point -->
<meta charset="utf-8">
<link href="css/anythingslider.css" rel="stylesheet">
<link href="css/theme-metallic.css" rel="stylesheet">
<!-- the link below is to your current stylesheet - no need to duplicate! -->
<link rel="stylesheet" href="slider.css" media="screen">
<!-- you may already have this or a similar library linked below -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.anythingslider.min.js"></script><!-- this is the main slider plugin -->
<script type="text/javascript">
$(document).ready(function() {
$("nav").accessibleDropDown();
$('#slider3').anythingSlider({
theme :'metallic',
expand :false,
resizeContents :true,
aspectRatio :true,
showMultiple :1,
changeBy :1,
startPanel :1,
autoPlay :true
})
.find('.panel')
.find('div[class*=caption]').css(
{
position:'absolute'
})
.end()
.hover(function() {
showCaptions( $(this));
},
function() {
hideCaptions( $(this));
}); // end slider
showCaptions = function(el){
var $this = el;
if ($this.find('.caption-bottom').length) {
$this.find('.caption-bottom')
.show()
.animate({ bottom: 0, opacity: 1 }, 400);
}
};
hideCaptions = function(el){
var $this = el;
if ($this.find('.caption-bottom').length) {
$this.find('.caption-bottom')
.stop()
.animate({ bottom: -50, opacity: 0 }, 350, function(){
$this.find('.caption-bottom').hide(); });
}
};
hideCaptions( $('#slider3 .panel') );
}); // end ready
&.fn.accessibleDropDown = function() {
var el = $(this);
$("a", el).focus(function() {
$(this).parents("li").addClass("hover");
}).blur(function() {
$(this).parents("li").removeClass("hover");
});
}
</script>
<style>
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active,
nav ul li.hover a {
background-color: #e1e2dd;
transition: background-color 1s ease-out; /* this line produces transistion */
color: #483838;}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1> The Guitar Shop </h1>
<nav>
<!-- MENU START UL -->
<ul>
<li> <a href="slider.html"> Home </a></li>
<li> <a href=""> About </a></li>
<!-- GUITARS MENU BUTTON, OPEN LI TAG -->
<li> <a href=""> Guitars </a>
<!-- GUITARS SUBMENU -->
<ul>
<li> <a href=""> Acoustic </a></li>
<li> <a href=""> Electric </a></li>
<li> <a href=""> Bass </a></li>
<li> <a href=""> Special </a></li>
</ul>
<!-- GUITARS MENU BUTTON CLOSE LI TAG -->
</li>
<!-- -->
<!-- SERVICES MENU BUTTON, OPEN LI TAG -->
<li> <a href=""> Services </a>
<!-- SERVICES SUBMENU -->
<ul>
<li> <a href=""> Re-String </a></li>
<li> <a href=""> Repairs </a></li>
<li> <a href=""> Lessons </a></li>
<li> <a href=""> Consignment </a></li>
</ul>
<!-- SERVICES MENU BUTTON CLOSE LI TAG -->
</li>
<!-- -->
<!-- INFORMATION MENU BUTTON, OPEN LI TAG -->
<li> <a href=""> Information </a>
<!-- INFORMATION SUBMENU -->
<ul>
<li> <a href=""> Sub-Topic 1 </a></li>
<li> <a href=""> Sub-Topic 2 </a></li>
<li> <a href=""> Sub-Topic 3 </a></li>
</ul>
<!-- INFORMATION MENU BUTTON CLOSE LI TAG -->
</li>
<!-- -->
<!-- CONTACT MENU BUTTON -->
<li> <a href=""> Contact </a> </li>
<!-- NO CONTACT SUBMENU -->
<!-- -->
<!-- MENU CLOSE UL -->
</ul>
<!-- END MENU -->
</nav>
</header>
<aside>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
<p> The sidebar content </p>
</aside>
<section>
<article><!-- reference point - don't add another! -->
<ul id="slider3">
<li>
<!-- Note this caption is before the image, all others it is after -->
<div class="caption-top">
Nothing like a little LP Goldtop to get you going!
</div>
<a href="descPage1.html">
<img src="images/guitar01.jpg"> </a>
</li>
<li>
<a href="descPage2.html">
<img src="images/guitar02.jpg" alt=""></a>
<div class="caption-right">
Acoustic blues can be so much fun!
</div>
</li>
<li>
<a href="descPage3.html"><img src="images/guitar03.jpg" alt=""></a>
<div class="caption-bottom">
Ebony Fretboard and brass wound Elixir strings
</div>
</li>
<li>
<a href="descPage4.html">
<img src="images/guitar04.jpg" alt=""></a>
<div class="caption-left">
Step on up and play us a tune.
</div>
</li>
</ul>
</article><!-- reference point - don't add another! -->
<br>
<br>
<h6 class="spec"></h6>
<article class="cols">
<h2 class="cols-span"> Lorem ipsum dolor sit amet</h2>
<p class=" lead cols-span"> Maecenas tristique consequat sapien at convallis. Fusce commodo</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique consequat sapien at convallis. Fusce commodo ornare neque in egestas. Quisque id luctus eros. Morbi efficitur risus ultricies felis fermentum, ut dictum metus vulputate. Mauris est orci, dapibus sodales commodo a, luctus nec sapien. Ut a orci ut lacus tempor porttitor eget a arcu. Quisque aliquet volutpat mi facilisis malesuada. Phasellus vestibulum metus sit amet risus convallis, sit amet ornare nulla placerat. Ut pulvinar mi in tortor maximus aliquam. Mauris pulvinar congue nisl, et faucibus neque tempor sed. Morbi tristique rutrum ullamcorper.
Pellentesque lacinia accumsan bibendum. Mauris ac viverra quam, at varius nisi. Vivamus et ipsum non leo luctus interdum. Morbi diam elit, feugiat non tincidunt vitae, molestie eget mi. Vivamus posuere dolor eget orci viverra, suscipit scelerisque nulla porttitor. Aenean eu fringilla tellus, eget posuere velit. Etiam vel diam scelerisque, semper mi et, accumsan eros. Fusce faucibus scelerisque nunc non ultricies.</p>
</article>
</section>
<aside class="ads">
<p>Advertisement can run the size out to the margin of the previous container element, no more! </p>
<p> Advertisement</p>
<p> Advertisement</p>
<p> Advertisement</p>
<p> Advertisement</p>
<p> Advertisement</p>
</aside>
<footer>
<p> Copyright © 2015 All Rights Reserved </p>
</footer>
</div>
</body>
</html>
<小时/>
CSS
<小时/>@charset "utf-8";
/* CSS Document */
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer {
padding:0;
margin:0;
}
p{
margin-bottom:1.2em;
}
header{
text-align: center;
background: #b49898 url(images/guitar03.jpg) 90% no-repeat;
height:200px;
}
header h1 {
color:#e1e2dd; /* New Color! */
font-weight:900;
font-size:2.5em;
margin:0 auto 1em auto; /* New lines start here */
padding: 0.6em;
max-width: 40%;
border-radius: 1em;
background-color: #252122;
}
aside{
max-width: 200px;
float: left;
min-height: 600px;
color: #b49898;
background-color: #483838;
}
aside p{
padding: 0px 20px;
}
section {
padding:10px;
float: left;
max-width: 80%;
}
article p{
padding-top: 3%;
}
footer {
clear: both;
background-color: #b49898;
text-align: center;
font-size: 85%;
min-height:100px;
}
footer p {
padding-top: 3%;
}
/* BEGIN MENU STYLE */
nav {
margin:0 0 0 200px;
position: relative;
top:10.5%; /* this code changed - may need to tweak! */
}
Nav ul {
Margin:0;
list-style: none;
}
nav ul li{
display: inline-block;
margin: 0 0.35em;
/* WEEK 2 VAULE ADD */
position: relative;float: left;
}
/* NESTED UL SET STYLE */
nav ul li ul {
display: none;
}
/* END NESTED UL SET STYLE */
nav ul li a {
/* border-radius: 5px;
color: #e1e2dd;
text-decoration: none;
padding: 0.6em 1.2em 0.6em 1.2em;
background-color: #483838;
outline: 0; */
/* WEEK 2 VAULE ADD */
font-size: 110%;
display: block;
color: #e1e2dd;
border-radius: 8px 8px 0 0;/*dog-ears the top, flattens the bottom */
text-decoration: none;
/* PADDING LINE UP (top, right, bottom, and left) */
padding: 0.6em 1.2em 0.6em 1.2em; /*the same spacing as before*/
background-color: #483838;
margin-left: -1px; /*Pull them in close!*/
white-space: nowrap; /* Don't let long menu selections fall to the next line- messes with display!*/
outline: 0; /* some browsers will outline a link- we would rather it not */
}
/* GO, GO, GADGET MENU EFFECTS! */
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {
background-color: #e1e2dd;
color: #483838;
}
/* SUB MENU CONTROLS */
nav ul li:hover ul a,
nav ul li.hover ul a
{
background-color: #483838;
color: #e1e2dd;
width: 130px; /* as promised - this is what makes a uniform sub-menu display */
border-radius: 0;
text-align: left;
padding-left: 0.6em;
}
nav li:hover ul,
nav li.hover ul {
display: block;
position: absolute;
float: none;
z-index:1000; /* add this for sub-menu over slider! */
}
nav ul li:hover ul a:hover,
nav ul li.hover ul a:hover,
nav ul li.hover ul a:focus,
nav ul li.hover il a:active {
background-color: #e1e2dd;
color: #483838;
}
/* END MENU STYLE */
img {
padding: 0.3em;
}
.cols {
/*-webkit-column-count: 3;
-moz-column-count:3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;*/
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
.cols-span {
-webkit-column-span: all;
-moz-column-span: all;
column-span:all;
font-size: 1.2 em;
margin-bottom: 0.2 em;
line-height: 1.2em;
}
.cols p {
margin-bottom: 1.1em;
text-align: justify;
}
.lead {
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
.rgt {
float: right;
max-width: 30%;
}
.spec {
margin:15px 0 10px 0;
border-bottom:1px solid #483838;
line-height:0;
}
.ads {
float: right;
text-align: center;
font-size: 90%;
color: #b49898;
background-color: #483838;
}
.ads p {
padding-top: 0.3em;
}
#wrapper {
background-image: url('images/bg01.png');
}
/* New Class */
.smImg {
float: left;
max-width:30%;
padding-right: 0.4em;
}
/* new selector - This will allow the images to shrink as we lose display width. It will come in handy a bit later. */
article img {
max-width:100%;
}
/* Change the top margin on the seperator code */
.spec {
margin:15px 0 10px 0;
border-bottom:1px solid #483838;
line-height:0;
}
/* ********************* Slider ********************** */
/* New in version 1.7+ */
#slider3 {
width:99%;
height: 400px;
list-style: none;
}
/* images with caption */
#slider3 img {
width: 100%;
height: 100%;
}
/* position the panels so the captions appear correctly */
#slider3 .panel {
position: relative;
}
/* captions */
#slider3 .caption-top, #slider3 .caption-right, #slider3 .caption-bottom, #slider3 .caption-left {
background:#000;
color: #fff;
padding: 10px;
margin: 0;
position: relative;
z-index: 10;
opacity: 0.8;
filter: alpha(opacity=80);
}
/* Top caption - padding is included in the width (480px here, 500px in the script), same for height */
#slider3 .caption-top {
left: 0;
top: 0;
width: 480px;
height: 30px;
}
/* Right caption - padding is included in the width (130px here, 150px in the script), same for height */
#slider3 .caption-right {
right:0;
bottom:0;
width:130px;
height:180px;
}
/* Bottom caption - padding is included in the width (480px here, 500px in the script), same for height */
#slider3 .caption-bottom {
left:0;
bottom:0;
width:480px;
height:30px;
}
/* Left caption - padding is included in the width (130px here, 150px in the script), same for height */
#slider3 .caption-left {
left: 0;
bottom: 0;
width:130px;
height:180px;
}
/* Caption close button */
.caption-top .close, .caption-right .close, .caption-bottom .close, .caption-left .close {
font-size: 80%;
cursor: pointer;
float: right;
display:inline-block;
}
video {
float: left;
padding: 5px;
margin-top: 10px;
}
最佳答案
您的 JavaScript 中的字符不正确
将 &.fn.accessibleDropDown
行更改为 $.fn.accessibleDropDown
- 它是脚本标记中的最后一个代码块。
关于javascript - 任何 slider 未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40586317/
我想要显示正在加载的 .gif,直到所有内容都已加载,包括嵌入的 iframe。但是,目前加载 gif 会在除 iframe 之外的所有内容都已加载后消失。我怎样才能让它等到 iframe 也加载完毕
首先,这是我第一次接触 Angular。 我想要实现的是,我有一个通知列表,我必须以某种方式限制 limitTo,因此元素被限制为三个,在我单击按钮后,其余的应该加载。 我不明白该怎么做: 设置“ V
我正在尝试在我的设备上运行这个非常简单的应用程序(使用 map API V2),并且出于某种原因尝试使用 MapView 时: 使用 java 文件: public class MainMap e
我正在使用 Python 2.6、Excel 2007 Professional 和最新版本的 PyXLL。在 PyXLL 中加载具有 import scipy 抛出异常,模块未加载。有没有人能够在
我想做这个: 创建并打包原始游戏。然后我想根据原始游戏中的蓝图创建具有新网格/声音/动画和蓝图的其他 PAK 文件。原始游戏不应该知道有关其他网格/动画/等的任何信息。因此,我需要在原始游戏中使用 A
**摘要:**在java项目中经常会使用到配置文件,这里就介绍几种加载配置文件的方法。 本文分享自华为云社区《【Java】读取/加载 properties配置文件的几种方法》,作者:Copy工程师。
在 Groovy 脚本中是否可以执行条件导入语句? if (test){ import this.package.class } else { import that.package.
我正在使用 NVidia 视觉分析器(来自 CUDA 5.0 beta 版本的基于 eclipse 的版本)和 Fermi 板,我不了解其中两个性能指标: 全局加载/存储效率表示实际内存事务数与请求事
有没有办法在通过 routeProvider 加载特定 View 时清除 Angular JS 存储的历史记录? ? 我正在使用 Angular 创建一个公共(public)安装,并且历史会积累很多,
使用 Xcode 4.2,在我的应用程序中, View 加载由 segue 事件触发。 在 View Controller 中首先调用什么方法? -(void) viewWillAppear:(BOO
我在某些Django模型中使用JSONField,并希望将此数据从Oracle迁移到Postgres。 到目前为止,当使用Django的dumpdata和loaddata命令时,我仍然没有运气来保持J
创建 Nib 时,我需要创建两种类型:WindowNib 或 ViewNib。我看到的区别是,窗口 Nib 有一个窗口和一个 View 。 如何将 View Nib 加载到另一个窗口中?我是否必须创建
我想将多个env.variables转换为静态结构。 我可以手动进行: Env { is_development: env::var("IS_DEVELOPMENT")
正如我从一个测试用例中看到的:https://godbolt.org/z/K477q1 生成的程序集加载/存储原子松弛与普通变量相同:ldr 和 str 那么,宽松的原子变量和普通变量之间有什么区别吗
我有一个重定向到外部网站的按钮/链接,但是外部网站需要一些时间来加载。所以我想添加一个加载屏幕,以便外部页面在显示之前完全加载。我无法控制外部网站,并且外部网站具有同源策略,因此我无法在 iFrame
我正在尝试为我的应用程序开发一个Dockerfile,该文件在初始化后加载大量环境变量。不知何故,当我稍后执行以下命令时,这些变量是不可用的: docker exec -it container_na
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我刚刚遇到一个问题,我有一个带有一些不同选项的选择标签。 现在我想检查用户选择了哪些选项。 然后我想将一个新的 html 文件加载到该网站(取决于用户选中的选项)宽度 javascript,我该怎么做
我知道两种保存/加载应用程序设置的方法: 使用PersistentStore 使用文件系统(存储,因为 SDCard 是可选的) 我想知道您使用应用程序设置的做法是什么? 使用 PersistentS
我开始使用 Vulkan 时偶然发现了我的第一个问题。尝试创建调试报告回调时(验证层和调试扩展在我的英特尔 hd vulkan 驱动程序上可用,至少它是这么说的),它没有告诉我 vkCreateDeb
我是一名优秀的程序员,十分优秀!