javascript - 我正在制作一个循环的连续图像 slider ，但我无法很好地过渡-6ren

javascript - 我正在制作一个循环的连续图像 slider ，但我无法很好地过渡

转载作者：太空宇宙更新时间：2023-11-04 04:50:47

25

4

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

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/

25

4

0

文章推荐： linux - 删除多个子目录中的部分文件名

文章推荐： Linux bash '[: -ge: unary operator expected' 错误

文章推荐： html - 全宽 div 浏览器调整大小问题

Jquery检查元素是否隐藏(连续)
如何检查一个元素是否立即隐藏。即如何通知元素的可见性。在我的例子中，该元素是通过 slideUp 函数隐藏的。我应该立即收到有关该元素的可见性的通知。我想到了使用bind()方法。但它没有类似 o
连续 if 语句流程
if (srcbloc == NULL) { fprintf(stderr, "warning!: memrip source is null!\n"); exit(1); } if
SQL - 连续 "ON"语句
当我在数据库的旧 View 中清理一些问题时，我遇到了这个“奇怪”的连接条件: from tblEmails [e] join tblPersonEmails [pe]
css - 如何水平对齐多个图像(连续)？
如何水平对齐多张图像，一张一张地？它们不必适合宽度屏幕:相反，我希望它们超过后者的宽度，如果这有任何意义的话。我已经检查了很多类似问题的答案，但找不到任何可以解决我的问题的答案。 HTML:
Cassandra ttl 连续
我知道 Cassandra 中的列有 TTL。但是也可以在一行上设置 TTL 吗？在每列上设置 TTL 并不能解决我的问题，如下面的用例所示: 在某些时候，一个进程想要删除一个带有 TTL 的完整行(
macos - 连续 NSTextField
我有一个 NSTextField 和 Label，其值绑定(bind)到 View Controller 中的相同 NSString 这里的问题是标签只有在我按 Tab 时才会更新。如何使其连续，以
javascript - 在字符串中插入下划线代替单个或多个空格(连续)
例如。 1."abc"; ===>abc 2."ab c"; ===>ab_c 3."ab c"; ===>ab_c 4."ab c" ===>ab_c 对于多个连续空格也是如此。我怎样
javascript - 如何获取前一天(连续)
大家好，我想获取前一天或最后一天的信息，只有当我按下按钮时，它才会显示最后一天(星期六)的所有信息，如果我再次单击按钮，它将显示最后一天的信息(星期五)如果我再次点击它(星期四)谢谢你们帮助我编辑:
audio - 使用mplayer从音频流中提取冰冷的元数据(连续)
我需要从实时音频流中提取ICY元数据，并正在使用mplayer进行此操作，因为它在播放音频流时会输出元数据。我欢迎其他方式执行此操作，目标是将更新的元数据(歌曲信息)保存到文本文件中，只要歌曲(或数据
web - (连续)网络浏览器中有限单词的语音识别
语音识别有没有解决方案只有几个字(2 个就够了，10 个就不错了。100 个就很棒了。不需要更多) 也在移动浏览器上运行(是否可以为此使用 flash(而不是 java)？) 可以安装在您自己的服务
Python条件连接不以标点符号结尾的*连续*字符串
我有一个单词列表， list1 = ['hello', 'how', 'are', 'you?', 'i', 'am', 'fine', 'thanks.', 'great!'] 我想加入， list
连续 "undefined reference to..."
我正在开发一个程序，但我不断收到“对‘dosell’的 undefined reference ”，我不太明白发生了什么。这是函数的声明: void dosell(int *cash, int *nu
MYSQL - 连接三个表(连续？)
我无法提出执行我要做的事情所需的查询。我有三个这样的表: client_files ----------------------- client_id file_id ---------
javascript - 连续/无限滚动
我一直在寻找一个插件/脚本，当到达底部时，它会从头开始继续滚动网站，就像一个连续的循环。示例:http://unfold.no/和 http://www.aquiesdonde.com.ar/ 我尝
连续 scanf 正在添加字符串
这个问题在这里已经有了答案: How to prevent scanf causing a buffer overflow in C? (6 个答案) 关闭 6 年前。我一直在使用一个非常简单的程
c++ - 子数组中两个数字的相同出现(连续)
给定一个整数数组，找到具有相同数量的 x 和 y 的连续子序列的总数。例如 x=1 和 y=2 的数组 [1,2,1] ans = 2 表示它的两个子数组 [1,2] 和 [2,1]。检查每个连续的子
arrays - 查找总和小于给定值的最大元素(连续)？
所以，我有一个所有正自然数的数组。我得到了一个阈值。我必须找出总和小于给定阈值的数字(连续)的最大计数。 For example, IP: arr = {3,1,2,1} Threshold = 5
java - 如何像内置相机一样实现Android相机对焦(连续)
我制作了像内置相机一样的相机应用。我想实现像内置相机一样的连续对焦功能。(此功能我不触摸屏幕，但相机会尝试自行对焦。) 因此，将其设置为 surfaceCreated : Camera.Pa
r - 连续 block 上的平均
我有这样的数据: f x A 1.1 A 2.2 A 3.3 B 3.5 B 3.7 B 3.9 B 4.1 B 4.5 A 5.1 A 5.2 C 5.4 C 5.5 C 6.1 B 6.2 B
sql - 连续 n 分钟超过阈值
假设我有一个包含一组数据点的表，每个数据点由一个时间戳和一个值组成。如果至少有 N 个连续记录(按时间戳排序)高于给定值 X，我将如何编写返回 true (1) 的查询，否则返回 false (0)？

首页

博学

6Ren·AI

商城

javascript - 我正在制作一个循环的连续图像 slider ，但我无法很好地过渡