[英]JQuery Slider with table and image
I am new to jQuery. 我是jQuery新手。 So I don't know how to perfectly fix this, but here I have a row full of images, I need to make it run in a infinite loop like a slider. 所以我不知道如何完美地解决这个问题,但是在这里我有一排充满图像,我需要使其像滑块一样在无限循环中运行。 Have searched many places, but had to return with disappointment. 搜索了很多地方,但不得不失望地返回。 How do I make this work? 我该如何工作?
<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>
Try jQuery Cycle. 尝试jQuery Cycle。 It's the simpliest I know. 我知道这是最简单的。 http://jquery.malsup.com/cycle/ http://jquery.malsup.com/cycle/
I think a plugin would be a good idea. 我认为插件是个好主意。 If you want the row of images to scroll like a stock ticker, you can use something like jQuery SimpleScroll . 如果您希望图像行像股票行情自动收录器一样滚动,则可以使用jQuery SimpleScroll之类的东西。 If you want a standard slideshow you could try a lightweight image slider like Nivo Slider 如果您想要标准的幻灯片放映,可以尝试像Nivo Slider这样的轻巧图像滑块
If you don't want to use any plugin then try this simple jQuery 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.