Question

我一直在拼命地解决我的问题而且我在代码中找不到错误。所以我正在编程的是一个与jQuery一起工作的滑块，我完全按照我的意愿完成了所有操作，但后来我做了一些完全不相关的更改而且它不再起作用了。我的问题是（正如你在jsfiddle中看到的那样）导航滑块的箭头不会（总是）显示出来。它们只出现在Interval的最后（见jsfiddle）。我对.mouseenter和.mouseleave - 处理程序做错了吗？你会建议使用`.hover-handler？

提前致谢

JSFiddle：http://jsfiddle.net/VincentBS/ogm967bz

如果有帮助：Here是滑块编程的网站

$(document).ready(function(){


	hideArrows();
	hideImages();

	$(".back").click(function(){prevImage()});

	$(".pre").click(function(){nextImage()});

	$("#slider").mouseenter(function(){ 
		//showArrows();
		$(".back").show();
		$(".pre").show();
	})

	$("#slider").mouseleave(function(){ 
		//hideArrows();
		$(".back").hide();
		$(".pre")	 .hide();
	})

	start();

});

function hideArrows(){

	$(".back").hide();
	$(".pre")	 .hide();
}

function showArrows(){

	$(".back").show();
	$(".pre")	 .show();
}

function hideImages(){

	$("#2").hide();
	$("#3").hide();
	$("#4").hide();
	$("#5").hide();
}

function start(){
    
    // save when we started for calculating progress
    var startedAt = Date.now();
    
    // set animation bounds
    var startValue = 1;
    var endValue   = 100;

    // figure out how much change we have over the whole animation
    var delta = endValue - startValue;

    // Animation function, to run at 60 fps.
    t = setInterval(function(){
        
        // How far are we into the animation, on a scale of 0 to 1.
        var progress = (Date.now() - startedAt) / 5000;
        
        // If we passed 1, the animation is over so clean up.
        if (progress > 1) {
         nextImage();   
        }
        
    }, 1000 / 60);

}

function prevImage(){	

	var id = document.getElementsByClassName("activeslider")[0].id;
	var next = parseInt(id) - 1;
	if(next < 1){next = 5}
	next = "#" + next.toString();
	id = "#" + id.toString();
	$(id).removeClass("activeslider").fadeOut();
	$(next).addClass("activeslider").fadeIn();
	clearInterval(t);
	start();
}

function nextImage(){	

	var id = document.getElementsByClassName("activeslider")[0].id;
	var next = parseInt(id) + 1;
	if(next > 5){next = 1}
	next = "#" + next.toString();
	id = "#" + id.toString();
	$(id).removeClass("activeslider").fadeOut();
	$(next).addClass("activeslider").fadeIn();
	clearInterval(t);
	start();
}

#slider {

	float: left;
	width: 700px;
	height: 233px;
}

.back, .pre {

	background-color: #EB5A00;
	opacity: 1;
	margin-top: 92px;
	color: #FFF;
	font-size: 25px;
	text-align: center;
	padding: 12.5px 7.5px;
	cursor: pointer;
	z-index: 1001;

}

.back {
	float: left;
	margin-left: 10px;
}

.pre {
	float: right;
	margin-right: 10px;
}

#slider, .back, .pre {
	-webkit-user-drag: none;
	-moz-user-select: none;
	user-drag: none;
}

.sliderimage {
	width: 100%;
}

#slider img {
	position: absolute;
	width: 700px;
	-webkit-user-drag: none;
	-moz-user-select: none;
	user-drag: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
    <img class="sliderimage activeslider" src="http://dev.hvgg.de/file_upload/data15749.jpg" id="1" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15750.jpg" id="2" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15751.jpg" id="3" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15752.jpg" id="4" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15753.jpg" id="5" />
    <span class="back">&#9664;</span>
	<span class="pre">&#9654;</span>
</div>

Answer 1

我已经将你的CSS调整了一点.back, .pre

$(document).ready(function(){


	hideArrows();
	hideImages();

	$(".back").click(function(){prevImage()});

	$(".pre").click(function(){nextImage()});

	$("#slider").mouseenter(function(){ 
		//showArrows();
		$(".back").show();
		$(".pre").show();
	})

	$("#slider").mouseleave(function(){ 
		//hideArrows();
		$(".back").hide();
		$(".pre")	 .hide();
	})

	start();

});

function hideArrows(){

	$(".back").hide();
	$(".pre")	 .hide();
}

function showArrows(){

	$(".back").show();
	$(".pre")	 .show();
}

function hideImages(){

	$("#2").hide();
	$("#3").hide();
	$("#4").hide();
	$("#5").hide();
}

function start(){
    
    // save when we started for calculating progress
    var startedAt = Date.now();
    
    // set animation bounds
    var startValue = 1;
    var endValue   = 100;

    // figure out how much change we have over the whole animation
    var delta = endValue - startValue;

    // Animation function, to run at 60 fps.
    t = setInterval(function(){
        
        // How far are we into the animation, on a scale of 0 to 1.
        var progress = (Date.now() - startedAt) / 5000;
        
        // If we passed 1, the animation is over so clean up.
        if (progress > 1) {
         nextImage();   
        }
        
    }, 1000 / 60);

}

function prevImage(){	

	var id = document.getElementsByClassName("activeslider")[0].id;
	var next = parseInt(id) - 1;
	if(next < 1){next = 5}
	next = "#" + next.toString();
	id = "#" + id.toString();
	$(id).removeClass("activeslider").fadeOut();
	$(next).addClass("activeslider").fadeIn();
	clearInterval(t);
	start();
}

function nextImage(){	

	var id = document.getElementsByClassName("activeslider")[0].id;
	var next = parseInt(id) + 1;
	if(next > 5){next = 1}
	next = "#" + next.toString();
	id = "#" + id.toString();
	$(id).removeClass("activeslider").fadeOut();
	$(next).addClass("activeslider").fadeIn();
	clearInterval(t);
	start();
}

#slider {

	float: left;
	width: 700px;
	height: 233px;
}

.back, .pre {

	background-color: #EB5A00;
	opacity: 1;
	top: 92px; /* Chnages here */
	color: #FFF;
	font-size: 25px;
	text-align: center;
	padding: 12.5px 7.5px;
	cursor: pointer;
	z-index: 1001;
    position:absolute; /* Chnages here */

}

.back {
	float: left;
	left: 10px; /* Chnages here */
}

.pre {
	float: right;
	right: 10px; /* Chnages here */
}

#slider, .back, .pre {
	-webkit-user-drag: none;
	-moz-user-select: none;
	user-drag: none;
}

.sliderimage {
	width: 100%;
}

#slider img {
	position: absolute;
	width: 700px;
	-webkit-user-drag: none;
	-moz-user-select: none;
	user-drag: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
    <img class="sliderimage activeslider" src="http://dev.hvgg.de/file_upload/data15749.jpg" id="1" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15750.jpg" id="2" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15751.jpg" id="3" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15752.jpg" id="4" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15753.jpg" id="5" />
    <span class="back">&#9664;</span>
	<span class="pre">&#9654;</span>
</div>

Answer 2

位置问题我已经改变了一些css属性

    #slider {

    float: left;
    width: 700px;
    height: 233px;
  position: relative;
}

.back, .pre {

    background-color: #EB5A00;
    opacity: 1;
    color: #FFF;
    font-size: 25px;
  position: absolute;
    text-align: center;
    padding: 12.5px 7.5px;
    cursor: pointer;
    z-index: 1001;

}

.back {
     left: 0;
    margin-left: 10px;
    top: 50%;
}

.pre {
      margin-right: 10px;
    right: 0;
    top: 50%;
}

#slider, .back, .pre {
    -webkit-user-drag: none;
    -moz-user-select: none;
    user-drag: none;
}

.sliderimage {
    width: 100%;
}

#slider img {
    position: absolute;
    width: 700px;
    -webkit-user-drag: none;
    -moz-user-select: none;
    user-drag: none;
}

http://jsfiddle.net/ogm967bz/1/

Answer 3

参考：http://jsfiddle.net/ogm967bz/8/

在文件

中添加以下css

position:relative;

下的

.back, .pre {
background-color: #EB5A00;
opacity: 1;
margin-top: 92px;
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
cursor: pointer;
position:relative;

}

jQuery mouseenter和mouseleave处理程序无法正常工作

3 个答案: