Question

我在每个班级中有四个班级，一个名为

的图像

<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>

我的css类包含

.ban01 { background-image:url(../images/banner/01.jpg); }
.ban02 { background-image:url(../images/banner/02.jpg); }
.ban03 { background-image:url(../images/banner/03.jpg); }
.ban04 { background-image:url(../images/banner/04.jpg); }

我的Jquery是

$(document).ready(function () {
    var totDivs = $(".banner ban03").length;

    var currDiv = 0;
    var myInterval = setInterval(function () {
        if (currDiv > totDivs) {
            clearInterval(myInterval);
            return
        }
        $(".banner ban03").eq(currDiv).find('class').trigger("click");

        currDiv++;

    }, 2000);
});

如果我再次重复这个问题，如何定期调用这些类

Answer 1

@Maikay是的我想旋转图像

为什么使用JavaScript来旋转图像？

只有css才有可能。使用属性：animation。

＆＃13;

.imageRotate {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

   -webkit-animation:spin 4s linear 1; // '1' for a single animation, if you need an infinite animation replace '1' by 'infinite'
   -moz-animation:spin 4s linear 1;
   animation:spin 4s linear 1;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin { 
    100% { -webkit-transform: rotate(360deg); 
           transform:rotate(360deg); 
         } 
}

＆＃13;

<div id="ban01">
    <img class="imageRotate" src="http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png">
</div>

＆＃13;

Answer 2

你看到了这个答案......： - ）

jquery-timed-change-of-item-class

在我编写代码时试试这个。 :-D

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            .a, .b, .c, .d, .e {
                height: 120px;
                width: 200px;
            }
            .a {
                background-color: red;
            }
            .b {
                background-color: green;
            }
            .c {
                background-color: blue;
            }
            .d {
                background-color: black;
            }
            .e {
                background-color: yellow;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    </head>
    <body>
        <h1>Testing</h1>

        <div id="test" class="a">How Are You Buddy?</div>

        <script type="text/javascript">
          $( document ).ready(function() {
            var array = ['a','b','c','d','e'];//Here is your classes
            var len = array.length;
            var i=0;
            function changeDivClass(d) {
                $("#test").removeClass();
                $("#test").addClass(array[d]);
            }
            setInterval(function() {
                if(len>=i){
                    return changeDivClass(i++);
                }else{
                    i=0;
                    $("#test").removeClass();
                    $("#test").addClass('a');
                }
            }, 5000);
          });
        </script>
    </body>
</html>

Answer 3

HTML

<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>

式

.banner { height: 50px }
.ban01 { background: green }
.ban02 { background: blue }
.ban03 { background: red }
.ban04 { background: orange }

的javascript

$(document).ready(function () {
    var totDivs = $(".banner").length;
    var currDiv = 0;
    var myInterval = setInterval(change, 2000);
    function change(){
        $(".banner").hide().eq(currDiv).show();
        currDiv = (currDiv + 1) % totDivs;
    }
    change();
});

http://jsfiddle.net/b2Btj/1/

Answer 4

不确定banner元素上的单击触发器究竟会起什么作用，但这可能会有所帮助：

$(document).ready(function () {

    var totDivs = $(".banner").length;
    var currDiv = 0;

    var myInterval = setInterval(function() {

        if (currDiv > totDivs) {
            clearInterval(myInterval);
            return;
        }

        $(".banner").eq(currDiv).trigger("click");

        currDiv++;

    }, 2000);

});

Answer 5

如果你知道“div”的计数

，你可以做的就是你可以运行for循环

for(var count=0;count<3;count++)
{
var totDivs = $(".banner ban0"+count).length;

    var currDiv = 0;
    var myInterval = setInterval(function () {
        if (currDiv > totDivs) {
            clearInterval(myInterval);
            return
        }
        $(".banner ban0"+count).eq(currDiv).find('class').trigger("click");

        currDiv++;

    }, 2000);
}

这可以解决你的问题。

如何定期调用图像类

5 个答案: