Javascript 链接在滑块中显示下一张幻灯片的链接。为什么？
我正在制作一个滑块，所有的事情都很好，但问题是它在当前幻灯片的下一张幻灯片上显示链接。如何修复它？您可以在Javascript 链接在滑块中显示下一张幻灯片的链接。为什么？,javascript,html,css,slider,gallery,Javascript,Html,Css,Slider,Gallery,我正在制作一个滑块，所有的事情都很好，但问题是它在当前幻灯片的下一张幻灯片上显示链接。如何修复它？您可以在 <script type='text/javascript'> //<![CDATA[ /* general variables */ var galleryId = 'gallery'; /* change this to the ID of the gallery list */ var gallery; /* this will be the object
<script type='text/javascript'>
//<![CDATA[
/* general variables */
var galleryId = 'gallery'; /* change this to the ID of the gallery list */
var gallery; /* this will be the object reference to the list later on */
var galleryImages; /* array that will hold all child elements of the list */
var currentImage; /* keeps track of which image should currently be showing */
var previousImage;
var preInitTimer;
preInit();
/* functions */
function preInit() {
/* an inspired kludge that - in most cases - manages to initially hide the image gallery list
before even onload is triggered (at which point it's normally too late, and the whole list already
appeared to the user before being remolded) */
if ((document.getElementById)&&(gallery=document.getElementById(galleryId))) {
gallery.style.visibility = "hidden";
if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */
} else {
preInitTimer = setTimeout("preInit()",2);
}
}
function fader(imageNumber,opacity) {
/* helper function to deal specifically with images and the cross-browser differences in opacity handling */
var obj=galleryImages[imageNumber];
if (obj.style) {
if (obj.style.MozOpacity!=null) {
/* Mozilla's pre-CSS3 proprietary rule */
obj.style.MozOpacity = (opacity/100) - 0;
} else if (obj.style.opacity!=null) {
/* CSS3 compatible */
obj.style.opacity = (opacity/100) - 0;
} else if (obj.style.filter!=null) {
/* IE's proprietary filter */
obj.style.filter = "alpha(opacity="+opacity+")";
}
}
}
function fadeInit() {
if (document.getElementById) {
preInit(); /* shouldn't be necessary, but IE can sometimes get ahead of itself and trigger fadeInit first */
galleryImages = new Array;
var node = gallery.firstChild;
/* instead of using childNodes (which also gets empty nodes and messes up the script later)
we do it the old-fashioned way and loop through the first child and its siblings */
while (node) {
if (node.nodeType==1) {
galleryImages.push(node);
}
node = node.nextSibling;
}
for(i=0;i<galleryImages.length;i++) {
/* loop through all these child nodes and set up their styles */
galleryImages[i].style.position='absolute';
galleryImages[i].style.top=0;
galleryImages[i].style.zIndex=0;
/* set their opacity to transparent */
fader(i,0);
}
/* make the list visible again */
gallery.style.visibility = 'visible';
/* initialise a few parameters to get the cycle going */
currentImage=0;
previousImage=galleryImages.length-1;
opacity=100;
fader(currentImage,100);
/* start the whole crossfade process after a second's pause */
window.setTimeout("crossfade(100)", 1000);
}
}
function crossfade(opacity) {
if (opacity <= 100) {
/* current image not faded up fully yet...so increase its opacity */
fader(currentImage,opacity);
/* fader(previousImage,100-opacity); */
opacity += 5;
window.setTimeout("crossfade("+opacity+")", 10);
} else {
/* make the previous image - which is now covered by the current one fully - transparent */
fader(previousImage,0);
/* current image is now previous image, as we advance in the list of images */
previousImage=currentImage;
currentImage+=1;
if (currentImage>=galleryImages.length) {
/* start over from first image if we cycled through all images in the list */
currentImage=0;
}
/* make sure the current image is on top of the previous one */
galleryImages[previousImage].style.zIndex = 0;
galleryImages[currentImage].style.zIndex = 100;
/* and start the crossfade after a second's pause */
opacity=0;
window.setTimeout("crossfade("+opacity+")", 5000);
}
}
/* initialise fader by hiding image object first */
addEvent(window,'load',fadeInit)
/* 3rd party helper functions */
/* addEvent handler for IE and other browsers */
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
}
}
//]]>
</script>
<style type="text/css">
#slider {max-height:700px;background: url("https://lh6.googleusercontent.com/-LLFEz-EyGbk/UyV9SbGPuhI/AAAAAAAAMgY/JNqf8X11dbk/s220/slider-loader.gif") #2e2e2e no-repeat 50% 50%;}
#gallery {padding:0;position:relative;margin:0 auto;max-width:1920px;}
#gallery li {list-style-type:none;width:100%;display:block;}
.gallery_img img {max-width:100%;}
.gallery_text {width:1000px;margin:0 auto;text-align:center;position:absolute;top:50%;left:50%;margin-left:-500px;margin-top:-110px;}
.gallery_text h2 {padding:0;line-height:70px;font-size:50px;font-weight:inherit;color:#fff;}
.gallery_text p {margin:20px 0;line-height:24px;font-size:20px;color:#ffee66;}
.gallery_text a {background:#77aa00;display:inline-block;padding:20px 70px;font-size:18px;font-weight:700;text-transform:uppercase;color:#fff;text-decoration:none;}
.gallery_text a:hover {background:#fff;color:#000;}
</style>
<div class='clear'/>
<div id='slider'>
<ul id='gallery'>
<li style='position:relative!important;'>
<div class='gallery_img'><img alt='Google' src='https://lh4.googleusercontent.com/-Nh50j1-Bqws/UyV9Pv_wd3I/AAAAAAAAMf8/nsYUnwm35Gs/s1920/slide_1.jpg' title='Google'/></div>
<div class='gallery_text'><h2>Google</h2><p>Google is an American multinational corporation specializing in Internet-related services and products. These include online advertising technologies, search, cloud computing, and software. Most of its profits are derived from AdWords.</p><a href='http://www.google.com'>Open Google</a></div>
</li>
<li>
<div class='gallery_img'><img alt='Bing' src='https://lh4.googleusercontent.com/-eGrPYj9dz1c/UyV9QgDIh5I/AAAAAAAAMgM/mlcDdyufQJs/s1920/slide_2.jpg' title='Bing'/></div>
<div class='gallery_text'><h2>Bing</h2><p>Bing is a search engine that brings together the best of search and people in your social networks to help you spend less time searching and more time doing.</p><a href='http://www.bing.com'>Open Bing</a></div>
</li>
<li>
<div class='gallery_img'><img alt='Yahoo' src='https://lh6.googleusercontent.com/-L_s8vxgupPY/UyV9RKToZeI/AAAAAAAAMgQ/TWs-wy7lbrk/s1920/slide_3.jpg' title='Yahoo'/></div>
<div class='gallery_text'><h2>Yahoo</h2><p>Yahoo! Inc. is an American multinational Internet corporation headquartered in Sunnyvale, California.</p><a href='http://www.yahoo.com'>Open Yahoo</a></div>
</li>
</ul>
</div>
<div class='clear'/>
//
#滑块{最大高度：700px；背景：url（“https://lh6.googleusercontent.com/-LLFEz-EyGbk/UyV9SbGPuhI/AAAAAAAAMgY/JNqf8X11dbk/s220/slider-loader.gif）#禁止重复50%50%；]
#库{填充：0；位置：相对；边距：0自动；最大宽度：1920px；}
#库li{列表样式类型：无；宽度：100%；显示：块；}
.gallery_img img{最大宽度：100%；}
.gallery_文本{宽度：1000px；边距：0自动；文本对齐：中心；位置：绝对；顶部：50%；左侧：50%；左侧边距：-500px；顶部边距：-110px；}
.gallery_text h2{填充：0；线宽：70px；字体大小：50px；字体重量：继承；颜色：#fff；}
.gallery_text p{边距：20px 0；行高：24px；字体大小：20px；颜色：#ffee66；}
.gallery_文本a{背景：#77aa00；显示：内联块；填充：20px 70px；字体大小：18px；字体重量：700；文本转换：大写；颜色：#fff；文本装饰：无；}
.gallery#u text a:悬停{背景：#fff；颜色：#000；}
位置：相对！重要；'>
谷歌谷歌是一家专门从事互联网相关服务和产品的美国跨国公司。其中包括在线广告技术、搜索、云计算和软件。它的大部分利润来自广告词
BingBing是一个搜索引擎，它将最好的搜索和您社交网络中的人聚集在一起，帮助您减少搜索时间，增加搜索时间
雅虎雅虎！公司是一家美国跨国互联网公司，总部位于加利福尼亚州桑尼维尔
galleryImages[previousImage].style.zIndex = 0;
galleryImages[currentImage].style.zIndex = 100;
galleryImages[previousImage].style.zIndex = 100;
galleryImages[(currentImage + 1) % galleryImages.length].style.zIndex = 0;
opacity=0;
window.setTimeout(function() {
galleryImages[previousImage].style.zIndex = 0;
galleryImages[previousImage].style.opacity = 0;
crossfade(opacity);
}, 5000);
previousImage=currentImage等。很难看到发生了什么。尽量简化它。使用这个…..）<代码>
liz-indexopacityz-indexopacityz-indexopacity可接受的previous=next