1

我想以这种方式使用 HTML、CSS、Jquery/Javascript 实现对图片的循环： 图片 一页上的图片很少（所有图片都是可见的，并且不会移动），并且想要遍历它们中的每一个（一个time) 并在当前图像上方弹出一些文本。例如，如果我将鼠标悬停在图片 C 上，则循环应该停止，当悬停时 - 应该从图片 C 继续，依此类推。但我不确定如何实现这一点。谁能告诉我应该使用什么或类似的例子。谢谢。

4

3 回答 3

3

这是我为你做的事情，希望这是你正在寻找的。（我用于测试的图像是每 200 像素 200 像素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>


   <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
   <script>
        $(document).ready(function() {
            var currentImg = 1,
                totalImages = 4
                loopTime = 1000,
                intervalId = null;


            function displayTitle(imgNbr) {
                $('.title').hide();
                $('#image'+imgNbr).prev('div').show();
            }

            $('img').on('mouseover', function() {
                clearInterval(intervalId);
                displayTitle($(this).parent().attr('id').substring(5));
            }).on('mouseout', function() {
                currentImg = $(this).parent().attr('id').substring(5);
                startLoop();
            })

            function startLoop() {
                intervalId = setInterval(function() {
                    displayTitle(currentImg);
                    currentImg = ((currentImg == totalImages) ? 1 : parseInt(currentImg)+1);
                }, loopTime);
            }
            startLoop();
        });
   </script>
   <style>
       .imgcontainer {
           margin: 10px;
           float: left;
           position: relative;
           text-align: center;
       }
       .title {
           position: absolute;
           top: 70px;
           left: 60px;
           color: #ffffff;
           display: none;
       }
       .img {
           clear: both;
       }
   </style>

</head>
<body>

<div class="imgcontainer">
    <div class="title">title 1</div>
    <div class="img" id="image1"><img src="images/image1.jpg" /></div>
</div>

<div class="imgcontainer">
    <div class="title">title 2</div>
    <div class="img" id="image2"><img src="images/image2.jpg" /></div>
</div>    

<div class="imgcontainer">
    <div class="title">title 3</div>
    <div class="img" id="image3"><img src="images/image3.jpg" /></div>
</div>

<div class="imgcontainer">
    <div class="title">title 4</div>
    <div class="img" id="image4"><img src="images/image4.jpg" /></div>
</div>    

</body>
</html>
于 2012-06-19T09:48:14.860 回答
0

你需要有一个“旋转木马”。

如果您可以使用 JQuery，那么 CarouFredSel是一个非常好的选择，这里是示例。

如果你想依赖 JavaScript，你可以使用Conveyor Belt Slideshow Script。

于 2012-06-19T08:28:00.410 回答
0

正如@Asif 在他的回答中所说，这种类型的东西有许多公开可用的 JavaScript 组件。

我已经多次使用Dynamic Drive中的Lightbox Image Viewer v2.03a（这不是您所追求的），但在该站点上还有更多内容可供查看，其中一个可能正是您所需要的后。

于 2012-06-19T08:39:15.433 回答