[英]JQuery Slider with table and image
我是jQuery新手。 所以我不知道如何完美地解決這個問題,但是在這里我有一排充滿圖像,我需要使其像滑塊一樣在無限循環中運行。 搜索了很多地方,但不得不失望地返回。 我該如何工作?
<table id="boxes" style="border: 1px solid #666;">
<tr>
<td>
<img src="images/image1.jpg" width="173" height="110" class="imgborder" />
<img src="images/image2.jpg" width="173" height="110" class="imgborder" />
<img src="images/image3.jpg" width="173" height="110" class="imgborder" />
<img src="images/image4.jpg" width="173" height="110" class="imgborder" />
<img src="images/image5.jpg" width="173" height="110" class="imgborder" />
<img src="images/image6.jpg" width="173" height="110" class="imgborder" />
<img src="images/image7.jpg" width="173" height="110" class="imgborder" />
</td>
</tr>
</table>
嘗試jQuery Cycle。 我知道這是最簡單的。 http://jquery.malsup.com/cycle/
我認為插件是個好主意。 如果您希望圖像行像股票行情自動收錄器一樣滾動,則可以使用jQuery SimpleScroll之類的東西。 如果您想要標准的幻燈片放映,可以嘗試像Nivo Slider這樣的輕巧圖像滑塊
如果您不想使用任何插件,請嘗試使用此簡單的jQuery Slider
<style type="text/css">
#boxes img {
display: none;
}
#boxes .active {
display: block !important;
}
</style>
<table id="boxes" style="border: 1px solid #666;">
<tr>
<td> <img src="res/i/img.jpg" width="173" height="110" class="imgborder" /> <img src="res/i/revamp/ajax-loader.gif" width="173" height="110" class="imgborder" /> <img src="res/i/revamp/yellowspike.gif" width="173" height="110" class="imgborder" /> </td>
</tr>
</table>
<script src="res/js/rvmp_admin/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#boxes img:first").addClass('active');
setInterval(function() {
InitializeSlider();
}, 3000);
function InitializeSlider() {
if($("#boxes img").hasClass('active')) {
var nextImg;
if(($("#boxes .active").index() + 1) == $("#boxes img").length) {
nextImg = $("#boxes img:first");
} else {
nextImg = $("#boxes .active").next();
}
$("#boxes .active").hide("slow").removeClass("active");
nextImg.addClass('active');
} else {
$("#boxes img:first").addClass('active');
}
}
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.