Question

我是一个相对初学者，我理解CSS和HTML，但JS或jQuery主要通过复制和粘贴发生，所以请公平。

www.iamreckoner.com/neuzwei

我在这里实现了幻灯片（works.js）。

它适用于Mozilla和Opera，在Safari上它只显示前2个图像然后变为空白，有时这也发生在Mozilla上。我已经尝试过实现预加载器，但这没有帮助。有人有想法吗？我从另一个页面复制了脚本，每次在所有浏览器上都能正常工作，并且还调整了我的CSS。在Dreamweaver中的预览模式下，它可以正常工作（exept Safari）

这是我的请求后的代码，首先是标题，然后是第一张幻灯片和works.js （我从另一页复制未修改）

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="kiosk.css">
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.16.custom.css">
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="scripts/works.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo.js"></script>
<script type="text/javascript" src="scripts/jquery.localScroll.js"></script>
<script type="text/javascript" src="scripts/waypoints.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>       

<div class="work" style="margin-left:10%; margin-top:100px;" data-date="2012" data-category="1">
    <div class="images" style="width:900px;height:600px;">
        <div>
            <img src="pic/f_i.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_cover.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_01.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_02.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_03.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_04.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_05.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_06.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_07.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_08.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_09.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_10.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_11.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_12.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_13.jpg" style="width=:900px;height:600px"/>
            <img src="pic/f_14.jpg" style="width=:900px;height:600px"/>
        </div>
    </div>

    <div class="text" style="width:700px;left:254px; position:absolute;">
        <p>Burkhardt Senger Fotografien — 78 pages, 170x250mm, 2012 </p>
    </div>
</div>

这是works.js

$(function() {
    var width = 0;
    $('.images img').each(function() {
        width += $(this).width();
    });

    $('.images div').css('width', width);

    $('.images div').each(function() {
        var images = $(this).children('img');
        if (images.length < 2) images.css('cursor', 'auto');
    });

    $('.images img').mousemove(function(e) {
        if (e.offsetX < $(this).width() / 2) {
            $(this).addClass('cursorLeft');     
        } else {
            $(this).removeClass('cursorLeft');
        }
    }).click(function(e) {
        e.preventDefault();  

        var currentImage = $(this).parent().parent().attr('data-current');

        if (currentImage == undefined) {
            currentImage = 0;
        }

        var images = $(this).parent().children('.images img');

        if (images.length < 2) return;

        if (e.offsetX < $(this).width() / 2) {
            if (currentImage == 0) {
                var pos = 0;
                for (var i = 0; i < images.length-1; i++) {
                    pos += $(images[i]).width();
                }

                $(this).parent().animate({
                    left: -pos
                }, 250);
                currentImage = images.length - 1;
            } else {
                $(this).parent().animate({
                    left: '+='+$(images[currentImage]).width()
                }, 250);
                currentImage--; }       
            } else {
                if (currentImage == images.length - 1) {
                    $(this).parent().animate({
                        left: 0
                    }, 250);
                    currentImage = 0;
                } else {
                    $(this).parent().animate({
                        left: '-='+$(images[currentImage]).width()
                    }, 250);
                    currentImage++;
                }       
            }
            $(this).parent().parent().attr('data-current', currentImage);
        });

    function cleanMenu() {
        $('.menus .highlighted').removeClass('highlighted');
    }

    $('.work .images, .work .text').mouseover(function() {
        var date       = $(this).parent().attr('data-date');
        var categories = $(this).parent().attr('data-category').split(',');

        cleanMenu();

        if (date < 2009) {
            $('#date_before').addClass('highlighted');      
        } else {
            $('#date_'+date).addClass('highlighted'); 
        }

        for (var i = 0; i < categories.length; i++) {
            $('#category_'+categories[i]).addClass('highlighted');  
        }
    }).mouseleave(function() {
        cleanMenu();
    });
});

Answer 1

问题在于您的HTML

<img src="pic/f_07.jpg" style="width=:900px;height:600px"/>

将其更改为

<img src="pic/f_07.jpg" style="width:900px;height:600px;"/>

然后再次检查并确保图像路径，js和css是正确的。

javaScript幻灯片无法正常工作

1 个答案: