jquery图像滑块“Unslider”无法正常工作

我得到这个片段http://unslider.com/。我做了一切要求，让它工作。但不知何故，它似乎没有加载队列中的下一个图像，并作为回报给出一个空白空间......你可以在这里看到它。 easycounseling.org/new.html ..下面的代码：jquery图像滑块“Unslider”无法正常工作

<script> 
$(function() { 
$('.ss-area').unslider(); 
}); 
</script> 
<div class="ss-area clearfix"> 
<ul class="img-sli"> 
<li class="fimg"> 




<div class="contents clearfix"> 
     <div class="info-box"> 
      <h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2> 
      <div class="con-us-btn-wr"> 
       <button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button> 
      </div> 
      <p> 
       to signup and avail of our limited period promotional offer! 
      </p> 

     </div> 
    </div> 
    <div class="mer-usp-wr"> 
     <ul class="mer-usp clearfix" style="font-size:18px;"> 
      <li><a href="#hi-con">DEmo DEmo </a></li>     
      <li><a href="#bett-pri">DEmo DEmo DEmo </a></li> 
      <li><a href="#zero-sign">DEmo e</a></li> 
      <li><a href="#grt-supp">DEmo DEmo </a></li> 
      <li><a href="#go-mob">DEmo DEmo </a></li> 
     </ul> 
    </div> 



</li> 



<li class="simg"> 




<div class="contents clearfix"> 
     <div class="info-box"> 
      <h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2> 
      <div class="con-us-btn-wr"> 
       <button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button> 
      </div> 
      <p> 
       to signup and avail of our limited period promotional offer! 
      </p> 

     </div> 
    </div> 
    <div class="mer-usp-wr"> 
     <ul class="mer-usp clearfix" style="font-size:18px;"> 
      <li><a href="#hi-con">DEmo DEmo </a></li>     
      <li><a href="#bett-pri">DEmo DEmo DEmo </a></li> 
      <li><a href="#zero-sign">DEmo e</a></li> 
      <li><a href="#grt-supp">DEmo DEmo </a></li> 
      <li><a href="#go-mob">DEmo DEmo </a></li> 
     </ul> 
    </div> 



</li> 







</ul> 








</div>

来源

2013-07-27 Abdul Majid

的plugin is based on jQuery library

所以你需要包括jQuery和插件脚本文件，使其工作。它们的加载顺序很重要

---> jQuery 

---> unslider plugin

把它放在你已经包含其他脚本文件的部分。您始终可以通过在浏览器的开发人员工具中检查控制台来对此进行测试。它清楚地显示了错误。

来源

2013-07-27 20:49:16

但我已经补好它。我把jQuery和以正确的顺序uslider插件。 –

你现在有没有改变它，或者你在谈论的问题链接 –

不，我已经改变它之前发布的问题... http://www.easycounseling.org/new.html ..这就是我“米工作:) –

嗨检查这个我unslider.com帮助文件：

 <!-- The HTML --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

    <head> 
    <title>Unslider.com example</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://unslider.com/unslider.min.js"type="text/javascript"></script> 

     <!-- JavaScript --> 

    <script type="text/javascript"> 

$(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: false    // Support responsive design. May break non-responsive designs 

}); 
var unslider = $('.banner').unslider(); 

    $('.prev').click(function() { 
     unslider.data('unslider').prev(); 
    }); 

    $('.next').click(function() { 
     unslider.data('unslider').next(); 
    }); 
    return false; 
}); 
</script> 

    <!-- CSS --> 
    <style type="text/css"> 

* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
} 

.banner { 
position: relative; 
width: 100%; 
overflow: auto; 
top: 50px; 
/*z-index: -1;*/ 

font-size: 18px; 
line-height: 24px; 
text-align: center; 

color: #FFFFFF; 
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); 

background: #FFFFFF; 
box-shadow: 0 1px 2px rgba(0,0,0,.25); 
} 
.banner ul { 
list-style: none; 
width: 300%; 
} 
.banner ul li { 
display: block; 
float: left; 

min-height: 500px; 

-o-background-size: 100% 100%; 
-ms-background-size: 100% 100%; 
-moz-background-size: 100% 100%; 
-webkit-background-size: 100% 100%; 
background-size: 100% 100%; 

box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); 
} 

.banner .inner { 
padding: 360px 0 110px; 

float: left; 
vertical-align:-100px; 
} 

.banner h1, .banner h2 { 

font-size: 40px; 
line-height: 52px; 
color: #fff; 
} 

.banner .btn { 
display: inline-block; 
margin: 25px 0 0; 
padding: 9px 22px 7px; 
clear: both; 

color: #fff; 
font-size: 12px; 
font-weight: bold; 
text-transform: uppercase; 
text-decoration: none; 
border : rgba(255, 255, 255, 0.4) solid 2px; 
border-radius: 5px; 
} 
.banner .btn:hover { 
background : rgba(255, 255, 255, 0.05); 
} 
.banner .btn:active { 
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
} 

.banner .btn, .banner .dot { 
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
} 

.banner .dots { 
position: absolute; 
left: 0; 
right: 0; 
bottom: 20px; 
width: 100%; 
} 
.banner .dots li { 
display: inline-block; 

width: 10px; 
height: 10px; 
line-height: 10px; 
margin: 0 4px; 

text-indent: -999em; 


border: 2px solid #fff; 
border-radius: 6px; 

cursor: pointer; 
opacity: .4; 

-webkit-transition: background .5s, opacity .5s; 
-moz-transition: background .5s, opacity .5s; 
transition: background .5s, opacity .5s; 
} 
.banner .dots li.active { 
background: #fff; 
opacity: 1; 
} 




.unslider-arrow { 
    font-family: Expressway; 
    font-size: 50px; 
    text-decoration: none; 
    color: #3d3d3d; 
    background: rgba(255,255,255,0.7); 
    padding: 0 20px 5px 20px; 
} 

.next { 
    position: absolute; 
    top: 65%; 
    right: 0 
} 

.prev { 
    position: absolute; 
    top: 65%; 
    right: 90 /* change to left:0; if u wanna have arrow on left side */ 
} 
</style> 
    </head> 
    <!-- Body of HTML document --> 

    <body> 
     <div class="slider"> 
     <div class="banner"> 
      <ul> 
      <li style="background-image: url('http://lorempixel.com/1200/600/');"> 
      <div class="inner"> 
       <h1>Some h1 text</h1> 
      <p>smaller p text</p> 

       <a class="btn" href="http://www.yourlink.com">Hyperlink</a> 
      </div> 
      </li> 

      <li style="background-image: url('http://lorempixel.com/1200/600/');"> 
      <div class="inner"> 
       <h1>Some h1 text</h1> 
      <p>smaller p text</p> 

       <a class="btn" href="http://www.yourlink.com">Hyperlink</a> 
       </div> 
       </li> 

      <li style="background-image: url('http://lorempixel.com/1200/600/');"> 
      <div class="inner"> 
       <h1>Some h1 text</h1> 
      <p>smaller p text</p> 

       <a class="btn" href="http://www.yourlink.com">Hyperlink</a> 
       </div> 
      </li> 

      <li style="background-image: url('http://lorempixel.com/1200/600/');"> 
      <div class="inner"> 
       <h1>Some h1 text</h1> 
      <p>smaller p text</p> 

       <a class="btn" href="http://www.yourlink.com">Hyperlink</a> 
      </div> 
      </li> 
     </ul> 


     </div> 
      <a href="#" class="unslider-arrow prev">&larr;</a> 
      <a href="#" class="unslider-arrow next">&rarr;</a> 
     </div> 
    </body> 

</html>

来源

2014-06-21 16:52:57 Denzelq

jquery图像滑块“Unslider”无法正常工作

回答

相关问题