到目前为止，这是我的代码。我有几个问题。
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>
最佳答案
与其移动每个单独的图像，不如创建一个包含所有图像的元素并移动它。
我通常用图像 slider 做这样的事情:
主 slider :
- 设置大小
- 溢出:隐藏
- 相对定位
图像容器:
- 999999px 宽度(这样 float:left 就可以了)
- 绝对定位
图片:
- 与主 slider 大小相同
- float :左
如果您只移动图像容器的 left 属性，您将节省一些绘制周期并编写更少的代码，并且不会出现任何空白问题。
此外，如果可以的话，您应该使用 CSS3 过渡。较旧的浏览器只会看到图像跳到下一张幻灯片，但现代浏览器将获得目前在网络上可能实现的平滑过渡。另外，您不需要使用 Javascript 进行演示，无论如何我们都不应该这样做。
关于javascript - 我正在制作一个循环的连续图像 slider ，但我无法很好地过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13513821/