- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我为内部 CMS 创建了一个旋转图像横幅模块。我没有为此编写所有的jquery,这就是为什么我有点困惑。
基本上,问题是页面重新加载后横幅中显示的第一个图像不会像其余图像那样淡出。我知道这可能是因为它是加载的默认图像,而不是导致图像横幅旋转的循环的一部分。横幅可以在这里看到:http://www.easyspacedesign.com/craig/dentalwise/
请注意,重新加载排序后的第一个图像如何跳转到下一个图像,但随后所有图像都会平滑地淡入和淡出。
如何在重新加载后抓取第一张图像并使其像休息一样淡出?
这是代码:
<script type="text/javascript">
<!--
var doLooop = true;
$(document).ready(function(){
setInterval("loop()",5000);
});
function loop(){
if(!doLooop){ return; }
var $total = parseInt($("input[name=total_slides]").val());
var $id = parseInt($("a._active").attr("rel"));
var $new = $id+1;
if($new>$total){$new=1;}
changeSlide($new);
}
function changeSlide($id){
// Prepare selectors
var $total = $("input[name=total_slides]").val();
var $txtSlt = "#_slideText_"+$id;
var $imgSlt = "#_slideImg_"+$id;
var $active = $("a._active").attr("id");
var $new_img_href = "#animation_selectors a:nth-child("+$id+") img";
var $new_active = "#animation_selectors a:nth-child("+$id+")";
// Hide active images and text
$(".slideImg").css("display","none");
$(".slideTxt").css("display","none");
// Display selected images and text
$($txtSlt).fadeIn(1200);
$($imgSlt).fadeIn(1200);
$($txtSlt).delay(2500).fadeOut(1200);
$($imgSlt).delay(2500).fadeOut(1200);
// Update active anchor image
$("a._active img").attr("src","<?php echo ROOT; ?>Images/StyleImages/off.png");
$("a._active").removeClass("_active");
$($new_img_href).attr("src","<?php echo ROOT; ?>Images/StyleImages/on.png");
$($new_active).addClass("_active");
}
$(function(){
$("#animation_selectors a").click(function(e){
e.preventDefault();
var $id = $(this).attr("rel");
doLooop = false;
changeSlide($id);
});
});
-->
</script>
<div id="animation">
<div id="animation_slides">
<?php
$img_sql = "SELECT strImageUrl FROM tbl_mod_Animation ORDER BY intAnimationID";
if($img = $db->get_results($img_sql)){ $i=1;
foreach($img as $img){
if($i!=1){ $display = " style=\"display:none;\""; } else { $display = ""; }
echo "<div id=\"_slideImg_$i\" class=\"slideImg\" $display><img src=\"".ROOT."Images/Uploads/Slides/".$img->strImageUrl."\" alt=\"\" /></div>";
$i++;
}
}
?>
</div>
<div id="animation_text">
<?php
$text_sql = "SELECT strText FROM tbl_mod_Animation ORDER BY intAnimationID";
if($text = $db->get_results($text_sql)){ $i=1;
foreach($text as $text){
if($i!=1){ $display = " style=\"display:none;\""; } else { $display = ""; }
echo "<div id=\"_slideText_$i\" class=\"slideTxt\" $display>".$text->strText."</div>";
$i++;
}
}
?>
</div>
<div id="animation_selectors">
<?php
for($x=1;$x<$i;$x++){
if($x==1){
?><a id="slide_opt<?php echo $x; ?>" href="#" rel="<?php echo $x; ?>" class="_active"><img class="slideOpt" src="<?php echo ROOT; ?>Images/StyleImages/on.png" alt="" /></a><?php
} else {
?><a id="slide_opt<?php echo $x; ?>" href="#" rel="<?php echo $x; ?>"><img class="slideOpt" src="<?php echo ROOT; ?>Images/StyleImages/off.png" alt="" /></a><?php
}
}
echo "<input type=\"hidden\" name=\"total_slides\" value=\"".($i-1)."\" />";
?>
</div>
</div><!--end of animation-->
<?php
?>
最佳答案
changeSlide() 将每张幻灯片设置为淡入,然后在 2.5 秒内淡出。 Loop() 每 5 秒调用一次 changeSlide() 并传递要显示的下一张幻灯片的 id。问题是第一张幻灯片在页面重新加载时的设置方式不同。它可能只是用 _active 类静态地写在页面上。
您最好不要设置延迟以在 2.5 秒后淡出每张幻灯片,而是将上一张和下一张幻灯片都传递给 changeSlide 函数,然后淡出上一张并淡入下一张。
function loop() {
...
changeSlide($id, $new);
}
然后在changeSlide中:
function changeSlide($prev, $next) {
...
var $prevTxtSlt = "#_slideText_" + $prev;
var $prevImgSlt = "#_slideImg_" + $prev;
var $nextTxtSlt = "#_slideText_" + $prev;
var $nextImgSlt = "#_slideImg_" + $prev;
...
$($prevTxtSlt).fadeOut(1200);
$($prevImgSlt).fadeOut(1200);
$($nextTxtSlt).fadeIn(1200);
$($nextImgSlt).fadeIn(1200);
}
关于javascript - Jquery 旋转图像横幅第一图像问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7595917/
相信我,我在 Adsense 论坛(西类牙语和英语)中问过这个问题,还检查了以下资源和问题: 1 - 2 - 3 - 4 我有一个实际与 AdMob 配合使用的 AdSense 帐户。我们在 Andr
我想创建一个标题图像/横幅,单击播放图像后,它会垂直扩展以播放YouTube上托管的视频。 此页面准确显示了我要执行的操作: blendedlearningnow.com/about。 我不确定这是否
这里有一个漂亮的 Flash 横幅:http://osc4.template-help.com/drupal_30779/ 。我想知道是否有一个 jquery 库可以让我达到同样的效果。 (点击、滑动
我在一个宽度为 960px 的容器 div 中有一个标题。页眉包含几个完全位于页面中央的 Logo 。我想有一个背景渐变永远延伸到标题后面。出现问题是因为渐变横幅受限于 960px 的宽度。我尝试将横
有谁知道是否可以创建一个功能标题生成器,使用户能够使用颜色、图像和文本对其进行自定义?然后保存并添加到他们的网站? I have created a feature banner demo here
通常在我的网页中,我会有一个 #wrapper DIV 来包装整个页面并设置为如下内容: #wrap {position: relative; width: 1000px; display: bloc
我正在寻找一种动态创建可以放置在其他页面上的横幅的方法。横幅包含一个背景图像、两个重叠图像和两个位于该背景图像之上的文本标签。 是不是只能用绝对定位来实现元素的叠加?我如何确保横幅本身相对放置在集成页
我有一个 900 x 80 的标题区域,以及一个适合该区域左上角的 175 x 75 Logo 。我想要做的是使用 jquery 将 Logo 从标题区域的右侧移动到左侧,然后卡住并设置在左侧。我知道
我成功地在页脚上显示智能横幅,然后将其处理掉。我的问题是显示在应用程序的所有页面上。 我的问题是:如何只显示在一页上? @override void initState() { super.i
我主要是一名开发人员,不知道使用 Adobe Flash CS4。是否有一种简单的方法可以将链接添加到 Flash 横幅。我有 .flv 文件,其中包含库中的一些项目和两层。 请给我一步一步的指示
如何在响应式布局中处理 Adsense 横幅? 据我从 Adsense TOS 中了解到,我几乎不允许在客户端对横幅做任何事情,所以我不能在客户端将横幅切换到较小的分辨率,如果它是低分辨率的. 似乎我
ChannelBannerResource chBannerResource = new ChannelBannerResource(); chBannerResource.setKind("yout
下面附有代码,我正在尝试使用 javascript 制作横幅。 使用 setInterval 我做了一个循环,一个接一个地显示 3 个 div。 我遇到的问题是,当循环结束时,有一个按钮显示“返回”,
我即将在拥有 1000 个活跃用户的应用程序中实现 AdMob 横幅。 我有 1 个 main Activity,其中包含 5 个 fragment,每个 fragment 代表不同的选项卡。 我应该
我尝试在我的应用中实现 AdMob 横幅,但它没有显示。我已经使用了横幅,并且总是使用相同的方式..我有一个带有 View 的 FrameLayout 。此 FrameLayout 位于 Linear
我在我的第一款游戏中使用 Andengine 与 Mobclix 结合使用,每当我尝试运行该应用程序时,我都会在 LogCat 中收到巨大错误。我到处都搜索过,但似乎找不到答案。 FATAL EXCE
JS: document.getElementsByTagName("input, select, textarea, option, optgroup, fieldset, label").onch
我想在页面底部安装一个横幅,但它与主屏幕的内容重叠。在主屏幕中有很多内容并且有滚动。 有人知道为什么吗?谢谢。 XML android:id="
我想在屏幕顶部显示横幅,但是有问题。在我的代码中(这不是我的代码,因为我正在学习过程中)我有两个选择。在屏幕底部的屏幕下方或上方显示横幅。 public void showBanner(fin
我的 AdMob 横幅显示在屏幕顶部而不是底部。 这是我的代码: adView = new AdView(mSingleton); adView.setAdSize(AdSize.SMART_BANN
我是一名优秀的程序员,十分优秀!