当前位置:首页 > 教程 > Web前端 > HTML&jQuery横向循环左右滚动导航方法讲解

HTML&jQuery横向循环左右滚动导航方法讲解

在网页制作中有一种特效就是实现点击左右按钮可以滚动,滚动条的项目可以左右隐藏,这样做的好处是实现小空间实现多内容的展示,增加了网页的美观,提高了网页的观赏度。
网页制作设置-jquery左右滚动实现

二话不说下面直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!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>可配置横栏滚动Demo</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
</style>
 
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
 
#scrollable {
    background-color:#efefef;
    border:1px solid #ddd;
    padding:10px 8px;
    width:523px;
    height:65px;
    margin-top:30px;
}
div.items {
    height:66px;    
    margin-left:8px;
    float:left;
    width:475px !important;
}
 
 
div.items a {
    display:block;
    float:left;
    margin-right:8px;
    width:88px;
    height:66px;
    background:#BBB;
    font-size:50px;
    color:#ccc;
    line-height:66px;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
}
 
div.items a:hover {
    color:#999;    
}
 
div.items a.active {
    background-position:-174px 0;        
    color:#555;
    cursor:default;
}
 
 
a.prev, a.next {
    background:url(left.png) no-repeat 0 0;
    display:block;
    width:18px;
    height:18px;
    float:left;    
    margin:22px 0 0 0;
    cursor:pointer;
}
 
a.next {
    background-image:url(right.png)        
}
 
a.prev:hover {
    background-position:0 -18px;        
}
 
a.next:hover {
    background-position:0 -18px;        
}
</style>
<script language="javascript" type="text/javascript">    
        (function ($) {
            $.fn.extend({
                Scroll: function (opt, callback) {
 
                    if (!opt) var opt = {};
                    var _btnleft = $(opt.left);
                    var _btnright = $(opt.right);
                    var timerID;
                    var _this = this.eq(0).find("div").eq(1);
                    var lineW = _this.find("a:first").width(), //获取列宽
                    line = opt.line ? parseInt(opt.line, 10) : parseInt(_this.width() / lineW, 10), //每次滚动的列数,默认为一屏,即父容器列宽
                    speed = opt.speed ? parseInt(opt.speed, 10) : 500; //滚动速度,数值越大,速度越慢(毫秒) 
                    timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔(毫秒)   
                    if (line == 0) line = 1;
                    var upWidth = 0 - line * lineW;
                    //滚动函数              
                        var scrollLeft = function () {
                        if (!_this.is(":animated")) {
                            _this.animate({
                                left: upWidth
                            }, speed, function () {
                                for (i = 1; i <= line; i++) {
                                    _this.find("a:first").appendTo(_this);
                                }
                                _this.css({ left: 0 });
                            });
                        }
                    }
                    var scrollRight = function () {
                        if (!_this.is(":animated")) {
                            for (i = 1; i <= line; i++) {
                                _this.find("a:last").show().prependTo(_this);
                            }
                            _this.css({ left: upWidth });
                            _this.animate({
                                left: 0
                            }, speed, function () {
                            });
                        }
                    }                         //Shawphy:自动播放    
                    var autoPlay = function () {
                            if (timer) timerID = window.setInterval(scrollLeft, timer);
                    };
                    var autoStop = function () {
                        if (timer) window.clearInterval(timerID);
                    };//鼠标事件绑定 
                    _this.hover(autoStop, autoPlay).mouseout();
					_btnleft.css("cursor", "pointer").click(scrollLeft).hover(autoStop, autoPlay); 
					_btnright.css("cursor", "pointer").click(scrollRight).hover(autoStop, autoPlay);
                }
            })
        })(jQuery);
        $(document).ready(function () {
            $("#scrollable").Scroll({ line: 5, speed: 500, timer: 3000, left: ".prev", right: ".next"});
        }); 
</script>
</head>
<body>
<div style="margin:0 auto;width:500px;">
 
    <div id="scrollable">
        <a class="prev" href="#">Last</a>
 
        <div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">
            <div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo">
                <a>1</a>
                <a>2</a>
                <a>3</a>
                <a>4</a>
                <a>5</a>
                <a>6</a>
                <a>7</a>
                <a>8</a>
                <a>9</a>
                <a>10</a>
                <a>11</a>
                <a>12</a>
                <a>13</a>
                <a>14</a>
                <a>15</a>
            </div>
            <br clear="all"/>            
        </div>
 
        <a  class="next" href="#">Next</a>
    </div>
 
</div>
</body>
</html>

效果如下图所示
基于jquery&HTML&CSS可配置循环左右滚动例子

其中

1
 <a class="prev" href="#">Last</a>和<a  class="next" href="#">Next</a>

是左右两个滚动的控制按钮,你可以根据自己的要求,进行图片样式设置。其中的js都有相应的说明,需要提到是示例使用的是自动左右移动,可以在自由滚动的方法中直接返回就可以停止自由滚动。代码的可以直接复制使用的,其中已经引入了新浪的CDN jQuery,你需要做的就是替换其中的items下面的项换成自己的内容,样式自己自由设定。

  • << 怎样从网址导航站获取流量教程讲解
  • 怎样打造个人成功博客教程讲解(一):... >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/html-jquery-scroll/

    相关文章 近期热评 最新文章

    • JS&jQuery实现全球国家、州/省、城市select下拉框选择示例
      当我们填写用户地址的时候,需要填写用户的地址,对于全球的用户我们不能让用户任意输入地址,需要的是让用户选择地址,而不是填写。但是全球的国家众多,每个国家的州/...
    • JQuery 获取浏览器窗口的高度和宽度讲解
      在我们使用JQuery开发的过程中我们有时会根据浏览器窗口的位置定位,本文讲解一下获取浏览器窗口尺寸、文档尺寸、以及浏览器滚动条尺寸的一些方法。
    • HTML+JS+CSS 实现Tab选项卡
      在网页特效中经常需要使用到Tab选项卡的特效,实现这种特效需要使用HTML、CSS、JS的综合运用。实现Tab选项卡介绍了使用jQuery UI和自定义实现HTML Tab 选项卡的两种方法。
    • JS/jQuery 实现Combobox可输可选下拉框(select)
      本文介绍了JS/jQuery 实现Combobox可输可选下拉框的方法,可以通过Ajax实现动态加载可输可选下拉框的选项,可以在下拉框中输入一个新值动态添加一个数据选项,同样可以...
    • jQuery 实现的多功能Tree/TreeView “树插件”— zTree
      zTree 是一个依靠 jQuery 实现的 Tree/TreeView 熟悉插件, zTree 最大优点是具有灵活的配置、优异的性能、多种功能的组合。本文详细介绍了通过zTree实现jQuery设置Tree...
    • jQuery 国家语言(Language)选择切换讲解
      现在网站不仅是做的国内的,更多的大企业或者是做外贸电子商务的网站都需要面向国际化,因此就涉及到语言的选择,多语言网站建的切换应该怎么设计呢?这里给你一款jQuer...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。