html图片左右滚动效果

人气：865 时间：2018-09-15

这篇文章主要为大家详细介绍了html图片左右滚动效果，具有一定的参考价值，可以用来参考一下。

首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。
原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。
经测试代码如下：


<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/center.js"></script>
    </head>
    <style type="text/css">
        .img_content {width: 600px;margin: 0;padding: 0;height: 200px;position: absolute;overflow: hidden;}
        .img_content ul {list-style: none;margin: 0;padding: 0;position: absolute;width: 1000px;}
        .img_content ul li {float: left;margin: 0;padding: 0;}
        .img_content ul li img {width: 200px; height: 200px;}
        button {width: 100px;height: 40px;border-radius: 5px;background: cornflowerblue;color: white;border: 0;}
    </style>
    <body>
        <div class="img_content">
            <ul>
                <li><img src="img/1.jpg" /> </li>
                <li><img src="img/2.jpg" /> </li>
                <li><img src="img/3.jpg" /> </li>
                <li><img src="img/4.jpg" /> </li>
                <li><img src="img/5.jpg" /> </li>
                <li><img src="img/6.jpg" /> </li>
                <li><img src="img/7.jpg" /> </li>
                <li><img src="img/8.jpg" /> </li>
            </ul>
        </div>
        <button id="left">左</button>
        <button id="right">右</button>
        <button id="auto">自动切换</button>
        <button id="stop">取消自动切换</button>
        <script>
            centerParent($('.img_content')[0]);
            $('#left').click(function() {
                scrollLeft();
            });
            $('#right').click(function() {
                scrollRight();
            });
/*向左滑动*/
            function scrollLeft() {
                /*先向左移动一个图片的宽度  移动后在末尾追加第一个元素 然后将第一个元素移除 */
                $('ul').animate({
                    left: -200
                }, 200, function() {
                    $('ul').append($('ul li:first').clone());
                    $('ul li:first').remove();
                });                /*将left值置为0*/
                $('ul').animate({
                    left: 0
                }, 0);
            }
            /*向右滑动*/
            function scrollRight() {
                /*先向右移动一个图片的宽度  移动后把最后一个元素插入到头部 然后移除最后一个元素*/
                $('ul').animate({
                    left: -200
                }, 0, function() {
                    $('ul').prepend($('ul li:last').clone());
                    $('ul li:last').remove();
                });                /*完成上面动作后将left置为0*/
                $('ul').animate({
                    left: 0
                }, 200);
            }            var auto;
            $('#auto').click(function() {
                auto = setInterval(scrollLeft, 2000);
            });

            $('#stop').click(function() {
                clearInterval(auto);
            });
        </script>
    </body>
</html>

<!--   来自 四海网 （www.q1010.com）-->

本文来自：http://www.q1010.com/175/58-0.html

注：关于html图片左右滚动效果的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：滚动

您可能感兴趣的文章

上一篇：html 实现 marquee 无缝滚动的方法示例

下一篇：解决子DIV中设置margin-top影响父DIV位置的问题