不确定为什么会发生这种情况，如果我在 IE 或 Firefox 中转到硬币 slider 页面，JavaScript 可以工作，但是一旦我将它应用到我的站点的本地构建中，它就会将按钮显示为数字并且不显示 slider 标题的背景框。
不过它在谷歌浏览器中完美运行。我已经三次检查了我的 html 和 css，它看起来是正确的，有什么想法吗？
它如何出现在 Chrome 中，以及它如何出现在 IE/Firefox 中(将鼠标悬停在第二张图片中的圆圈上)。
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" type="type/css" href="coin-slider-styles.css">
</head>
<body>
<div id="container">
<div id="coin-slider">
<a href="group.html">
<img src="img/sliderGroup.jpg">
<span>
heading1
</span>
</a>
<a href="plan.html">
<img src="img/sliderPlan.jpg">
<span>
heading2
</span>
</a>
<a href="num.html" >
<img src="img/sliderNum.jpg">
<span>
heading3
</span>
</a>
<a href="exp.html" >
<img src="img/sliderExp.jpg">
<span>
heading4
</span>
</a>
<a href="rep.html">
<img src="img/sliderRep.jpg">
<span>
heading5
</span>
</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({width:800, height:300, spw: 12, sph: 5, sDelay: 1, delay: 6000, opacity:0.95, hoverPause: true, links: true, effect: 'rain' , titleSpeed: 500});
});
</script>
</body>
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative;
}
.coin-slider a{
text-decoration: none;
outline: none;
border: none;
}
.cs-buttons {
font-size: 0px;
padding: 10px;
float: left;
}
.cs-buttons a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
border-radius: 100%;
color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #454545;
color: #FFFFFF;
}
.cs-title {
width: 780px;
padding: 10px;
background-color: #454545;
color: #FFFFFF;
font-size: 13px;
}
.cs-prev, .cs-next {
background-color: #454545;
color: #FFFFFF;
padding: 0 10px 0 0;
}
最佳答案
这里运行良好 http://jsfiddle.net/sarath704/cgU9R/
检查一下哪里有问题
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
$('#coin-slider').coinslider({width:800, height:300, spw: 12, sph: 5, sDelay: 1, delay: 6000, opacity:0.95, hoverPause: true, links: true, effect: 'rain' , titleSpeed: 500});
});
</script>
<style>
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative;
}
.coin-slider a{
text-decoration: none;
outline: none;
border: none;
}
.cs-buttons {
font-size: 0px;
padding: 10px;
float: left;
}
.cs-buttons a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
border-radius: 100%;
color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #454545;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="coin-slider">
<a href="group.html">
<img src="http://workshop.rs/projects/coin-slider/games/mini_ninjas.jpg" alt="Mini Ninjas" />
<span>
heading1
</span>
</a>
<a href="plan.html">
<img src="http://workshop.rs/projects/coin-slider/games/prince_of_persia.jpg" alt="Price of Persia" />
<span>
heading2
</span>
</a>
<a href="num.html" >
<img src="http://workshop.rs/projects/coin-slider/games/spiderman_shattered_dimensions.jpg" alt="Spiderman: Shattered Dimensions" />
<span>
heading3
</span>
</a>
<a href="exp.html" >
<img src="http://workshop.rs/projects/coin-slider/games/brink.jpg" alt="Brink" />
<span>
heading4
</span>
</a>
<a href="rep.html">
<img src="http://workshop.rs/projects/coin-slider/games/borderlands.jpg" alt="Borderlands" />
<span>
heading5
</span>
</a>
</div>
</div>
</body>
</html>
关于javascript - Coin-Slider 无法正确显示按钮(Chrome 除外)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19680513/