无缝轮播

最新推荐文章于 2025-08-11 14:05:14 发布

fcjboke

最新推荐文章于 2025-08-11 14:05:14 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_35835160/article/details/52698998

本文介绍了一种使用HTML、CSS及jQuery实现的图片滚动轮播效果。通过设置图片总宽度大于展示区宽度，并利用JavaScript定时调整滚动位置，实现了图片的无缝滚动效果。用户鼠标悬停时，滚动暂停。

<?php
?>
<script language="javascript" src="jquery.1.12.js"></script>
<style type="text/css">
    img
    {
        border: none;
    }
</style>
<div id="demo" style="overflow: hidden; width: 500px;">
        <table border="0" align="center" cellpadding="1" cellspacing="1" cellspace="0">
            <tr>
                <td id="demo1" valign="top" bgcolor="ffffff">
                   
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr align="center">
                            <td>
                                <a href="#" target="_blank">
                                    <img src="./images/1.jpg" width="150" alt="第一张图" height="100"></a>
                            </td>
                            <td>
                                <a href="#" target="_blank">
                                    <img src="./images/2.jpg" width="150" alt="第二张图" height="100"></a>
                            </td>
                            <td>
                                <a href="#" target="_blank">
                                    <img src="./images/3.jpg" width="150" alt="第三张图" height="100"></a>
                            </td>
                            <td>
                                <a href="#" target="_blank">
                                    <img src="./images/4.jpg" width="150" alt="第四张图" height="100"></a>
                            </td>
                            <td>
                                <a href="#" target="_blank">
                                    <img src="./images/5.jpg" width="150" alt="第五张图" height="100"></a>
                            </td>
                            <td>
                                <a href="#" target="_blank">
                                    <img src="./images/6.jpg" width="150" alt="第五张图" height="100"></a>
                            </td>
                            <td>
                                <a href="#" target="_blank">
                                    <img src="./images/7.jpg" width="150" alt="第五张图" height="100"></a>
                            </td>
                        </tr>
                    </table>
                </td>
                <td id="demo2" valign="top">
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
    var speed=30;
    var demo = $("#demo");
    var demo1 = $("#demo1");
    var demo2 = $("#demo2");
    demo2.html(demo1.html());
    function Marquee(){
        if(demo.scrollLeft()>=demo1.width())
            demo.scrollLeft(0);
        else{
            demo.scrollLeft(demo.scrollLeft()+1);
        }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.mouseover(function() {
        clearInterval(MyMar);
    } )
    demo.mouseout(function() {
        MyMar=setInterval(Marquee,speed);
    } )
    </script>