我的javascript/jquery横幅跳转到页面加载的最后一张幻灯片，然后快速返回到第一张幻灯片。有没有一种简单的方法可以让它在加载页面时停留在第一张幻灯片上？如果有更多帮助的话，我也可以在网页上发布我的css。请看下面的脚本：
var jqb_vCurrent = 0;
var jqb_vTotal = 0;
var jqb_vDuration = 6000;
var jqb_intInterval = 0;
var jqb_vGo = 1;
var jqb_vIsPause = false;
var jqb_tmp = 20;
var jqb_title;
var jqb_imgW = 680;
var jqb_imgH = 200;
jQuery(document).ready(function() {
jqb_vTotal = $(".jqb_slides").children().size() -1;
$(".jqb_info").text($(".jqb_slide").attr("title"));
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
//Horizontal
$("#jqb_object").find(".jqb_slide").each(function(i) {
jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
$(this).animate({"left": jqb_tmp+"px"}, 500);
});
$("#btn_pauseplay").click(function() {
if(jqb_vIsPause){
jqb_fnChange();
jqb_vIsPause = false;
$("#btn_pauseplay").removeClass("jqb_btn_play");
$("#btn_pauseplay").addClass("jqb_btn_pause");
} else {
clearInterval(jqb_intInterval);
jqb_vIsPause = true;
$("#btn_pauseplay").removeClass("jqb_btn_pause");
$("#btn_pauseplay").addClass("jqb_btn_play");
}
});
$("#btn_prev").click(function() {
jqb_vGo = -1;
jqb_fnChange();
});
$("#btn_next").click(function() {
jqb_vGo = 1;
jqb_fnChange();
});
});
function jqb_fnChange(){
clearInterval(jqb_intInterval);
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
jqb_fnLoop();
}
function jqb_fnLoop(){
if(jqb_vGo == 1){
jqb_vCurrent == jqb_vTotal ? jqb_vCurrent = 0 : jqb_vCurrent++;
} else {
jqb_vCurrent == 0 ? jqb_vCurrent = jqb_vTotal : jqb_vCurrent--;
}
$("#jqb_object").find(".jqb_slide").each(function(i) {
if(i == jqb_vCurrent){
jqb_title = $(this).attr("title");
$(".jqb_info").animate({ opacity: 'hide', "left": "-50px"}, 250,function(){
$(".jqb_info").text(jqb_title).animate({ opacity: 'show', "left": "0px"}, 500);
});
}
//Horizontal Scrolling
jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
$(this).animate({"left": jqb_tmp+"px"}, 500);
});
}
这是我在实际网页上的HTML：
<div id="jqb_object">
<div class="jqb_slides">
<div class="jqb_slide" title="Vision System" >
<a href="<?php changeLink('products/overview.php'); ?>">
<p id="p1">Flowchart programming, powerful toolset, advanced application solving power.</p>
<img src="img/xg.jpg" title="" alt=""/>
</a>
</div>
<div class="jqb_slide" title="Scan Cameras" >
<a href="<?php changeLink('products/vision/xg8000l/overview.php'); ?>">
<p id="p2">Choose from our 2K, 4K, and 8K line scan camera for your web or cylindrical part inspection!</p>
<img src="img/line-scan-camera_lrg.jpg" title="" alt=""/>
</a>
</div>
<div class="jqb_slide" title="Vision System">
<a href="<?php changeLink('products/vision/xg8000l/overview.php'); ?>">
<p id="p3">Features a triple-core processor and multi-camera connectivity including line scan cameras.</p>
<img src="img/xg-8000.jpg" title="" alt=""/>
</a>
</div>
<div class="jqb_slide" title="Questions? Ask the expert." >
<span>Do you have a question about our vision systems? Click here to contact our experts at Vision Support!<a href="<?php changeLink('products/vision/xg8000l/overview.php'); ?>"></a>.</span>
</div>
</div>
<div class="jqb_bar">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>
</div>
这是我的CSS
#jqb_object img{
border: none;
}
#jqb_object a {
color:#000;
text-decoration:none;
}
#jqb_object a:link ,
#jqb_object a:visited ,
#jqb_object a:active {
font-family: Arial, Verdana, Sans-Serif;
font-size: 12px;
text-decoration:none;
}
#jqb_object a:hover {
color:#000;
text-decoration:none;
}
#jqb_object {
position:relative;
width:680px; height:200px;
overflow:hidden;
}
#jqb_object .jqb_bar{
position:absolute;
width:680px; height: 30px;
left:0px;
bottom:0px;
background:#000000;
opacity:0.7;
filter:alpha(opacity=70);
color: #ffffff;
font-family: Georgia,serif;
font-weight: bold;
font-size: 18px;
letter-spacing: 0.5px;
}
#jqb_object .jqb_slide{
position:absolute;
width:680px; height:200px;
font-family: Arial, Verdana, Sans-Serif;
font-weight: bold;
font-size: 18px;
letter-spacing: -1px;
text-align: left;
background-color:#FFF
}
#jqb_object .jqb_info{
position:absolute;
padding: 2px 10px 2px 10px;
float: left;
}
#jqb_object .jqb_btn{
width: 15px; height: 14px;
margin: 10px 5px 2px 2px;
float: right;
}
#jqb_object .jqb_btn_next{
background-image:url(../img/btn_next.gif);
}
#jqb_object .jqb_btn_prev{
background-image:url(../img/btn_prev.gif);
}
#jqb_object .jqb_btn_pause{
background-image:url(../img/btn_stop.gif);
}
#jqb_object .jqb_btn_play{
background-image:url(../img/btn_play.gif);
}
#p1{
position: absolute;
right: 7.3em;
width: 270px;
font-family:Verdana, Geneva, sans-serif;
font-weight: bold; top: 1.2em; font-size: 18.5px;
line-height:1.5em;
letter-spacing:0.02em;
text-shadow:1px -1px 1px rgba(255, 255, 255, 0.5), 1px -1px 1px rgba(0, 0, 0, 0.7);
}
#p2{
position: absolute;
width: 290px;
font-family:Verdana, Geneva, sans-serif;
padding: 1px;
font-weight: bold;
font-size: 18.5px;
letter-spacing:0.02em;
line-height:1.5em;
text-shadow:1px -1px 1px rgba(255, 255, 255, 0.5), 1px -1px 1px rgba(0, 0, 0, 0.7);
}
#p3{
position: absolute;
right: 2.5em;
font-family:Verdana, Geneva, sans-serif;
width: 310px;
font-weight: bold;
top: 1.3em;
font-size: 18.5px;
line-height:1.5em;
letter-spacing:0.02em;
text-shadow:1px -1px 1px rgba(255, 255, 255, 0.5), 1px -1px 1px rgba(0, 0, 0, 0.7);
}
好吧，你想要的是实现一个旋转木马。。。在元素周围无限移动的滑块。
你不需要编码它…已经构建了很多jquery插件，你只需要调用一个函数：D
以下是一些直接链接和33个插件的列表，请尽情享受：]
- JCarousel-作者Jan Sorgalla
- jQuery旋转木马
- 33+最佳jQuery旋转木马插件
---编辑---
好的。。让我们来解决你的问题：]
你的CSS有点错误。。。事实上，你正试图以不同的方式构建一个旋转木马。。。在大多数情况下，你不会为每个元素设置动画，只会为它们位于某个遮罩内的容器设置动画。。
但是，在您的情况下，认为这个CSS代码可以修复它：
#jqb_object .jqb_slide:first-child{
z-index:1;
}