我在一个页面上有四个幻灯片,我想在循环中运行。它们非常简单,基于Jon Raasch's简单的JQuery幻灯片。
我很擅长标记和CSS,但还不是很精通javascript。现在,我可以播放一张幻灯片,但不能同时播放四张幻灯片。我希望得到一些帮助让所有四个人都能上班。谢谢!
JS:
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$('#slider1').bxSlider({
auto: true,
autoControls: true,
pause: 3000,
slideMargin: 20
});
$('#slider2').bxSlider({
auto: true,
autoControls: true,
pause: 3000,
slideMargin: 20
});
$('#slider3').bxSlider({
auto: true,
autoControls: true,
pause: 3000,
slideMargin: 20
});
$('#slider4').bxSlider({
auto: true,
autoControls: true,
pause: 3000,
slideMargin: 20
});
</script>
CSS:
.slider {
position: relative;
float: right;
padding-right: 400px;
margin-left: 40px;
height: 350px;
}
.slider img {
position: absolute;
max-width: 350px;
height: auto;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
top: 0;
left: 0;
z-index: 8;
}
标记式:
<div>
<div class="slider">
<ul id="slider1">
<li><img src="images/.../art-1.jpg" /></li>
<li><img src="images/.../art-2.jpg" /></li>
<li><img src="images/.../art-3.jpg" /></li>
<li><img src="images/.../art-4.jpg" /></li>
<li><img src="images/.../art-5.jpg" /></li>
</ul>
</div>
</div>
<div>
<div class="slider">
<ul id="slider2">
<li><img src="images/.../bnl-1.jpg" /></li>
<li><img src="images/.../bnl-2.jpg" /></li>
<li><img src="images/.../bnl-3.jpg" /></li>
<li><img src="images/.../bnl-4.jpg" /></li>
<li><img src="images/.../bnl-5.jpg" /></li>
</ul>
</div>
</div>
<div>
<div class="slider">
<ul id="slider3">
<li><img src="images/.../bge-1.jpg" /></li>
<li><img src="images/.../bge-2.jpg" /></li>
<li><img src="images/.../bge-3.jpg" /></li>
<li><img src="images/.../bge-4.jpg" /></li>
<li><img src="images/.../bge-5.jpg" /></li>
</ul>
</div>
</div>
<div>
<div class="slider">
<ul id="slider4">
<li><img src="images/.../rtb-1.jpg" /></li>
<li><img src="images/.../rtb-2.jpg" /></li>
<li><img src="images/.../rtb-3.jpg" /></li>
<li><img src="images/.../rtb-4.jpg" /></li>
<li><img src="images/.../rtb-5.jpg" /></li>
</ul>
</div>
</div>
答案 0 :(得分:1)
简单幻灯片放映的问题在于它很简单。考虑切换到bxSlider或Bootstrap's slider,两者都可以容纳多个开箱即用的实例。
如果你真的想和这个人一起战斗,请将slideSwitch()函数传递给一个ID并使用它代替'#slideshow'。
function slideSwitch(id, switchSpeed, activeClass) {
var $active = $(id + ' IMG.' + activeClass);
...
您还可以{gag}复制该功能3次并更改每个功能中的ID,有效地运行脚本四次。
function slideSwitch1(switchSpeed,activeClass) {
var $active = $('#slideshow1 IMG.' + activeClass);
function slideSwitch2(switchSpeed,activeClass) {
var $active = $('#slideshow2 IMG.' + activeClass);
...