我的幻灯片出现不稳定行为。它由用户点击的寻呼机驱动。单击相应的寻呼机时,下一张图像将变为可见(不透明度/滤镜)并设置为 z-index 5,以便它位于当前图像下方(z-index 10)。当前图像然后淡出,最后,下一张图像设置为当前图像,淡出的图像设置为 z-index 0。但是,这仅在单击返回上一张图像时有效(在 Chrome 中,即表现得更奇怪。)按照图像的顺序。也就是说,
- Chrome :
- "list_slide1"到 "list_slide3"无淡入淡出的即时跳转
- “list_slide3”到“list_slide1”的淡入淡出行为正确
- 然后...
- “list_slide1”到“list_slide3”即时跳转不褪色“list_slide3”到
- “list_slide2”淡入淡出行为正确
- 或者...
- “list_slide1”到“list_slide6”瞬间跳转不褪色
- “list_slide6”到任何前面的 list-slide1-5 淡入淡出行为正确
- IE:
- "list_slide1"到 "list_slide3"无淡入淡出的即时跳转
- 从“list_slide3”到“list_slide1”停顿一秒然后跳转
寻呼机和图像是从数据库动态生成的(因此代码底部有一小段 PHP)。它包含与数据库中页面列出的一样多的元素。
一些注意事项:
1) the fade function is my own take on http://javascript.info/tutorial/animation and has worked just fine in another slideshow elsewhere on the site.
2) getElementsByClass is from http://www.robertnyman.com and returns parent and child elements of the requested class in an array (hence why I call current[0] etc.)
谢谢。
<script type="text/javascript">
var pager = document.getElementById('pager1');
var list_pagers = document.getElementById('pagers')
var i = 0;
var next_slide = function(next) {
if (next.className !== 'slide_current') {
if (getElementsByClassName('slide_pending').length === 0) {
var current = getElementsByClassName('slide_current');
next.className = 'slide_pending';
next.style.zIndex = 5;
next.style.opacity = 1;
next.style.filter = 'alpha(opacity = 100)';
next.style.display = 'block';
fade(current[0], linear, 1000);
var fadeSlide = switcher(next, current);
}
}
}
var switcher = function(now, then) {
setTimeout(function() {
now.className = 'slide_current';
now.style.zIndex = 10;
now.style.opacity = 1;
now.style.filter = 'alpha(opacity = 100)';
then[0].className = 'slide_hide';
then[0].style.zIndex = 0;
then[0].style.opacity = 0;
then[0].style.filter = 'alpha(opacity = 0)';
then[0].style.display = 'none';
}, 1001);
}
<?php
// dynamically build event for each pager/slide in the show.
for ($k = 1; $k <= $i; $k++) {
echo 'var next_slide' .$k. ' = document.getElementById("list_slide" +' .$k. '); ',
'addEvent(list_pagers.childNodes[' .($k - 1). '], "click", function () {next_slide(next_slide' .$k. ')}); ';
}
?>
最佳答案
请原谅我没有发布您确切问题的答案,但出于以下原因,我会避免自己编写 Javascript 插件:
- Web 上已有数百个,其中一些是在 GitHub 上作为开源开发的,可通过协作开发防止潜在问题。
- 无需重新发明轮子;只需花 20 分钟在谷歌上搜索 javascript slider ,然后找到一个您可以根据需要自定义的 slider 。
我喜欢使用的一对是“caroufredsel”,它响应迅速并提供了一些不错的功能(动态添加元素、回调等)。
另一个是“flexslider”。
关于javascript - JS 幻灯片以一种方式工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15338459/