JQuery左右按钮控制图片文字向上滚动自定义插件-阿里云开发者社区

今天给大家分享的是 Jquery插件用Jquery写个插件此插件包含几部分功能：

1 文字向上滚动或者向下滚动

2 图片默认情况下向左滚动或者向右滚动向上及向下滚动滚动一个或者几个都是自定义就看本人而言你想要一次性滚动多少个就滚动多少个并且带有向左按钮向右按钮当点击向左按钮时候会向左滚动点击向右按钮时候图片向右滚动

3 当然此插件希望能在可视区范围内的图片数量<总的图片数量(可视区+隐藏的) 如果是可视区是三张图片的话那么我让他滚动三张的话那么有一点点不稳定一点点不美观！但是不管怎么样效果还是非常棒的！

这个Jquery组件是我今年5月份左右仿照我的一个朋友的js写过来的！这个组件非常的好可以自定义所以也拿来给各位朋友分享下！希望大家能够共同进步！能兼容各个主流游览器包括IE6！所以有碰到这样的效果时候很急的话直接可以拿来用当然我个人更建议大家看看源代码源代码大部分我都小小注释了下！页面传参数的时候我是用了kk 这样的本来一般情况下用$符合但是我是为了以后做淘宝页面时候碰到类似下效果直接拿来用但是$符合会i和淘宝的KISSY框架发生冲突,所以用了其他的符合代替，在接下来时间内我可能会多翻译下Jquery其他的效果或者组件恩不多说啊！现在来看看代码吧！恩还是要提前说一下如果要引用我这个js的话那么一定要和我的结构一样否则的话 js没有用的！

我的结构如：

完整的html代码结构：
*<div id="example">
* <div class="scroll">
* <ul>
* <li></li>
* <li></li>
* <li></li>
* <li></li>
* </ul>
* </div>
* <span class="prev">前一个</span>
* <span class="next">下一个</span>
*</div>

这上面的是基本的HTML结构一定要按照我这个结构来写！页面上调用方式如下：

$("#demo3").XYMarquee({
_direction:'left',
_btnNext : "next",
_btnPrev : "prev",
_auto : false,
_item:"3"
});

调用方式如上所述：下面介绍一些基本的参数的含义：

* _direction : left || top ,设置滚动方向（向左或者向上）默认为向左滚动
* _btnNext : 下翻页的ID名称
* _btnPrev : 上翻页的ID名称
* _auto : 布尔值(true为自动滚动,false为手动滚动,默认为true);
* _item : 设置每次滚动元素的个数(默认滚动所有可见部分)
* _speed : 设置每次滚动动画执行时间(单位为毫秒，默认为1000);
* _time : 设置每次动画执行的间隔时间(单位为毫秒默认为3000);

下面是我这个测试的页面HTML/css

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {
margin:0;
padding:0;
}
body {
background:#e3e3e3;
height:100%;
font:normal normal 12px/24px "Microsoft yahei", Arial;
padding-bottom:30px;
}
li{list-style:none;}
h3{color:#333;font-size:14px;width:330px;margin:30px auto 0;}
img{display:block;}
#title{margin:20px 0; text-align:center;}
#wrap {position:relative;width:800px;height:550px;margin:0 auto;background:#f8f8f8;border:1px solid #a3a3a3;border-radius:5px;-moz-border-radius:5px;}
.ws{margin-top:30px;text-align:left;}
.box{width:400px;margin:0 auto;margin-top:10px;}
.boxs{width:110px;margin:0;margin-top:30px;}
.box span.title{float:left;height:30px;line-height:28px;border:1px solid #5AABCF;border-right:none;text-indent:5px;margin-left:29px;background:#73C5E5;color:#fff;}
/*文字*/
.scroll1{width:297px;height:30px;margin:0 auto;border:1px solid #5AABCF;overflow:hidden;}
.scroll1 li{width:230px;height:30px;line-height:30px;text-indent:5px;}
.scroll2 {width:330px;height:110px;margin:0 auto;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
.scroll2 li{float:left;width:100px;height:100px;padding:5px;}
.scroll3 {width:330px;height:110px;margin:0 auto;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
.scroll3 li{float:left;width:100px;height:100px;padding:5px;}
.scroll4 {width:110px;height:330px;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
.scroll4 li{width:100px;height:100px;padding:5px;}
.absl{position:absolute;left:30px; top:0;}
.scroll5 {width:110px;height:330px;border:1px solid #5AABCF;padding:5px;overflow:hidden;}
.scroll5 li{width:100px;height:100px;padding:5px;}
.absr{position:absolute;right:40px; top:0;}
#prev,
#next{float:left;margin-top:5px;margin-left:5px;padding:2px 5px;background:#73C5E5;color:#fff;cursor: pointer;}
.download{width:300px;margin:0 auto;text-align:center;}
.cl{clear:both;}
.fl{float:left;}
.fr{float:right;}
.hide{display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.XYMarquee.js"></script>
</head>
<body>
<div id="wrap">
<div class="ws">
<h3>文字自动滚动(向上)</h3>
<div class="box" id='demo1'>
<span class="title">尘世：</span>
<div class='fl scroll1'>
<ul>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
<li>欢迎来到博主的空间；</li>
</ul>
</div>
<div class="cl"></div>
</div>
</div>
<div class="ws">
<h3>图片自动滚动(向左)</h3>
<div class="box" id='demo2'>
<div class='scroll2'>
<ul>
<li><img src="images/1-1.jpg" alt="" /></li>
<li><img src="images/1-2.jpg" alt="" /></li>
<li><img src="images/1-3.jpg" alt="" /></li>
<li><img src="images/1-4.jpg" alt="" /></li>
<li><img src="images/1-5.jpg" alt="" /></li>
<li><img src="images/1-6.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>
<div class="ws">
<h3>图片滚动(向左,带按钮控制,每次滚动个数3)</h3>
<div class="box" id='demo3'>
<div class='scroll3'>
<ul>
<li><img src="images/1-1.jpg" alt="" /></li>
<li><img src="images/1-2.jpg" alt="" /></li>
<li><img src="images/1-3.jpg" alt="" /></li>
<li><img src="images/1-4.jpg" alt="" /></li>
<li><img src="images/1-5.jpg" alt="" /></li>
<li><img src="images/1-6.jpg" alt="" /></li>
</ul>
</div>
<span id="prev" style="margin-left:30px;">前一个</span>
<span id="next">下一个</span>
</div>
</div>
<div class="boxs absl" id='demo4'>
<div class='scroll4'>
<ul>
<li><img src="images/1-1.jpg" alt="" /></li>
<li><img src="images/1-2.jpg" alt="" /></li>
<li><img src="images/1-3.jpg" alt="" /></li>
<li><img src="images/1-4.jpg" alt="" /></li>
<li><img src="images/1-5.jpg" alt="" /></li>
<li><img src="images/1-6.jpg" alt="" /></li>
</ul>
</div>
</div>
<div class="boxs absr" id='demo5'>
<div class='scroll5'>
<ul>
<li><img src="images/1-1.jpg" alt="" /></li>
<li><img src="images/1-2.jpg" alt="" /></li>
<li><img src="images/1-3.jpg" alt="" /></li>
<li><img src="images/1-4.jpg" alt="" /></li>
<li><img src="images/1-5.jpg" alt="" /></li>
<li><img src="images/1-6.jpg" alt="" /></li>
</ul>
</div>
<span id="prev">前一个</span>
<span id="next">下一个</span>
</div>
<div class="cl"></div>
</div>
<script>
$(function(){
$("#demo1").XYMarquee({
_direction:'up',
_item:"1"
});
$("#demo2").XYMarquee({
_direction:'left',
_item:"1"
});
$("#demo3").XYMarquee({
_direction:'left',
_btnNext : "next",
_btnPrev : "prev",
_auto : false,
_item:"3"
});
$("#demo4").XYMarquee({
_direction:'up',
_item:"1"
});
$("#demo5").XYMarquee({
_direction:'up',
_btnNext : "next",
_btnPrev : "prev",
_auto : false,
_item:"3"
});
});
</script>
</body>
</html>

Jquery如下：

// JavaScript Document
/*
× JQuery XYMarquee 插件
× email tugenhua@126.com
* date 2011 11 29
* @ example
* $("#example").XYMarquee({
* next : "next",
* prev : "prev"
* })
**********************************************************************
*jMarquee o参数可配置项：
* _direction : left || top ,设置滚动方向（向左或者向上）默认为向左滚动
* _btnNext : 下翻页的ID名称
* _btnPrev : 上翻页的ID名称
* _auto : 布尔值(true为自动滚动,false为手动滚动,默认为true);
* _item : 设置每次滚动元素的个数(默认滚动所有可见部分)
* _speed : 设置每次滚动动画执行时间(单位为毫秒，默认为1000);
* _time : 设置每次动画执行的间隔时间(单位为毫秒默认为3000);
**********************************************************************
*完整的html代码结构：
*<div id="example">
* <div class="scroll">
* <ul>
* <li></li>
* <li></li>
* <li></li>
* <li></li>
* </ul>
* </div>
* <span class="prev">前一个</span>
* <span class="next">下一个</span>
*</div>
**********************************************************************
* 一定要按照我这种结构的话来写代码否则的话 js无效
* 本来下面传参一般情况下用$符合但是为了我以后在淘宝页面引用js 所以我用了KK 目的是为了防止与淘宝框架KISSY 中的$冲突
× 此组件希望可视区的图片数量<总图片数量(可视区图片+隐藏的图片) 这样的效果很好否则的话滚动时会有一点点的不怎么美观
*/
;(function(kk) {
kk.fn.extend({
XYMarquee : function(o){
var defaults = {
_direction : "left",
_btnNext : "prev",
_btnPrev : "next",
_auto : true,
_item : null,
_speed : "1000",
_time : "3000"
};
var obj = kk.extend(defaults,o);
return this.each(function(){
var timer;
var marquee = true,_self = kk(this),kkWrap = kk("div",_self),kkParent = kk("li",kkWrap).parent(); //获取当前的函数函数中的最外层div ul
var count = obj._direction =="left" ? Math.floor(kkWrap.width()/ kk("li", kkWrap).outerWidth()):Math.floor(kkWrap.height() / kk("li", kkWrap).outerHeight()); //定义一个变量count 如果向左的话那么用最外层的div的宽度/li的最外层宽度高度同理
if(obj._item){count = obj._item;} //count滚动数量通过_item赋值
if(obj._direction =="left"){
kkParent.css("width",kkWrap.width()*2 + "px"); //如果对象是向左移动的话那么我让ul的宽度×2
}else{
kkParent.css("height",kkWrap.height()*2 + "px"); //如果对象是向上滚动的话让ul的高度×2 目的是为了循环滚动
}
kkWrap.css("overflow","hidden"); //给最外层的div添加overflow:hidden;
var kkValue = obj._direction =="left" ? kk("li",kkWrap).outerWidth()*count : kk("li",kkWrap).outerHeight()*count;
// 定义一个变量如果滚动是向左的话那么滚动值是li的宽度×要滚动多少个同理如果是向上的话那么获取li最外层的高度×要滚动多少个
function scrollNext(){
if(marquee){
marquee = false; //这是为了当我鼠标点击向下按钮时候让默认滚动停下来做我点击向下按钮的触发函数
if(obj._direction == "left"){
kkParent.animate({
marginLeft: -kkValue
},obj._speed,function(){
var kkTempWrap = kk("li",kkWrap).slice(0,count); //提取li的个数
kkParent.append(kkTempWrap); //追加ul后面
kkParent.css("marginLeft",0); //当父类ul滚动到0时候也就是li最后一个时候让marquee = true 那么他又执行上面的false 那么就向左循环滚动了
marquee = true;
});
}else{
kkParent.animate({
marginTop : -kkValue
},obj._speed,function(){
var kkTempWrap = kk("li",kkWrap).slice(0,count);
kkParent.append(kkTempWrap);
kkParent.css("marginTop",0);
marquee = true;
});
}
}
};
function scrollPrev(){
if(marquee){
var kkTempWrap = kk("li",kkWrap).slice( - count); //获取li向左滚动的总数量
marquee = false;
kkParent.prepend(kkTempWrap);
if(obj._direction =="left"){
kkParent.css("marginLeft",-kkValue);
kkParent.animate({marginLeft : 0},obj._speed,function(){
marquee = true;
});
}else{
kkParent.css("marginTop",-kkValue);
kkParent.animate({
marginTop : 0
},obj._speed,function(){
marquee = true;
});
}
}
};
function stopMarquee(){
clearInterval(timer);
}
function autoPlay(){
timer = setInterval(scrollNext,obj._time);
}
if(obj._auto){
kkWrap.hover(function(){
stopMarquee();
},function(){
autoPlay();
});
kk("#" + obj._btnPrev, _self).hover(function() {
stopMarquee();
},function() {
autoPlay();
});
kk("#" + obj._btnNext, _self).hover(function() {
stopMarquee();
},function() {
autoPlay();
});
autoPlay();
}
kk("#" + obj._btnPrev, _self).click(scrollPrev);
kk("#" + obj._btnNext, _self).click(scrollNext);
});
}
});
})(jQuery);

如上所示 jquery里面有相应的注释！下面有附件可以下载附件看看效果都可以！我上面的HTML有页面上的所有效果！大家可以看看！！

本文转自涂根华 51CTO博客，原文链接：http://blog.51cto.com/tugenhua/729361，如需转载请自行联系原作者

JQuery左右按钮控制图片文字向上滚动自定义插件

热门文章

最新文章

相关课程

相关电子书

相关实验场景

JQuery左右按钮控制图片 文字向上滚动自定义插件