淡入淡出每隔几秒就会发生变化的图像
fadein fadeout images that changing every few sec
我已经设法编写了js,使图像每隔几秒钟就发生一次更改(10个图像,每次更改都没有重复)。但我想让它看起来更好(转换),也许可以添加jQuery(fadein-fadeout)。但由于我不太了解jQuery,我甚至不知道如何开始。。。这是我的代码
<script type = "text/javascript">
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
var random = shuffle(numbers);
var images = [], x = -1;
images[0] = "logaban/image1.png";
images[1] = "logaban/image2.png";
images[2] = "logaban/image3.png";
images[3] = "logaban/image4.png";
images[4] = "logaban/image5.png";
images[5] = "logaban/image6.png";
images[6] = "logaban/image7.png";
images[7] = "logaban/image8.png";
images[8] = "logaban/image9.png";
images[9] = "logaban/image10.png";
var links = [], x = -1;
links[0] = "link1";
links[1] = "link2";
links[2] = "link3";
links[3] = "link4";
links[4] = "link5";
links[5] = "link6";
links[6] = "link7";
links[7] = "link8";
links[8] = "link9";
links[9] = "link10";
function zmiana() {
shuffle(numbers);
document.getElementById("img1").src = images[numbers[0]];
document.getElementById("bannerLink1").href = links[numbers[0]];
document.getElementById("img2").src = images[numbers[1]];
document.getElementById("bannerLink2").href = links[numbers[1]];
document.getElementById("img3").src = images[numbers[2]];
document.getElementById("bannerLink3").href = links[numbers[2]];
document.getElementById("img4").src = images[numbers[3]];
document.getElementById("bannerLink4").href = links[numbers[3]];
document.getElementById("img5").src = images[numbers[4]];
document.getElementById("bannerLink5").href = links[numbers[4]];
document.getElementById("img6").src = images[numbers[5]];
document.getElementById("bannerLink6").href = links[numbers[5]];
document.getElementById("img7").src = images[numbers[6]];
document.getElementById("bannerLink7").href = links[numbers[6]];
document.getElementById("img8").src = images[numbers[7]];
document.getElementById("bannerLink8").href = links[numbers[7]];
document.getElementById("img9").src = images[numbers[8]];
document.getElementById("bannerLink9").href = links[numbers[8]];
document.getElementById("img10").src = images[numbers[9]];
document.getElementById("bannerLink10").href = links[numbers[9]];
}
function logotypy() {
setInterval(zmiana, 3000);
zmiana();
}
</script>
<img src="logaban/image1.png" onload = "logotypy()" style="display: none">
<a id="bannerLink1" href="">
<img id="img1" class="image" src="" style="max-width:100%;"></a><br>
<a id="bannerLink2" href="">
<img id="img2" class="image" src="" style="max-width:100%;"></a><br>
<a id="bannerLink3" href="">
<img id="img3" class="image" src="" style="max-width:100%;"></a><br>
<a id="bannerLink4" href="">
<img id="img4" class="image" src="" style="max-width:100%;"></a><br>
<a id="bannerLink5" href="">
<img id="img5" class="image" src="" style="max-width:100%;"></a><br>
<a id="bannerLink6" href="">
<img id="img6" class="image" src="" style="max-width:100%;"></a><br>
<a id="bannerLink7" href="">
<img id="img7" class="image" src="" style="max-width:100%;"></a><br>
<a id="bannerLink8" href="">
<img id="img8" class="image" src="" style="max-width:100%;"></a><br>
<a id="bannerLink8" href="">
<img id="img9" class="image" src="" style="max-width:100%;"></a><br>
<a id="bannerLink10" href="">
<img id="img10" class="image" src="" style="max-width:100%;"></a><br>
这是我添加的第一个attepmt,但我真的不知道该如何使用那些jQuery的东西,尤其是在这种情况下。。。
<script src="jquery-1.9.0.js" type="text/javascript"></script>
<script>
$("#image").attr("src").change().fadein();
</script>
我真的不知道你想用所有的代码做什么。下面是一个简单的jQuery幻灯片,它使用了两个叠加的图像对象。它将一个淡出,另一个淡出。它假设图像已经预加载,并且您有一个带有适当CSS的容器div来格式化它(您可以在jsFiddle中看到这些细节)。
function runSlideshow(container, urls, fadeTime, delayTime) {
// all images are preload now
// start the slideshow
var imgs = $(container).append(new Image()).append(new Image()).find("img");
var curImage = 0;
var urlIndex = -1;
// no wait time for the first transition
var waitTime = 0;
function next() {
// set src on the next image
// fade out the current image
// fade in the new image
var nextImage = (curImage + 1) % 2;
urlIndex = (urlIndex + 1) % urls.length;
imgs.eq(curImage).delay(waitTime).fadeOut(fadeTime);
imgs.eq(nextImage).attr("src", urls[urlIndex]).delay(waitTime).fadeIn(fadeTime, next);
curImage = nextImage;
// set normal wait time for subsequent images
waitTime = delayTime;
}
next();
}
工作演示:http://jsfiddle.net/jfriend00/ZkqC4/
预加载图像并在完成后发出通知可以在下面的答案中看到:支持事件的图像预加载程序javascript
相关文章:
- 一个变化:在加载图像之前加载元素
- 如何在浏览器宽度/高度变化时动态调整图像网格的大小
- 如何根据动态变化的百分比值为图像上色
- 滚动时背景图像发生变化
- 将鼠标悬停在图像上,图像的不透明度和图像下方标题的颜色会发生变化..同样,当标题变成两行时,它会破坏格式
- 淡入淡出每隔几秒就会发生变化的图像
- Jquery-背景图像随select中的数据属性而变化
- 将图像悬停在左侧时,右侧的图像会发生变化
- 按下和向上键时,Javascript图像会发生变化
- 如何在引导轮播的高度随响应而变化时保持引导程序轮播中响应式图像的纵横比
- 如何在时间变化时旋转图像
- 当圆形图像在圆轮中发生变化时,如何在顶部显示标签
- 水平居中高度变化的图像,而不会扭曲图像
- 当模型更改时,AngularJS图像SRC会发生变化
- 可缩放的背景图像,点击后会发生变化
- 如何创建一个带有导航箭头和播放/暂停的图像转盘,点击后会发生变化
- 我应该在什么时候用CSS和Javascript控制背景图像的变化
- 悬停时背景图像发生变化
- 与图像幻灯片放映相对应的文本颜色变化
- Jquery中弹出的图像的边距变化量由什么决定