Coin-Slider無法正確顯示按鈕（Chrome中除外）

不確定爲什麼會出現這種情況，如果我在IE或Firefox的JavaScript工程中使用coin-slider頁面，但是一旦將其應用到我的本地版本一個網站將按鈕顯示爲數字，並且不顯示滑塊標題的背景框。Coin-Slider無法正確顯示按鈕（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; 
    }

來源

2013-10-30 GSP

，能得到任何404對缺少的媒體？你可以張貼小提琴嗎？ – grimmus

沒有，沒有404's - 我有一些臨時媒體用於我的本地構建。下面是來自帖子下方的JFiddle，但在我的計算機上似乎根本不起作用（列出所有圖片而不是顯示幻燈片）。 http://jsfiddle.net/sarath704/cgU9R/ – GSP

這在 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-30 12:42:42 sarath

感謝添加JFiddle，但它不在這裏運行，它將圖像顯示在列表中而不是幻燈片中。 – GSP

它只顯示像幻燈片 – sarath

是的，幻燈片的作品，但標題的背景不顯示，字體顏色是不正確的，代表不同幻燈片的圓圈顯示爲與頁面背景相同的顏色。 – GSP

Coin-Slider無法正確顯示按鈕（Chrome中除外）

回答

相關問題