1

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

www.iamreckoner.com/neuzwei

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

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

1 回答 1

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 的路径正确。

于 2012-11-23T10:24:50.520 回答