Question

我正在尝试设置一个javascript / jquery来显示旋转图像，事实上我正试图把我可以放在我的多个图像背景上...我能够制作一个模拟横幅，这是成功的但是我不能在我的网站上放置无序列表，图片或旋转图像。

我的HTML是

        <link rel="stylesheet" type="text/css" href="styles/main.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="/javascript/main.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="massiveWrapper">
            <div id="header">
                <img src="/images/banner.png" alt="banner" width="1024px" height="150px"/> 
            </div>
            <div id="menu">
                <ul>
                    <li>hello</li>
                    <li>hello</li>
                </ul>
            </div>
            <div id="rotatingWrapper">
                <img class="rotateImage" src="/images/blue.png" alt="Computers" width="1024px" height="200px" />
                <img class="rotateImage" src="/images/red.png" alt="Computers" width="1024px" height="200px" />
                <img class="rotateImage" src="/images/green.png" alt="Computers" width="1024px" height="200px" />
            </div>
            <div>
                <img src="/images/blue.png" alt="blue" width="1024px" height="200px"/>
            </div>
        </div>
    </body>
</html>

我的css是

body {
    background: url(/images/background-top.png) 0 0 repeat-x,
        url(/images/menu.png) 0 160px repeat-x,
        url(/images/background-middle.png) 0 210px repeat-x;
    background-color: #dadada;        
}

#massiveWrapper {
    width: 1024px;
    margin: auto;
}

#rotatingWrapper {
    width: 1024px;
    height: 200px;
}

.rotateImage {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

和javascript是

$(window).load(function() { //start after HTML, images have loaded

    var InfiniteRotator =
    {
        init: function()
        {
            //initial fade-in time (in milliseconds)
            var initialFadeIn = 1000;

            //interval between items (in milliseconds)
            var itemInterval = 5000;

            //cross-fade time (in milliseconds)
            var fadeTime = 2500;

            //count number of items
            var numberOfItems = $('.rotateImage').length;

            //set current item
            var currentItem = 0;

            //show first item
            $('.rotateImage').eq(currentItem).fadeIn(initialFadeIn);

            //loop through the items
            var infiniteLoop = setInterval(function(){
                $('.rotateImage').eq(currentItem).fadeOut(fadeTime);

                if(currentItem == numberOfItems -1){
                    currentItem = 0;
                }else{
                    currentItem++;
                }
                $('.rotateImage').eq(currentItem).fadeIn(fadeTime);

            }, itemInterval);
        }
    };

    InfiniteRotator.init();

});

我真的希望能够拥有旋转的图像，我只是不能为我的生活添加任何新的页面。我甚至添加了一个使用div和img的虚拟图片，但也不会显示...这可能是一些小的但是我是新编码。

凯恩

Answer 1

您不应将px添加到图片的width和height属性中。

例如：

<img src="/images/banner.png" alt="banner" width="1024px" height="150px"/>

应该是：

<img src="/images/banner.png" alt="banner" width="1024" height="150"/>

多个背景上的图像

1 个答案: