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

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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的小碗汤

极致简洁的markdown编辑神器

Markdown 其实向来是文字爱好者和码农们的小众需求,市面上也涌现出了形形色色的 Markdown 编辑器,Mou、Typed、Ulysess、Macdow...

26950
来自专栏葡萄城控件技术团队

【图解】Web前端实现类似Excel的电子表格

本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线...

2K60
来自专栏极乐技术社区

小程序重力感应-加速度计的使用

13120
来自专栏Golang语言社区

【图解】Web前端实现类似Excel的电子表格

本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在...

60690
来自专栏非典型技术宅

设置Cell的行高:五种方法及优先级1. 四种基本设置方法2. 四种方法的优先级3. 自动进行计算cell的行高

12560
来自专栏张戈的专栏

张戈博客成功启用移动端主题:Mobile Pack

建站以来,总是忙于 PC 端主题的折腾,移动端主题只是偷懒的使用了 WPtouch 插件。现在 PC 端主题已完善七七八八了,是时候折腾下移动端自适应主题了,毕...

37960
来自专栏Golang语言社区

使用Go开发一个简单的服务器程序

最近有个小项目,需要一个简单的后台程序来支撑,本来想用Nodejs来做,但是由于本人js一直很菜,并且很讨厌callback,虽然我也很喜欢异步模型,但我一直都...

36560
来自专栏林德熙的博客

win10 uwp 让焦点在点击在页面空白处时回到textbox中

在网上 有一个大神问我这样的问题:在做UWP的项目,怎么能让焦点在点击在页面空白处时回到textbox中? 虽然我的小伙伴认为他这是一个 xy 问题,但是我还是...

11010
来自专栏c#开发者

datagrid资料+ by iCeSnaker - Program rhapsody

datagrid资料+ by iCeSnaker - Program rhapsody 关于datagrid的打印 http://www.chinaaspx.c...

37090
来自专栏ionic3+

【组件篇】ionic3均分列等宽高图像显示(下)

那就是它依赖一个addImage(用于添加的仿按钮图像),如果我没有这个东西,逻辑上是不是就不能用了?是的!那为了使得这个组件能更通用些,改造一下:

9230

扫码关注云+社区

领取腾讯云代金券