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或刷新页面)

 

时间： 2024-08-30 13:19:55

jQuery无缝图片横向(水平)/竖向(垂直)滚动的相关文章

jquery实现可横向和竖向展开的动态下滑菜单效果_jquery

本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果.分享给大家供大家参考.具体如下: 这里演示了两个下拉导航菜单的效果,用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现,最新的jquery版本也可以引入,在演示页面中,分别有横向水平向下滑出的下拉菜单,还有纵向垂直布局向右滑出的导航菜单,根据你的需要选择使用. 运行效果截图如下: 在线演示地址如下: http://

实现网页内容水平或垂直滚动的Javascript代码_javascript技巧

主要两个部分,一.是滚动内容部分:二.JS的滚动代码部分,也只有两句话. 一.传统的滚动代码 用Javascript实现新闻内容的水平滚动! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 传统的滚动代码应用效果比较单一,而且经常还存在浏览器的兼容性问题,比如在FIREFOX上效果就会出现marquee的特效无效的问题. 二.Javascript实现的滚动效果 用Javascript实现新闻内容的水平滚动1 //div标签中的宽度width等参数可以自行调节 [Ctrl+A 全选 注

JQuery页面图片切换和新闻列表滚动效果的具体实现_jquery

最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: 复制代码 代码如下: <!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"&g

android listview 水平滚动和垂直滚动的小例子_Android

网上有很多解决 android listview 水平和垂直滚动的代码,我没有按照他们说的做(以前没搜到 O(∩_∩)O~) 我采用的是添加HorizontalScrollViewJava代码 复制代码 代码如下:  < ScrollView android:id="@+id/ScrollView01" android:layout_height="300px" android:layout_x="16px" android:layout_

android listview 水平滚动和垂直滚动的小例子

网上有很多解决 android listview 水平和垂直滚动的代码,我没有按照他们说的做(以前没搜到 O(∩_∩)O~) 我采用的是添加HorizontalScrollView Java代码 复制代码 代码如下:  < ScrollView android:id="@+id/ScrollView01"  android:layout_height="300px"  android:layout_x="16px"  android:lay

jquery实现marquee效果(文字或者图片的水平垂直滚动)_jquery

原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽. 原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果.然后通过整个大容器滚动条的左右或者上下的移动来实现滚动.下面附上一张手绘的图,来简要阐述下原理.首先,我们的目的是实现框1中的内容水平向左滚动(向右

在一张PPT页怎么设置一组图片水平滚动或垂直滚动效果?

  在网页上经常看到一组图片水平滚动或者垂直滚动的效果,那么在microsoft office powerpoint(PPT)中能否实现呢?答案是可以的.下面我来介绍一下,希望能对大家有所帮助! 方法/步骤 打开microsoft office powerpoint(PPT),插入四张图片(几张也可以) 设置图片大小 双击图片-大小-设置图片格式-取消锁定纵横比-宽度5厘米*高度5厘米(根据图片数量设置) 对齐图片,底端对齐-横向居中(也可以手动调节) 将图片组合 复制一组对齐.点动画-动画空格

jquery实现图片水平滚动效果代码分享_jquery

本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现图片水平滚动效果代码如下 <HEAD> <META content="text/html; charset=gb2312" http-equiv="Content-Type"> &

jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)_jquery

一.jQuery.roll 插件使用说明 jQuery.roll 是模拟百度新闻不间断滚动效果,并支持文字.图片水平垂直滚动,该函数使用方法为: 复制代码 代码如下: /* * @module jQuery roll * @param: contentCls 内容容器className * @param: contentParentId 内容容器父元素节点ID * @param: configs 配置参数 * * @config: effect 滚动效果 * @config: duration