Question

如何使用CSS3，JavaScript或jQuery在单个div中更改具有不同时间间隔的图像。在最后一个时间间隔应该被清除。

Answer 1

您可以尝试此http://codepen.io/jammer99/pen/PNErKp

<?php
require_once('checklog.php');

include 'functions.php';
$message        = '';
$code1= '8DU63H2OL';
$code = trim($_POST['code']);
$submit = trim($_POST['submit']);
include 'connect.php';
session_start();
$sess_userID = $_SESSION['userID'];

if ($submit == 'Enter') {
        if ($code == $code1) {
            mysqli_select_db($db_server, $db_database);
            $query= "UPDATE Users SET code='1' WHERE username='$username'";
        } else {
            $message = "Sorry that is not a valid code";
        }
}
include_once('header_logged.php');

?>
      <div class="header1">
        </div>
<div id="welcome"> <h1>Welcome <?php
echo $_SESSION['username'];
?></h1>
        <p>You are now logged in! Welcome to TOMS!</p></div>
        <form action='home.php' method='POST' class="code">
        Have you got a code?
        <br/><input type='text' name='code'><br />
        <input type='submit' name='submit' value="Enter">
        </form>
<?php
//include 'footer.php';

mysqli_close($db_server);
?>

Answer 2

也许这样的事情可以帮到你。

var setTimer = (function(){

    function setTimer( options ){

        this.timings   = options.timings;
        this.element   = options.element;
        this.images    = options.images;
        this.index     = -1;
        this.interval  = false;
        this.init();

    }

    setTimer.prototype.init = function(){

        this.image_ = document.createElement('img');
        this.image_.setAttribute('class','slider-image');
        this.element.appendChild( this.image_ );
        this.set();

    };

    setTimer.prototype.set = function(){

        if( this.interval && false !== this.interval ){
            clearTimeout( this.interval );
        }

        if( this.index >= this.images.length-1 ){ this.index = 0; } 
        else{ this.index++; }


        var timing = this.timings[this.index];
        console.log(this.index);
        console.log(timing);

        this.interval = (function(_this){
                          return setTimeout(function(){

                             _this.switch_image();

                          },timing);
                         })(this);

    };


    setTimer.prototype.switch_image = function(){

       var index = this.index;
       console.log('switching image to '+this.images[index]);

       this.image_.setAttribute('src',this.images[index]);
       this.set();


    }

    return setTimer;

})();

setTimeout(function(){

var options = {
  timings: [10,1000,2000],
  images : [ 'url1','url2','url3'],
  element: document.getElementById('your-image-container-id')
};
new setTimer(options);

},1000);

使用Js或jquery更改具有不同时间间隔的图像

2 个答案: