0

不知道为什么会发生这种情况，如果我转到 IE 或 Firefox 中的投币滑块页面，JavaScript 可以工作，但是一旦我将它应用于我的本地网站构建，它会将按钮显示为数字并且不显示背景框对于滑块标题。

不过，它在 Google Chrome 中完美运行。我已经三重检查了我的 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;
    }
4

1 回答 1

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>
于 2013-10-30T12:42:42.220 回答