jquery滑块不适用于DIV

时间:2014-11-11 07:12:19

标签: javascript jquery

我希望有一个jquery轮播滑块,可以在屏幕上和屏幕上滑动整个div。当我将鼠标悬停在图像上时,它没有做任何事情。

JS

$(document).ready(function(){
  $('#rightcolumn').bxSlider();
});

HTML

<div id="rightcolumn">
<img  src="" class="imageright" style="position: absolute; z-index: 0; "/>
<img  src="Images/Interior-Main-Base.png" class="imageright main" style="position: absolute; z-index: 0; "/>
<img id="Kitchen1e" src="Images/enabled.png" style="visibility:hidden" class="imageright"/>
<img id="Kitchen2e" src="Images/tiny.png" style="visibility:hidden" class="imageright"/>
<img id="Third_Car1e" src="Images/Interior-Main-3rd Car.png" style="visibility:hidden" class="imageright"/>
<img id="Third_Car2e" src="Images/tiny111.png" style="visibility:hidden" class="imageright"/>
<img id="Laundry_Up1e" src="Images/Interior-Main-Laundry Up.png" style="visibility:hidden" class="imageright"/>
<img id="Laundry_Up2e" src="Images/tiny113.png" style="visibility:hidden" class="imageright"/>
<img id="Open_Great1e" src="Images/Interior-Main-Open Great.png" style="visibility:hidden" class="imageright"/>
<img id="Open_Great2e" src="Images/tiny115.png" style="visibility:hidden" class="imageright"/>
<img id="KitchenMouseover" src="Images/Interior-Main-2' Kitchen.png" style="visibility:hidden" class="imageright"/>
<img id="Third_CarMouseover" src="Images/Interior-upper-3rd10.png" style="visibility:hidden" class="imageright"/>
<img id="Laundry_UpMouseover" src="Images/Interior-Main-Laundry Up11.png" style="visibility:hidden" class="imageright"/>
<img id="Open_GreatMouseover" src="Images/Interior-Main-Open Great12.png" style="visibility:hidden" class="imageright"/>
 </div>

1 个答案:

答案 0 :(得分:0)

使用它:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
  $('#rightcolumn').bxSlider();
});
 </script>
 <ul id="rightcolumn">
  <li><img src="images/1.jpg" /></li>
  <li><img src="images/2.jpg" /></li>
  <li><img src="images/3.jpg" /></li>
  <li><img src="images/4.jpg" /></li>
</ul>

下载  1. jquery.bxslider.min.js和  2. jquery.bxslider.css  从这里http://bxslider.com/