jQuery图片连续滚动 li 标签实现

最新推荐文章于 2020-11-29 02:05:56 发布

sas5215

最新推荐文章于 2020-11-29 02:05:56 发布

阅读量4.2k

点赞数 1

文章标签： jquery class function div xhtml border

本文链接：https://blog.youkuaiyun.com/sas5215/article/details/6957512

版权

本文介绍了一个使用jQuery实现的图片连续滚动效果。通过设置不同的方向，可以使图片从左向右或从右向左滚动。该效果还支持鼠标悬停暂停及通过按钮控制滚动方向的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery图片连续滚动</title>
    <script src="../A-Html/js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
        img { border:0 none; }
        ol,ul { list-style:none; }
        #company_logo{
        margin:0 auto;width:1000px;clear:both;overflow:hidden;
        }
        .clearfix:after {
        content:".";display:block;height:0;clear:both;visibility:hidden;
        }
        #left_btn,#right_btn
        {
        width:40px;float:left;
        }
        #slide
        {
        width:915px;float:left; overflow:hidden; height:215px;
        }
        .logo_item
        {
        width:160px;  float:left; height:215px;
        }

        .logo_item img{width:160px; height:100px;margin-top:45px; cursor:pointer; }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var _speed = 10;
            var _dir = "left";
            var _slide = $("#slide");
            var _slide_width = $(_slide).width();
            var _slide_ul_width = $("#slide_ul").width($("#items li").width() * $("#items li").length).width(); 

            function Marquee() {
                switch (_dir) {
                    case "left":
                        if (_slide.scrollLeft() + _slide_width >= _slide_ul_width)
                        //_slide.scrollLeft(0);
                            _dir = "right";
                        else {
                            _slide.scrollLeft(_slide.scrollLeft() + 1);
                        }
                        break;
                    case "right":
                        if (_slide.scrollLeft() == 0)
                        //_slide.scrollLeft(_slide_ul_width-_slide_width);
                            _dir = "left";
                        else {
                            _slide.scrollLeft(_slide.scrollLeft() - 1);
                        }
                        break;
                }
            }

            var sliding = setInterval(Marquee, _speed);

            $(".logo_item img").hover(function () {
                clearInterval(sliding);
            }, function () {
                sliding = setInterval(Marquee, _speed);
            });

            $("#left_btn").click(function () {
                _dir = "left";
            });
            $("#right_btn").click(function () {
                _dir = "right";
            });
        });
    </script>
</head>
<body>
    <div id="company_logo" class="clearfix">
        <div id="left_btn">
          <img src="images/left_btn.jpg" alt="" />
        </div>
        <div id="slide" >
            <ul id="slide_ul">
            <li>
                <ul id="items">
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                <li class="logo_item"><img  src="images/logo/阿里斯顿.jpg" alt='' /></li>
                </ul>
            </li>
            </ul>
        </div>
        <div id="right_btn">
            <img src="images/right_btn.jpg" alt="" />
        </div>
    </div>
</body>
</html>