我弄乱了html,css和jquery,并且遇到了这个问题。我有一个幻灯片显示,该幻灯片使用容器中的fadeIn和fadeOut获取图像,但是当我按“ next”时,它将重置页面并将下一张图像加载到底部的某个位置。你能告诉我什么问题吗?
的HTML
<div class="slideshow ">
<div class="container">
<div class="slides">
<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
</div>
<div class="container ">
<ul class="slider-dots">
<a href="#/" class="arrow-prev"><<</a>
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<a href="#/" class="arrow-next">>></a>
</ul>
</div>
</div>
jQuery的
var main=function(){
$('.arrow-next').click(function(event){
event.stopPropagation();
var currentSlide=$('.active-slide');
var nextSlide=$('.active-slide').next();
var currentDot=$('.active-dot');
var nextDot=currentDot.next();
if(nextSlide.length==0) {nextDot=$('.dot').first(); nextSlide=$('.slide').first();}
currentSlide.fadeOut().removeClass('active-slide');
nextSlide.fadeIn().addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(event){
event.stopPropagation();
var currentSlide=$('.active-slide');
var prevSlide=currentSlide.prev();
var currentDot=$('.active-dot');
var prevDot=currentDot.prev();
if(prevSlide.length==0) {prevDot=$('.dot').last(); prevSlide=$('.slide').last();}
currentSlide.fadeOut().removeClass('active-slide');
prevSlide.fadeIn().addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
您可以在此http://jsfiddle.net/1zLd58yo/中看到所有内容fiddle
看起来您有一个淡出然后是一个淡入。淡出后,图像消失,然后出现新图像。淡入淡出后会重涂/发生。
应用以下CSS规则来解决您的问题。
在div.slides上-设置固定的宽度和高度-将位置设置为相对
在图像上,-设置位置=绝对
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句