jQuery无缝图片横向(水平)/竖向(垂直)滚动

菩提树下的杨过

发布于 2018-01-22 06:56:20

17.5K0

文章被收录于专栏：菩提树下的杨过菩提树下的杨过

jQuery的一个不错的小插件，记性越来越差了，整理一下贴在这里，方便以后Copy & Paste

<!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>
 
</title>
    <script type="text/javascript" src="http://img.7bazaar.com/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://img.7bazaar.com/js/jquery.imageScroller.js"></script>
    <style type="text/css">
        * { list-style: none; font-size: 12px; padding: 0; margin: 0; }
        
        #container { width: 460px; height: 100px; background: red; position: absolute; left: 50%; top: 50%; margin-left: -230px; margin-top: -50px; }
        #btnPrev, #btnNext, #listBox { float: left; }
        
        #btnPrev, #btnNext { width: 30px; height: 18px; line-height: 18px; padding: 41px 0; background: #ff9; text-align: center; }
        
        #listBox { width: 400px; height: 100px; overflow: hidden; background: #000; }
        
        #list li { width: 90px; height: 90px; line-height: 100px; text-align: center; float: left; background-color: Aqua; overflow: hidden;margin:5px;display:inline }
    </style>
    <script type="text/javascript">
 
        $(function () {
            $("#listBox").imageScroller({
                next: "btnNext",
                prev: "btnPrev",
                frame: "list",
                child: "li",
                auto: false
            });
        });
        
    </script>
</head>
<body>
    <div id="container">
        <div id="btnNext" title="上一个">
            <<
        </div>
        <div id="listBox">
            <ul id="list">
                <li>001</li>
                <li>002</li>
                <li>003</li>
                <li>004</li>
                <li>005</li>
                <li>006</li>
                <li>007</li>
                <li>008</li>
                <li>009</li>
            </ul>
        </div>
        <div id="btnPrev" title="下一个">
            >>
        </div>
    </div>
</body>
</html>

运行代码 (注:如果点击运行代码后报js错误，请在页面上右击选择编码为utf-8或刷新页面)

上面的jquery.imageScroller.js，如果您不想当成插件来用，里面的代码也可以单独扒出来(麦考林首页就是这么用的.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
            border: 0;
            list-style: none;
            font-size: 12px;
        }
        
       body{height:100%;}
        
        .catalog
        {
            position: relative;
            height: 165px;
            width: 226px;
            overflow: hidden;           
            left: 50%;
            top:50%;
            margin-left: -113px;
            margin-top: -82px;
        }
        .catalog .h5
        {
            font-weight: bold;
            background: #e4e4e4;
            line-height: 20px;
            height: 20px;
            margin-bottom: 5px;
            text-indent: 5px;
        }
        
        .catalog .imgbox li
        {
            width: 113px;
            height: 140px;
            float: left;
            overflow: hidden;
        }
        .catalog .arrow
        {
            position: absolute;
            width: 90px;
            height: 19px;
            top: 1px;
            right: 0px;
            _display: inline;
        }
        .catalog .arrow li
        {
            float: left;
        }
        .catalog .arrow a.left
        {
            line-height: 15px;
            text-indent: -99em;
            width: 30px;
            display: block;
            background: url(http://images.24city.com/jimmy/img/ca-arrow2.gif) no-repeat 0px 0px;
            height: 19px;
            overflow: hidden;
        }
        .catalog .arrow a.right
        {
            line-height: 15px;
            text-indent: -99em;
            width: 30px;
            display: block;
            background: url(http://images.24city.com/jimmy/img/ca-arrow2.gif) no-repeat 0px 0px;
            height: 19px;
            overflow: hidden;
        }
        .catalog .arrow a.left
        {
            width: 50px;
            background-position: -76px 0px;
        }
        
        .catalog .arrow a.right
        {
            background-position: -131px 0px;
            margin-left: 8px;
        }
        .catalog .arrow a.left:hover
        {
            background-position: 0px 0px;
        }
        .catalog .arrow a.right:hover
        {
            background-position: -55px 0px;
        }
    </style>
</head>
<body>
    <div id="catalog" class="catalog">
        <div class="h5">
            最新目录</div>
        <ul class="imgbox">
            <li><a href="#">
                <img alt="" src="http://images.24city.com/jimmy/img/mag1.jpg" /></a></li>
            <li><a href="#">
                <img alt="" src="http://images.24city.com/jimmy/img/mag2.jpg" /></a></li>
            <li><a href="#">
                <img alt="" src="http://images.24city.com/jimmy/img/mag3.jpg" /></a></li>
            <li><a href="#">
                <img alt="" src="http://images.24city.com/jimmy/img/mag4.jpg" /></a></li>
        </ul>
        <ul class="arrow">
            <li><a class="left" title="向左" href="#">向左</a></li>
            <li><a class="right" title="向右" href="#">向右</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        var slideX = {
            thisUl: $('#catalog ul.imgbox'),
            btnLeft: $('#catalog a.left'),
            btnRight: $('#catalog a.right'),
            thisLi: $('#catalog ul.imgbox li'),
            init: function () {
                slideX.thisUl.width(slideX.thisLi.length * 113);
                slideX.slideAuto();
                slideX.btnLeft.click(slideX.slideLeft).hover(slideX.slideStop, slideX.slideAuto);
                slideX.btnRight.click(slideX.slideRight).hover(slideX.slideStop, slideX.slideAuto);
                slideX.thisUl.hover(slideX.slideStop, slideX.slideAuto);
            },
            slideLeft: function () {
                slideX.btnLeft.unbind('click', slideX.slideLeft);
                slideX.thisUl.find('li:last').prependTo(slideX.thisUl);
                slideX.thisUl.css('marginLeft', -113);
                slideX.thisUl.animate({ 'marginLeft': 0 }, 350, function () {
                    slideX.btnLeft.bind('click', slideX.slideLeft);
                });
                return false;
            },
            slideRight: function () {
                slideX.btnRight.unbind('click', slideX.slideRight);
                slideX.thisUl.animate({ 'marginLeft': -113 }, 350, function () {
                    slideX.thisUl.css('marginLeft', '0');
                    slideX.thisUl.find('li:first').appendTo(slideX.thisUl);
                    slideX.btnRight.bind('click', slideX.slideRight);
                });
                return false;
            },
            slideAuto: function () {
                slideX.intervalId = window.setInterval(slideX.slideRight, 3000);
            },
            slideStop: function () {
                window.clearInterval(slideX.intervalId);
            }
        }
        $(document).ready(function () {
            slideX.init();
        })
    </script>
</body>
</html>

运行代码 (注:如果点击运行代码后报js错误，请在页面上右击选择编码为utf-8或刷新页面)

当然，上面的代码稍加改造也能变成垂直滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <style type="text/css">
        * { padding: 0; margin: 0; border: 0; list-style: none; font-size: 12px; }        
        body { height: 100%; }        
        .catalog { position: relative; height: 316px; width: 113px; overflow: hidden; left: 50%; top: 50%; margin-left: -56px; margin-top: -152px; }       
        .catalog .imgbox { width: 113px; height: 280px; overflow: hidden; }        
        .catalog .imgbox li { width: 113px; height: 140px; overflow: hidden; }
        .catalog .arrow { position: absolute; width: 52px; height: 19px; top: 1px; right: 0px; _display: inline; }        
        .catalog a.aUp, .catalog a.aDown { display: block; background: #efefef; text-align: center; line-height: 18px; height: 18px; text-decoration: none; }
    </style>
</head>
<body>
    <div id="catalog" class="catalog">
        <a href="javascript:void(0)" class="aUp" title="向上">∧</a>
        <div class="imgbox">
            <ul class="imgbox">
                <li><a href="#">
                    <img alt="1" src="http://images.24city.com/jimmy/img/mag1.jpg" /></a></li>
                <li><a href="#">
                    <img alt="2" src="http://images.24city.com/jimmy/img/mag2.jpg" /></a></li>
                <li><a href="#">
                    <img alt="3" src="http://images.24city.com/jimmy/img/mag3.jpg" /></a></li>
                <li><a href="#">
                    <img alt="4" src="http://images.24city.com/jimmy/img/mag4.jpg" /></a></li>
            </ul>
        </div>
        <a href="javascript:void(0)" class="aDown" title="向下">∨</a>
    </div>
    <script type="text/javascript">
        var slideY = {
            thisUl: $('#catalog ul.imgbox'),
            btnUp: $('#catalog a.aUp'),
            btnDown: $('#catalog a.aDown'),
            thisLi: $('#catalog ul.imgbox li'),
            init: function () {
                slideY.thisUl.width(slideY.thisLi.length * 140);
                slideY.slideAuto();
                slideY.btnUp.click(slideY.slideTop).hover(slideY.slideStop, slideY.slideAuto);
                slideY.btnDown.click(slideY.slideDown).hover(slideY.slideStop, slideY.slideAuto);
                slideY.thisUl.hover(slideY.slideStop, slideY.slideAuto);
            },
            slideTop: function () {
                slideY.btnUp.unbind('click', slideY.slideTop);
                slideY.thisUl.find('li:last').prependTo(slideY.thisUl);
                slideY.thisUl.css('marginTop', -140);
                slideY.thisUl.animate({ 'marginTop': 0 }, 350, function () {
                    slideY.btnUp.bind('click', slideY.slideTop);
                });
                return false;
            },
            slideDown: function () {
                slideY.btnDown.unbind('click', slideY.slideDown);
                slideY.thisUl.animate({ 'marginTop': -140 }, 350, function () {
                    slideY.thisUl.css('marginTop', '0');
                    slideY.thisUl.find('li:first').appendTo(slideY.thisUl);
                    slideY.btnDown.bind('click', slideY.slideDown);
                });
                return false;
            },
            slideAuto: function () {
                slideY.intervalId = window.setInterval(slideY.slideDown, 3000);
            },
            slideStop: function () {
                window.clearInterval(slideY.intervalId);
            }
        }
        $(document).ready(function () {
            slideY.init();
        })
    </script>
</body>
</html>