HTML和JavaScript图像幻灯片只链接到相同的超链接,而不是每个图像的不同链接
HTML and JavaScript Image Slideshow only links to the same hyperlink rather than different ones for each image
我正在创建HTML中的图像幻灯片,我希望每个图像链接到不同的网页和每个图像显示不同的标题/alt标签。然而,我使用的代码只给我一个链接和一个标题,而不是不同的。
我现在已经尝试了各种方法,但似乎都不起作用。我现在将发布第一种方式和第二种方式在不同的消息,所以我们不会感到困惑。
在html文件中,代码如下:div id="slideShowImages">
<a href = "civil_war.html"><img src="Images/civil_war.jpg" alt = "Captain America: Civil War" title = "Captain America: Civil War"/></a>
<a href = "agents_of_shield.html"><img src = "Images/agents_of_shield.jpg" alt = "Agents of Shield" title="Agents of Shield"/> </a>
<a href = "fantastic_four.html"><img src = "Images/fantastic_four.jpg" alt ="The Fantastic Four" title = "The Fantastic Four"/></a>
<a href = "jurassic_world.html"><img src = "Images/jurassic_world.jpg" alt = "Jurassic World" title = "Jurassic World"/></a>
<a href = "Furious_7.html"><img src="Images/paul_walker.jpg" alt = "Paul Walker in Furious 7" title = "Paul Walker in Furious 7"/></a>
</div>
<script src="slideShow.js"></script>
在slideShow.js中的代码如下:
window.addEventListener('load', slideShow, false);
function slideShow() {
var globals = {
slideDelay: 6000, // The time interval between consecutive slides.
fadeDelay: 35, // The time interval between individual opacity changes. This should always be much smaller than slideDelay.
wrapperID: "slideShowImages", // The ID of the <div> element that contains all of the <img> elements to be shown as a slide show.
buttonID: "slideShowButton", // The ID of the <button> element that toggles the slide show on and off.
buttonStartText: "Start Slides", // Text used in the slide show toggle button.
buttonStopText: "Stop Slides", // Text used in the slide show toggle button.
wrapperObject: null, // Will contain a reference to the <div> element that contains all of the <img> elements to be shown as a slide show.
buttonObject: null, // If present, will contain a reference to the <button> element that toggles the slide show on and off. The initial assumption is that there is no such button element (hence the false value).
slideImages: [], // Will contain all of the slide image objects.
slideShowID: null, // A setInterval() ID value used to stop the slide show.
slideShowRunning: true, // Used to record when the slide show is running and when it's not. The slide show is always initially running.
slideIndex: 0 // The index of the current slide image.
}
/* MAIN *************************************************************************************************/
initializeGlobals();
if ( insufficientSlideShowMarkup() ) {
return; // Insufficient slide show markup - exit now.
}
// Assert: there's at least one slide image.
if (globals.slideImages.length == 1) {
return; // The solo slide image is already being displayed - exit now.
}
// Assert: there's at least two slide images.
initializeSlideShowMarkup();
globals.wrapperObject.addEventListener('click', toggleSlideShow, false); // If the user clicks a slide show image, it toggles the slide show on and off.
if (globals.buttonObject) {
globals.buttonObject.addEventListener('click', toggleSlideShow, false); // This callback is used to toggle the slide show on and off.
}
startSlideShow();
/* FUNCTIONS ********************************************************************************************/
function initializeGlobals() {
globals.wrapperObject = (document.getElementById(globals.wrapperID) ? document.getElementById(globals.wrapperID) : null);
globals.buttonObject = (document.getElementById(globals.buttonID) ? document.getElementById(globals.buttonID) : null);
if (globals.wrapperObject) {
globals.slideImages = (globals.wrapperObject.querySelectorAll('img') ? globals.wrapperObject.querySelectorAll('img') : []);
}
} // initializeGlobals
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function insufficientSlideShowMarkup() {
if (!globals.wrapperObject) { // There is no wrapper element whose ID is globals.wrapperID - fatal error.
if (globals.buttonObject) {
globals.buttonObject.style.display = "none"; // Hide the not needed slide show button element when present.
}
return true;
}
if (!globals.slideImages.length) { // There needs to be at least one slide <img> element - fatal error.
if (globals.wrapperObject) {
globals.wrapperObject.style.display = "none"; // Hide the not needed <div> wrapper element.
}
if (globals.buttonObject) {
globals.buttonObject.style.display = "none"; // Hide the not needed slide show button element.
}
return true;
}
return false; // The markup expected by this library seems to be present.
} // insufficientSlideShowMarkup
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function initializeSlideShowMarkup() {
var slideWidthMax = maxSlideWidth(); // Returns a value that is always in pixel units.
var slideHeightMax = maxSlideHeight(); // Returns a value that is always in pixel units.
globals.wrapperObject.style.position = "relative";
globals.wrapperObject.style.overflow = "hidden"; // This is just a safety thing.
globals.wrapperObject.style.width = slideWidthMax + "px";
globals.wrapperObject.style.height = slideHeightMax + "px";
var slideCount = globals.slideImages.length;
for (var i = 0; i < slideCount; i++) {
globals.slideImages[i].style.opacity = 0;
globals.slideImages[i].style.position = "absolute";
globals.slideImages[i].style.top = (slideHeightMax - globals.slideImages[i].getBoundingClientRect().height) / 2 + "px";
globals.slideImages[i].style.left = (slideWidthMax - globals.slideImages[i].getBoundingClientRect().width) / 2 + "px";
}
globals.slideImages[0].style.opacity = 1; // Make the first slide visible.
if (globals.buttonObject) {
globals.buttonObject.textContent = globals.buttonStopText;
}
} // initializeSlideShowMarkup
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function maxSlideWidth() {
var maxWidth = 0;
var maxSlideIndex = 0;
var slideCount = globals.slideImages.length;
for (var i = 0; i < slideCount; i++) {
if (globals.slideImages[i].width > maxWidth) {
maxWidth = globals.slideImages[i].width; // The width of the widest slide so far.
maxSlideIndex = i; // The slide with the widest width so far.
}
}
return globals.slideImages[maxSlideIndex].getBoundingClientRect().width; // Account for the image's border, padding, and margin values. Note that getBoundingClientRect() is always in units of pixels.
} // maxSlideWidth
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function maxSlideHeight() {
var maxHeight = 0;
var maxSlideIndex = 0;
var slideCount = globals.slideImages.length;
for (var i = 0; i < slideCount; i++) {
if (globals.slideImages[i].height > maxHeight) {
maxHeight = globals.slideImages[i].height; // The height of the tallest slide so far.
maxSlideIndex = i; // The slide with the tallest height so far.
}
}
return globals.slideImages[maxSlideIndex].getBoundingClientRect().height; // Account for the image's border, padding, and margin values. Note that getBoundingClientRect() is always in units of pixels.
} // maxSlideHeight
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function startSlideShow() {
globals.slideShowID = setInterval(transitionSlides, globals.slideDelay);
} // startSlideShow
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function haltSlideShow() {
clearInterval(globals.slideShowID);
} // haltSlideShow
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function toggleSlideShow() {
if (globals.slideShowRunning) {
haltSlideShow();
if (globals.buttonObject) {
globals.buttonObject.textContent = globals.buttonStartText;
}
}
else {
startSlideShow();
if (globals.buttonObject) {
globals.buttonObject.textContent = globals.buttonStopText;
}
}
globals.slideShowRunning = !(globals.slideShowRunning);
} // toggleSlideShow
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function transitionSlides() {
var currentSlide = globals.slideImages[globals.slideIndex];
++(globals.slideIndex);
if (globals.slideIndex >= globals.slideImages.length) {
globals.slideIndex = 0;
}
var nextSlide = globals.slideImages[globals.slideIndex];
var currentSlideOpacity = 1; // Fade the current slide out.
var nextSlideOpacity = 0; // Fade the next slide in.
var opacityLevelIncrement = 1 / globals.fadeDelay;
var fadeActiveSlidesID = setInterval(fadeActiveSlides, globals.fadeDelay);
function fadeActiveSlides() {
currentSlideOpacity -= opacityLevelIncrement;
nextSlideOpacity += opacityLevelIncrement;
// console.log(currentSlideOpacity + nextSlideOpacity); // This should always be very close to 1.
if (currentSlideOpacity >= 0 && nextSlideOpacity <= 1) {
currentSlide.style.opacity = currentSlideOpacity;
nextSlide.style.opacity = nextSlideOpacity;
}
else {
currentSlide.style.opacity = 0;
nextSlide.style.opacity = 1;
clearInterval(fadeActiveSlidesID);
}
} // fadeActiveSlides
} // transitionSlides
} // slideShow
如果有人能告诉我需要做什么来解决这个问题,我将不胜感激。您可以交换代码,并使用一个完整的替代方法,如果它将工作。
谢谢大家!
我认为关键是把它们放在单独的divs
中。(代码段需要jquery)查看codepen
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
<div id="slideshow">
<div>
<a href= "http://www.musicmatters.ie/index.html"><img src = "http://www.musicmatters.ie/images/bara2.jpg" width="240" height="240" alt = "Agents of Shield" title="Agents of Shield"/> </a>
</div>
<div>
<a href= "http://www.musicmatters.ie/about.html"><img src = "http://www.musicmatters.ie/images/bara3.jpg" width="240" height="240" alt ="The Fantastic Four" title= "The Fantastic Four"/></a>
</div>
<div>
<a href= "http://www.musicmatters.ie/singingamach.html"><img src = "http://www.musicmatters.ie/images/singingamach.jpg" width="240" height="240" alt = "Jurassic World" title = "Jurassic World"/></a>
</div>
<div>
<a href= "http://www.musicmatters.ie/contact.html"><img src="bara4.jpg" alt ="Paul Walker in Furious 7" width="240" height="240" title ="Paul Walker in Furious 7"/></a>
</div>
</div>
参考编辑:将这些类添加到main.css
#slideshow {
margin-top:30px;
margin-left:auto;
margin-right:auto;
padding-bottom:10px;
position: relative;
width: 860px;
height: 470px;
padding-right:0px;
padding-left:0px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left:0px;
right: 0px;
}
并将div重命名为#slideshow。把你的图片放到标签中,幻灯片就会起作用了
相关文章:
- 如果显示当前图像,则禁用链接
- Javascript图像链接
- 更改标记.js图像/链接表达式
- 如何使用javascript从文件夹中获取图像并发布直接链接
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- javascript 将 IMG 标签中的图像转换为 标签中的实际链接图像
- 一键在一个窗口中打开两个不同的链接图像
- 如何使用 jquery 调整超链接图像的大小
- 重写:导航链接图像按钮效果
- 切片盒,链接图像
- 悬停时更改链接图像
- 在Javascript中使用href=mailto链接图像
- 鼠标悬停时链接图像
- 链接图像到网页链接
- 超链接图像不显示Chrome扩展
- 基于ALT标签的链接图像
- 在基于活动链接图像的导航中改变背景位置
- 将文本和超链接图像添加到表格单元格
- 如何在此代码片段中定位链接图像而不是链接文本