Мой баннер 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);
}