Question

到目前为止，这是我的代码。我有几个问题。

1）如何使过渡更平滑？我永远无法使所有图片正确对齐，所以有没有办法让图像向右跳转到图像的左侧（因为它向左滚动），以便没有空格？

2）我想在触及区域标签上弹出一个弹出窗口（当您将鼠标悬停在图片的不同部分时，它会停止滚动条，并在不同颜色的特定区域上弹出一个弹出窗口）。这样做的最佳方式是什么？

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            // when the DOM/elements load, start
            var readyStateCheckInterval = setInterval(function() {
                if (document.readyState === "complete") {
                    init();
                    clearInterval(readyStateCheckInterval);
                }
            }, 10)
            paused = false;
        function init() {
            setInterval(wells_fancy_slider, 50);
            $('area').hover(function() {
                console.log(this);
                paused = true;
            }, function() {
                paused = false;
            })
        }

        function wells_fancy_slider() {
            if (!paused) {
                if (parseInt($('#pic1').css('left')) < -2800) {
                    $('#pic1').css('left', '5596');
                }
                if (parseInt($('#pic2').css('left')) < -2800) {
                    $('#pic2').css('left', '5596');
                }
                if (parseInt($('#pic3').css('left')) < -2800) {
                    $('#pic3').css('left', '5596');
                }
                $('#pic1, #pic2, #pic3').css('left', '-=15');
            }
        }


    </script>
    <style>
        body{
            min-width: 960px;
            background-color:blue;
        }
        #container{
            overflow: hidden;
            /*width: 6000px;*/
            height: 500px;
            position: relative;
            text-align: center;
            margin-top:-8px;
        }
        #pic1{
            position:absolute;
            left:570px;
        }
        #pic2{
            position:absolute;
            left:3315px;
        }
        #pic3{
            position:absolute;
            left: 6110px;
        }
    </style>
</head>
<body>
    <div style="position:absolute; width: 20%; z-index: 1000; float: left; height: 450px; left:0px; background-color:black;"></div>
    <div style="position:absolute; width: 20%; z-index: 1000; float: right; height: 450px; right:0px; background-color:black;"></div>

    <div id="container">
        <div style="text-align:center; width:2798px; margin-left:auto; margin-right:auto;">
            <img id="pic1" src="LMDay.jpg" usemap="img_map" border="0" width="2798" height="450" alt="" />
            <img id="pic2" src="LMDay.jpg" usemap="img_map" border="0" width="2798" height="450" alt="" />
            <img id="pic3" src="LMDay.jpg" usemap="img_map" border="0" width="2798" height="450" alt="" />

            <map id="img_map" name="img_map">
                <area shape="rect" coords="3,69,413,445" href="http://www.image-maps.com/" alt="1" title="1"    />
                <area shape="rect" coords="413,73,692,443" href="http://www.wellsjohnston.com/" alt="2" title="2"    />
                <area shape="rect" coords="692,91,919,440" href="http://www.image-maps.com/" alt="3" title="3"    />
                <area shape="rect" coords="917,102,1135,440" href="http://www.wellsjohnston.com/" alt="4" title="4"    />
                <area shape="rect" coords="1134,103,1363,441" href="http://www.image-maps.com/" alt="5" title="5"    />
                <area shape="rect" coords="1360,107,1591,438" href="http://www.wellsjohnston.com/" alt="6" title="6"    />
                <area shape="rect" coords="1589,96,1872,438" href="http://www.image-maps.com/" alt="7" title="7"    />
                <area shape="rect" coords="1871,100,2072,439" href="http://www.wellsjohnston.com/" alt="8" title="8"    />
                <area shape="rect" coords="2072,116,2272,436" href="http://www.image-maps.com/" alt="9" title="9"    />
                <area shape="rect" coords="2270,70,2597,433" href="http://www.wellsjohnston.com/" alt="10" title="10"    />
                <area shape="rect" coords="2595,78,2784,430" href="http://www.image-maps.com/" alt="11" title="11"    />
            </map>
        </div>
    </div>
    <div style="background-color:red; width:100px; height:100px; margin-top:2000px;">
        ay
    </div>
</body>

Answer 1

您应该创建一个包含所有图像并移动它的元素，而不是移动每个单独的图像。

我通常使用图像滑块做这样的事情：

主要滑块：

设置尺寸
溢出：隐藏
相对定位

图像容器：

999999px width（这样float：left将起作用）
绝对定位

图片：

与主滑块相同的尺寸
浮动：左

如果只移动图像容器的left属性，您将保存一些绘制周期并编写更少的代码，并且不会出现任何空白故障。

另外，如果它是一个选项，你应该使用CSS3过渡。较旧的浏览器只会看到图像跳转到下一张幻灯片，但现代浏览器将获得目前可在网络上进行的过渡。另外，您不需要使用Javascript进行演示，但我们不应该这样做。

我正在制作一个循环的连续图像滑块，但我不能让它很好地过渡

1 个答案: