我的javascript / jquery banner跳转到页面加载的最后一张幻灯片，然后快速返回第一张幻灯片。是否有一种简单的方法可以让它在页面加载时保留在第一张幻灯片上？我也可以在网页上发布我的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);
}
答案 0 :(得分：0)
好的，你想要的是实现一个Carousel ......一个在元素周围无限移动的滑块。
您不需要对其进行编码...已经构建了许多jquery插件，您只需要调用一个函数：D
以下是一些直接链接和33个插件的列表，享受它：]
---编辑---
好的..让我们解决你的问题：]
你的CSS有点不对...事实上，你正试图以不同的方式构建一个旋转木马...在大多数情况下，你没有动画每个元素，只是他们的容器在一些面具里面..
但是，在你的情况下，认为这个CSS代码可以解决它：
#jqb_object .jqb_slide:first-child{
z-index:1;
}