Question

我遇到了问题，我无法找到解决方案。我使用this plugin来显示随机图片。

我现在需要做的就是刷新div内容。但是，当我这样做动画停止了！它显示彼此重叠的图片，没有动画。

这是我要刷新的代码。

<script>
    var auto_refresh = setInterval(function () {
        $('#updatepic').load('updatepicx.php');
    }, 5000); 
</script>

<div id="updatepicx"></div>

如果我执行updatepicx.php，它就有效。但无论我在index.php中尝试刷新它，动画都会停止。

可能是什么问题？

这是updatepicx.php代码

<?php include('core/init.php');
include('includes/article.php');?>
<?php


$article = new Article;
$articles=$article->fetch_all4();

$categorie = new Article;
$categories=$categorie->fetch_allonecategorie();

$image = new Article;
$images=$image->fetch_all6();



?>
<script type= "text/javascript"  src="includes/widgets/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="slidepics/core.js"></script>
        <script type="text/javascript" src="slidepics/selector.js"></script>
        <script type="text/javascript" src="slidepics/event.js"></script>
        <script type="text/javascript" src="slidepics/ajax.js"></script>
        <script type="text/javascript" src="slidepics/fx.js"></script>
        <script type="text/javascript" src="slidepics/iutil.js"></script>
        <script type="text/javascript" src="slidepics/idrag.js"></script>
        <script type="text/javascript" src="slidepics/accordion.js"></script>
        <script type="text/javascript" src="slidepics/carousel.js"></script>
        <script type="text/javascript" src="slidepics/fisheye.js"></script>
        <script type="text/javascript" src="slidepics/iautocompleter.js"></script>
        <script type="text/javascript" src="slidepics/icassistant.js"></script>
        <script type="text/javascript" src="slidepics/iexpander.js"></script>
        <script type="text/javascript" src="slidepics/imagebox.js"></script>
        <script type="text/javascript" src="slidepics/iresizable.js"></script>
        <script type="text/javascript" src="slidepics/iselect.js"></script>
        <script type="text/javascript" src="slidepics/islider.js"></script>
        <script type="text/javascript" src="slidepics/islideshow.js"></script>
        <script type="text/javascript" src="slidepics/isortables.js"></script>
        <script type="text/javascript" src="slidepics/ittabs.js"></script>
<style>
    <style type="text/css" media="screen">

img
{
    border: none;
}

#carousel
{
        width: 700px;
    height: 150px;
    position: absolute;
       top: 1%;
    left: 16%;
}
#carousel a
{
    position: absolute;
    width: 110px;
}

#ImageBoxOverlay
{
    background-color: #000;
    z-index: 1000;
}
#ImageBoxOuterContainer{
    z-index: 1000;
}
#ImageBoxCaption
{
    background-color: #F4F4EC;
}
#ImageBoxContainer
{
    width: 250px;
    height: 250px;
    background-color: #F4F4EC;
}
#ImageBoxCaptionText
{
    font-weight: bold;
    padding-bottom: 5px;
    font-size: 13px;
    color: #000;
}
#ImageBoxCaptionImages
{
    margin: 0;
}
#ImageBoxNextImage
{
    background-image: url(images/spacer.gif);
    background-color: transparent;
}
#ImageBoxPrevImage
{
    background-image: url(images/spacer.gif);
    background-color: transparent;
}
#ImageBoxNextImage:hover
{
    background-image: url(images/imagebox/next_image.jpg);
    background-repeat:  no-repeat;
    background-position: right top;
}
#ImageBoxPrevImage:hover
{
    background-image: url(images/imagebox/prev_image.jpg);
    background-repeat:  no-repeat;
    background-position: left bottom;
}
canvas {display:none;
}

</style>

<style>
 #menuhome {
    background-color: #0086d2;
    border: solid;
    border-top-left-radius: 14Px;
    border-top-right-radius: 14Px;
    border-bottom-left-radius: 14Px;
    border-bottom-right-radius: 14Px;
}
body {
    background-size: 100%;
}

.regp {
    color: #0E90D3;
    background: #000816;
    font-size: x-large;
    width: 20.6%;
    float: left;
    margin-top: -44px;
    margin-left: 48%;
    margin-bottom: 0cm;
    border: solid;
    border-color: #001732;
    border-width: 8px;
    border-top-right-radius: 28px;
    border-top-left-radius: 28px;
}
.imgfx{
    height:120px;

}
p#xaaea {
    margin-top: 18%;
}
.fieldset {
    width: 59.6%;
    FLOAT: left;
    margin-top: -0.19%;
    margin-left: 30%;
    background-color: #000816;
    border: solid;
    border-width: 8px;
    border-color: #001732;
    height: 26%;
    overflow: auto;
}
.fieldset{
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}

/* Let's get this party started */
.fieldset::-webkit-scrollbar {
    width: 17px;
    background-color:#000816;
        border-radius: 10px;

}

/* Track */
.fieldset::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
.fieldset::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #001732;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
fieldset{
    background: black;

    color: #0086D2;
    border: solid;
    border-width: 4px;
    border-top-right-radius: 28px;
    border-top-left-radius: 28px;
    border-color: #001732;
}
label.xdate {

    color: #23E1FF;
}
label.xdate1 {

    color: #23E1FF;
}

label#username1 {
    display: inline-block;
    width: 102px;
}
label#username2 {
    display: inline-block;
    width:127px;

}
label#username3 {
    display: inline-block;
    width: 117px;
}
    iframe::-webkit-scrollbar {  
    display: none;
} 
</style>
</style><div id="carousel">
 <?php foreach  ($images as $image){ 
 $title='<font color=red>name:</font>'.$image['article_title'].''.str_repeat('&nbsp;', 40).'
 <font color=red>categorie:</font>'.$image['categorie'].''.str_repeat('&nbsp;', 20).'
  <a  style=text-decoration:underline; href=article.php?id='.$image['article_title'].'><font color=#0086D2>view</font>';
 ?>

    <a href="imagecible/<?Php echo $image['image'];?> "title="<?Php echo $title;?>" rel="imagebox" ><img class="imgfx" 
    src="imagecible/<?Php echo $image['image'];?> " width="100%"></a>
 <?Php }?>
    </div>
<script type="text/javascript">
    window.onload = 
        function()
        {
            $('#carousel').Carousel(
                {
                    itemWidth: 110,
                    itemHeight: 62,
                    itemMinWidth: 50,
                    items: 'a',
                    reflections: .5,
                    rotationSpeed: 1.8
                }
            );
            $.ImageBox.init(
                {
                    loaderSRC: 'images/loading.gif',
                    closeHTML: '<img src="images/close.jpg" />'
                }
            );
        };
            $(document).ready(function() {

        $("#Imx").on("click", function () {

        $("#ImageBoxContainer").hide();
            })

    });
</script>


<div id="cAssistentHelper" style="position: absolute;z-index: 9999"></div>
<div id="ImageBoxOverlay" style="position: absolute; top: 0px; left: 0px; opacity: 0; height: 705px; width: 1366px; display: none;"> </div>
<div id="ImageBoxOuterContainer" style="position: absolute; overflow: hidden; top: 47px; left: 0px; text-align: center; width: 1366px; display: none; background-color: transparent;">
<div id="ImageBoxContainer" style="position: relative; overflow: hidden; text-align: left; margin: 0px auto; top: 0px; left: 0px; z-index: 2; width: 52px; height: 52px;">
<img src="images/loading.gif" id="ImageBoxLoader" style="position: absolute; left: 10px; top: 10px;">

</div><div id="ImageBoxCaption" style="position: relative; text-align: left; margin: 0px auto; z-index: 1; visibility: hidden;">
<div id="ImageBoxCaptionText" style="padding-left: 10px;">Flash lights</div>
<div id="ImageBoxCaptionImages" style="padding-left: 10px; padding-bottom: 10px;"> 
</div><a id="ImageBoxClose" href="" style="position: absolute; right: 10px; top: 0px;"><img id="Imx" src="images/close.jpg"></a></div></div>

Answer 1

您需要再次应用插件，因为您要使用未绑定到插件的新元素替换div。所以在你的代码中这样做。

 var auto_refresh = setInterval(function () {
    $('#updatepic').load('updatepicx.php',function(){ 
       //after load is successful apply plugin
       $('#carousel').Carousel(
            {
                itemWidth: 110,
                itemHeight: 62,
                itemMinWidth: 50,
                items: 'a',
                reflections: .5,
                rotationSpeed: 1.8
            }
        );
    });
}, 5000);

动画在ajax刷新页面后停止

1 个答案: