Question

通过此链接http://www.basic-slider.com/，您如何正确执行激活部分以使滑块起作用。它不适合我。

我尝试在HTML的末尾添加激活。我还有什么应该做的吗？还有一个CSS，我把它全部链接到。

它不会显示为滑块。看起来所有图像都堆叠成一排。

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Untitled Document</title>
<!-- Include the jQuery library (local or CDN) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Include the plugin *after* the jQuery library -->
<script src="bjqs.min.js"></script>
<!-- Include the basic styles -->
<link type="text/css" rel="Stylesheet" href="bjqs.css"/>

</head>

<body>
<div id="my-slideshow">
    <ul class="bjqs">
  <li><img src="Images/10348456_10152777234672079_8895502383205190278_n.jpg" width="960" height="643" alt=""/></li>
  <li><img src="Images/10357242_10152854252912079_6697226139684450554_n.jpg" width="960" height="643" alt=""/></li>
  <li><img src="Images/10373798_10152777231167079_6764153200051084338_n.jpg" width="960" height="643" alt=""/></li>
  <li><img src="Images/10675514_10152777235022079_7077159589057168251_n.jpg" width="960" height="643" alt=""/></li>
  <li><img src="Images/10382982_10152889566692079_7286817993901058386_n.jpg" width="960" height="643" alt=""/></li>
</ul>
</div>

<script>
jQuery(document).ready(function($) {
    $('#banner-fade').bjqs({
        'height' : 320,
        'width' : 620,
        'responsive' : true
    });
</script>

CSS：

/ *基本的jQuery Slider基本样式* /

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}



    </body>
    </html>

Answer 1

您需要在html中使用id

所以

$('#banner-fade').bjqs({

应该是

$('#my-slideshow').bjqs({

JQuery和Sliders麻烦

1 个答案: