Javascript I'；我正在制作一个循环的连续图像滑块，但我可以'；我不能很好地过渡_Javascript_Jquery_Html_Css_Image

Javascript I'；我正在制作一个循环的连续图像滑块，但我可以'；我不能很好地过渡

javascript jquery html css image

Javascript I'；我正在制作一个循环的连续图像滑块，但我可以'；我不能很好地过渡,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,这是到目前为止我的代码。我有几个问题 1）如何使过渡更平滑？我永远无法让所有图片正确对齐，那么有没有办法让图像从图像的左边跳到右边（因为它是向左滚动的），这样就没有空白了 2）我想在到达区域标记上弹出一个弹出窗口（当你将鼠标移到图片的不同部分时，它会停止滚动，并在特定区域上以不同的颜色弹出一个窗口）。最好的方法是什么 <html> <head> <script src="http://code.jquery.com/jquery-1.8.

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

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>


//加载DOM/元素时，启动
var readyStateCheckInterval=setInterval（函数（）{
如果（document.readyState==“完成”）{
init（）；
clearInterval（readyStateCheckInterval）；
}
}, 10)
暂停=错误；
函数init（）{
设置间隔（wells_fancy_滑块，50）；
$（'area'）。悬停（函数（）{
console.log（this）；
暂停=真；
}，函数（）{
暂停=错误；
})
}
函数wells_fancy_slider（）{
如果（！暂停）{
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'）；
}
}
身体{
最小宽度：960像素；
背景颜色：蓝色；
}
#容器{
溢出：隐藏；
/*宽度：6000px*/
高度：500px；
位置：相对位置；
文本对齐：居中；
利润上限：-8px；
}
#图1{
位置：绝对位置；
左：570px；
}
#图2{
位置：绝对位置；
左：3315px；
}
#图3{
位置：绝对位置；
左：6110px；
}
嗯

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

我通常使用图像滑块执行以下操作：

主滑块：

设定大小
溢出：隐藏
相对定位

图像容器：

999999像素宽度（使float:left工作）
绝对定位

图像：

与主滑块大小相同
浮动：左

如果只向左移动图像容器的

属性，则可以节省一些绘制周期并编写更少的代码，并且不会出现任何空白问题
此外，如果它是一个选项，您应该使用CSS3转换。较旧的浏览器只会看到跳转到下一张幻灯片的图像，而现代浏览器将获得目前在web上可能实现的平滑过渡。另外，您不需要使用Javascript进行表示，我们实际上不应该这样做。
为什么不将您的Javascript封装在$（document）.ready（函数{……}）中；起初我没有使用jQuery，所以现在我想你可能有点误解了：我只有一个图像，但我使用了3个，这样我就可以循环它了。当一个图像向左偏远时，它会向右移动，产生循环效果。我用3张图片，中间没有空间（2是太狡猾）@彪马啊。您可以尝试在每次图像从视图中消失时使用appendChild
，然后让图像容器本身不断向左移动。实际上，我刚刚让它开始工作。我的像素数学有点不对劲。但我还有另一个问题：如何在图像的各个部分上弹出鼠标？你知道我是怎么把它分割出来的吗？我希望在鼠标上方的每个部分都有一个红色的框…非常感谢您的帮助out@Puma这取决于您想如何准确地进行操作，但是会想到mouseover
和mouseout
事件。我可能会在一个包装器内的图库外创建弹出窗口，每个弹出窗口都会被每个图像中定义的属性引用。我正在这样做，但我很难让弹出窗口直接覆盖该区域