字幕显示在图像滑块中的位置之外
我一直在为我的网页制作这个JS滑块。格式中有些东西略有偏差。我似乎无法弄清楚它在哪里。
当显示带有下面标题的图片时，标题下方有一个空格，然后在第五张图片上，标题出现在滑块的顶部，并且没有显示图片。以下是JS滑块的代码，以及我用来实现它的index.html文件。
Bottom of Image has grey extra space
After images appear the slider does this
//Slider JS
var cssSlidy = function(newOptions) {
var options = (function() {
var mergedOptions = {},
defaultOptions = {
timeOnSlide: 8,
timeBetweenSlides: 1,
slidyContainerSelector: '#slidy-container', // name of slider container
slidySelector: '#slidy', // name of slider
slidyDirection: 'left', // options: left, right
fallbackFunction: function() {},
cssAnimationName: 'slidy',
captionSource: 'data-caption', // options: data-caption, alt, none
captionBackground: 'rgba(0,0,0,0.5)',
captionColor: '#fff',
captionFont: 'Avenir, Avenir Next, Droid Sans, DroidSansRegular, Corbel, Tahoma, Geneva, sans-serif',
captionPosition: 'bottom', // options: top, bottom
captionAppear: 'perm', // options: slide, perm, fade
captionSize: '1.6rem', // same units
captionPadding: '1.65rem' // same units
};
for (var option in defaultOptions) mergedOptions[option] = defaultOptions[option];
for (var option in newOptions) mergedOptions[option] = newOptions[option];
return mergedOptions;
})(),
CS = this;
CS.animationString = 'animation';
CS.hasAnimation = false;
CS.keyframeprefix = '';
CS.domPrefixes = 'Webkit Moz O Khtml'.split(' ');
CS.pfx = '';
CS.element = document.getElementById(options.slidySelector.replace('#', ''));
CS.init = (function() {
// browser supports keyframe animation w/o prefixes
if (CS.element.style.animationName !== undefined) CS.hasAnimation = true;
// browser supports keyframe animation w/ prefixes
if (CS.hasAnimation === false) {
for (var i = 0; i < CS.domPrefixes.length; i++) {
if (CS.element.style[CS.domPrefixes[i] + 'AnimationName'] !== undefined) {
CS.pfx = domPrefixes[i];
CS.animationString = pfx + 'Animation';
CS.keyframeprefix = '-' + pfx.toLowerCase() + '-';
CS.hasAnimation = true;
// determines CSS prefix required for CSS animations
break;
}
}
}
if (CS.hasAnimation === true) {
var images = CS.element.getElementsByTagName("img"),
L = images.length,
fig = document.createElement('figure'),
who, temp;
while (L) {
temp = fig.cloneNode(false);
who = images[--L];
// wraps all images in the slider with <figure> tags
if (options.captionSource === "alt" || options.captionSource === "data-caption" ) {
caption = who.getAttribute(options.captionSource); }
who.parentNode.insertBefore(temp, who);
if (options.captionSource == "alt" || options.captionSource == "data-caption") {
if (caption !== null) {
content = document.createElement('figcaption');
content.innerHTML = caption;
// places captions in each <figure> element, if required
}
}
temp.appendChild(who);
if (options.captionSource !== "none" ) {
if (caption !== null) temp.appendChild(content);
}
}
var figs = CS.element.getElementsByTagName("figure");
var firstFig = figs[0]; // get the first figure inside the "slidy" element.
figWrap = firstFig.cloneNode(true); // copy it.
CS.element.appendChild(figWrap); // add the clone to the end of the images
var imgCount = images.length, // count the number of images in the slide, including the new cloned element
totalTime = (options.timeOnSlide + options.timeBetweenSlides) * (imgCount - 1), // calculate the total length of the animation by multiplying the number of _actual_ images by the amount of time for both static display of each image and motion between them
slideRatio = (options.timeOnSlide / totalTime) * 100, // determine the percentage of time an induvidual image is held static during the animation
moveRatio = (options.timeBetweenSlides / totalTime) * 100, // determine the percentage of time for an individual movement
basePercentage = 100 / imgCount, // work out how wide each image should be in the slidy, as a percentage.
position = 0, // set the initial position of the slidy element
css = document.createElement("style"); // start marking a new style sheet
// creating css style tag
css.type = "text/css";
css.id = options.slidySelector.replace('#', '') + "-css";
css.innerHTML += options.slidyContainerSelector + " { overflow: hidden; }\n";
css.innerHTML += options.slidySelector + " { text-align: left; margin: 0 ; font-size: 0; position: relative; width: " + (imgCount * 100) + "%; }\n"; // set the width for the inner slider container
css.innerHTML += options.slidySelector + " figure { float: left; margin: 0; position: relative; display: inline-block; width: " + basePercentage + "%; height: auto; }\n"; // set the width and size pf the inner <figure> elements
css.innerHTML += options.slidySelector + " figure img { width: 100%; }\n";
if (options.captionSource == "alt" || options.captionSource == "data-caption") {
css.innerHTML += options.slidySelector + " figure figcaption { padding-bottom: 0px; position: absolute; line-height: 1.6rem; margin: 0 auto; width: 95.5%; background-color: " + options.captionBackground + "; color: " + options.captionColor + "; font-family: " + options.captionFont + ";";
var captions = document.getElementsByTagName("figcaption");
var captionHeight = captions[0].offsetHeight * 2 + parseInt(window.getComputedStyle(captions[0]).fontSize, 10);
if (options.captionPosition == "top") {
switch (options.captions) {
case 'fade':
css.innerHTML += " top: 0; opacity: 1;";
break;
case 'slide':
css.innerHTML += " top: -" + captionHeight + "px; ";
break;
default:
css.innerHTML += " top: 0;";
}
} else {
switch (options.captionAppear) {
case 'fade':
css.innerHTML += " bottom: 0; opacity: 1;";
break;
case 'slide':
css.innerHTML += " bottom: -" + captionHeight + "px; ";
break;
default:
css.innerHTML += " bottom: 0;";
}
}
css.innerHTML += " font-size: " + options.captionSize + "; padding: " + options.captionPadding + "; " + keyframeprefix + "transition: .5s; }\n";
css.innerHTML += options.slidySelector + ":hover figure figcaption { opacity: 1; ";
if (options.captionPosition == "top") {
css.innerHTML += " top: 0px;";
} else {
css.innerHTML += " bottom: 0px;";
}
css.innerHTML += " }\n";
}
css.innerHTML += "@" + keyframeprefix + "keyframes " + options.cssAnimationName + " {\n";
if (options.slidyDirection == "right") {
for (i = imgCount - 1; i > 0; i--) { //
position += slideRatio; // make the keyframe the position of the image
css.innerHTML += position + "% { left: -" + (i * 100) + "%; }\n";
position += moveRatio; // make the postion for the _next_ slide
css.innerHTML += position + "% { left: -" + ((i - 1) * 100) + "%; }\n";
}
} else { // the slider is moving to the left
for (i = 0; i < (imgCount - 1); i++) { //
position += slideRatio; // make the keyframe the position of the image
css.innerHTML += position + "% { left: -" + (i * 100) + "%; }\n";
position += moveRatio; // make the postion for the _next_ slide
css.innerHTML += position + "% { left: -" + ((i + 1) * 100) + "%; }\n";
}
}
css.innerHTML += "}\n";
css.innerHTML += options.slidySelector + " { ";
if (options.slidyDirection == "right") {
css.innerHTML += "left: " + imgCount * 100 + "%"
} else {
css.innerHTML += "left: 0%; "
}
css.innerHTML += keyframeprefix + "transform: translate3d(0,0,0); " + keyframeprefix + "animation: " + totalTime + "s " + options.cssAnimationName + " infinite; }\n"; // call on the completed keyframe animation sequence
// place css style tag
if (options.cssLocation !== undefined) options.cssLocation.appendChild(css);
else document.body.appendChild(css);
} else {
// fallback function
options.fallbackFunction();
}
})();
}
[/CODE]
//index.html
[CODE]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>change picture</title>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 7500);
}
function goTo(num){
document.getElementById("img").src = images[num - 1];
}
var images = [], x = -1;
images[0] = "img/image1.jpg";
images[1] = "img/image2.jpg";
images[2] = "img/image3.jpg";
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body class="background">
<div class="body" onload = "startTimer()">
<header class="mainHeader">
<nav><ul>
<li class = "motto"><img src = "img/name.PNG"
style = "width:230px;height:55px;"></li>
<li id ="l1" class="active"><a href="/McIntireSolutions/index.html">Home</a></li>
<li id = "whoweare"><a href="/McIntireSolutions/whoweare.html">Who We Are</a>
<ul class = "subnav">
<li><a href="/McIntireSolutions/values.html">Values</a></li>
<li><a href="/McIntireSolutions/leadershipteam.html">Leadership Team</a></li>
<li><a href="/McIntireSolutions/ourteam.html">Our Team</a></li>
</ul>
</li>
<li id="l3"><a href="/McIntireSolutions/whatwedo.html">Solutions</a></li>
<li id="l4"><a href="/McIntireSolutions/industrypartners.html">Industry Partners</a></li>
<li id="l5"><a href="/McIntireSolutions/governmentclients.html">Government Clients</a></li>
<li id = "careers"><a href="/McIntireSolutions/careers.html">Careers</a>
<ul class = "subnav">
<li><a href="/McIntireSolutions/training.html">Training</a></li>
<li><a href="/McIntireSolutions/benefits.html">Benefits</a></li>
</ul>
</li>
<li class ="logo"><img src = "img/logo.png"
style = "width:55px;height:55px;"></li></ul>
<div class = "handle" style = "height: 55px;"><img src = "img/name.PNG"
style = "width:150px;height:35px;"> <h class = "three">☰</h></div>
</nav>
</header>
<div class="mainContent">
<div class = "content">
<div id="slidy-container">
<figure id="slidy">
<img src="img/image1.jpg" alt=""
alt data-caption = "Transformation: Migrating legacy environments to managed service environments.">
<img src="img/image2.jpg" alt=""
alt data-caption = "Integration: Creating interoperable environments where legacy systems and new
services interact with disparate sources of data and other services.">
<img src="img/image3.jpg" alt=""
alt data-caption = "Modernization: Migrate legacy platforms and technologies to cloud environments
including Amazon Web Services.">
<img src="img/image1.jpg" alt=""
alt data-caption = "Transformation: Converting Ad-Hoc PMO efforts to integrated IT governance.">
<img src="img/image2.jpg" alt=""
alt data-caption = "Integration: Enabling metrics driven decision making – linking business decisions
and governance fora with strategy, capabilities, performance, investments to
IT solutions.">
<img src="img/image3.jpg" alt=""
alt data-caption = "Modernization: Design and created standard implementation profile framework, adopted
by the White House, enabling service integration and re-use.">
<img srcs="img/image1.jpg" alt=""
alt data-caption = "Transformation: Creating market exchanges between government consumers and commercial
suppliers in the Federal workspace, where the government is able to perform source
selection in one-click">
<img src="img/image2.jpg" alt=""
alt data-caption = "Integration: Enabling portfolio management decisions through visualization and road
mapping solutions.">
<img src="img/image3.jpg" alt=""
alt data-caption = "Modernization: Develop technologies that directly impact the mission and mission
environments.">
</figure>
</div>
<script src="cssslidy.js"></script>
<script>cssSlidy();</script>
</div>
</div>
<footer class="mainFooter">
<p>Copyright © 2015 <a href="http://twitter.com/cortfisher">McIntire Solutions</a></p>
</footer>
<script>
$('.handle').on('click', function(){
$('.mainHeader nav ul').toggleClass('showing');
})
</script>
</div>
</body>
</html>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？