所以我得到了这个幻灯片代码工作,当你点击一个图像,它淡入另一个图像。但是,例如,如果右侧有空白空间的垂直定向图像,如果您单击该空间,整个幻灯片将会出现一些毛刺。JavaScript幻灯片故障点击图像周围的空白处
这里是我的网站,你可以测试一下:
代码:
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 img").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
CSS:
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
max-height: 600px;
max-width: 600px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.visible {
opacity: 1;
z-index: 1;
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf2" class="shadow">
<img class="visible" src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="1"/>
<img src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" alt="2"/>
<img src="http://i.dailymail.co.uk/i/pix/2013/11/03/article-2486855-192ACC5200000578-958_964x682.jpg" alt="3"/>
<img src="http://mstatic.mit.edu/nom150/items/199-HybridImage.jpg" alt="4"/>
</div>
试图找到毛刺,我无法找到任何东西。你能更具体地说明这个故障是如何发生的吗?页面冻结了吗?选择高亮棒?一群蝗虫侵入你的家? (这种情况偶尔会发生在我身上)。 – zer00ne
我明白了。但非常感谢你的帮助! –