不能得到unslider工作的演示代碼

我想按照http://unslider.com/上的說明進行操作，但是我無法使其工作。不能得到unslider工作的演示代碼

這是我的，沒有任何顯示。

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="http://unslider.com/unslider.min.js"></script> 

    <style> 
     .banner { position: relative; overflow: auto; } 
     .banner li { list-style: none; } 
      .banner ul li { float: left; } 
    </style> 
</head> 
<body> 

    <div class="banner"> 
     <ul> 
      <li>This is a slide.</li> 
      <li>This is another slide.</li> 
      <li>This is a final slide.</li> 
     </ul> 
    </div> 


    <script> 
      $(function() { 
       $('.banner').unslider(); 
      }); 
    </script> 
</body> 
</html>

來源

2013-11-01 fakeguybrushthreepwood

看看你的JavaScript控制檯。那裏有什麼？ – Turnip

沒有什麼恐怕 – fakeguybrushthreepwood

做如果你想看一些圖片，請添加一些圖片

<html> 
<head> 
<style> 
.banner { position: relative; overflow: auto; } 
    .banner li { list-style: none; } 
     .banner ul li { float: left; } 
</style> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://unslider.com/unslider.min.js"></script> 
<script> 
$(function() { 
    $('.banner').unslider(); 
}); 
</script> 
</head> 
<body> 
<div class="banner"> 
    <ul> 
     <li><img src="http://cdn.arstechnica.net/wpcontent/uploads/2012/10/06_Place_20773_1_Mis.jpg"></li> 
     <li><img src="http://s3.firstpost.in/wp-content/uploads/2012/11/300vsSA-Getty.jpg"></li> 

    </ul> 
</div> 
</body>

來源

2013-11-01 10:45:48

由於某種原因http://cdn.arstechnica.net/wpcontent/uploads/2012/10/06_Place_20773_1_Mis.jpg沒有載入我的最後，所以作爲一個澳大利亞人，我添加了一張jpeg的Shane Warne作爲圖像＃1 :)，效果很好。謝謝。 – fakeguybrushthreepwood

板球愛好者.. :) –

也許你會錯過CSS風格。把這個在您的<head>：

<style> 
    @import url("http://unslider.com/style.css"); 
    .banner { position: relative; overflow: auto; } 
    .banner li { list-style: none; } 
    .banner ul li { float: left; } 
</style>

JSBIN

來源

2013-11-01 10:39:57

因爲你沒有在你的代碼，任何css加入其中，原邊有以下CSS添加

http://unslider.com/style.css

Check this working example.

來源

2013-11-01 10:42:35

檢查這個不錯的教程！

http://www.youtube.com/watch?v=qBOB9scHnwo

您需要包含腳本

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://unslider.com/unslider.min.js"></script>

橫幅DIV

<style> 
    .banner { 
     position: relative; 
     width: 100%; 
     overflow: auto; 
     padding: 0px; 
     margin: 0px; 
    } 
    .banner ul { 
     padding: 0px; 
     margin: 0px; 
    } 
    .banner li{ 
    padding: 0px; 
    margin: 0px; 
    } 
    .banner ul li { 
     float:left; 
     padding: 0px; 
     margin: 0px; 
     min-height: 200px; 
     -webkit-background-size: 100% auto; 
     -moz-background-size: 100% auto; 
     -o-background-size: 100% auto; 
     -ms-background-size: 100% auto; 
     background-size: 100% auto; 
     background-position-y: -75px; 
     box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); 
    } 
</style>

的風格，並開始unslider

<script> 
    $(document).ready(function(){ 
     $('.banner').unslider({ 
     speed: 500,    // The speed to animate each slide (in milliseconds) 
     delay: 3000,    // The delay between slide animations (in milliseconds) 
     complete: function() {}, // A function that gets called after every slide animation 
     keys: true,    // Enable keyboard (left, right) arrow shortcuts 
     dots: true,    // Display dot navigation 
     fluid: true    // Support responsive design. May break non-responsive designs 
     }); 
    }); 
</script>

來源

2014-02-04 09:19:05 ja4

不能得到unslider工作的演示代碼

回答

相關問題