自己使用jquery写的一个无缝滚动的插件_jquery

效果图:

 

html代码:

复制代码 代码如下:

<h1>无缝滚动,向右滚动</h1>
<ul id="guoul1">
<li><img src="img/f1.jpg" alt="f1"/></li>
<li><img src="img/f2.jpg" alt="f2"/></li>
<li><img src="img/f3.jpg" alt="f3"/></li>
<li><img src="img/f4.jpg" alt="f4"/></li>
<li><img src="img/f5.jpg" alt="f5"/></li>
<li><img src="img/f6.jpg" alt="f6"/></li>
<li><img src="img/f7.jpg" alt="f7"/></li>
</ul>

<h1>无缝滚动,向左滚动</h1>
<ul id="guoul2">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>无缝滚动,向上滚动</h1>
<ul id="guoul3">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>无缝滚动,向下滚动</h1>
<ul id="guoul4">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>无缝滚动,非ul,li标签组合,向右滚动</h1>
<div id="guoul5">
<p>111111111111</p>
<p>222222222222</p>
<p>3333333333333</p>
<p>4444444444444</p>
<p>5555555555555</p>
<p>6666666666666</p>
<p>7777777777777</p>
<p>8888888888888</p>
<p>9999999999999</p>
</div>
<h1>不动</h1>
<ul id="guoul6">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>

css代码:

复制代码 代码如下:

ul, li,h1 { margin: 0; padding: 0; list-style-type:none;}
ul,div { height: 200px; border: 1px solid red; width: 300px; padding: 30px;margin:10px;list-style-type:none;}
li,p { height: 30px; line-height: 30px; margin-top: 10px; background-color: Gray; color: Yellow; margin-left:10px;}
#guoul1{ width:1000px; height:188px;margin: 0; padding: 0;}
#guoul1 li{ width:300px; height:188px;margin: 0; padding: 0; margin-left:10px;}

js插件代码:

复制代码 代码如下:

; (function ($) {
var defaults = {
dir: "left", //none:不动,up:上,right:右,down:下,right:左
delay: 30,//执行时间
};
$.fn.gysContentDisplay = function (opt) {
opt = $.extend({}, defaults, opt);

//全局变量区域
var obj = $(this); //当前对象
obj.css({ "overflow": "hidden" }); //初始化元素
if (opt.dir == "none") return;
var objLis = obj.children(); //对象中的子元素
objLis.css({ "overflow": "hidden" });
var objSize = 0; //外框尺寸
var scrollEvent = "scrollLeft"; //滚动条的滚动方向
var liTotalSize = 0, liTotalSizeOther = 0; //每个li元素的尺寸(宽或者高),克隆之后的总尺寸
var scrollSize = 0, //滚动条的实际距离
scrollSizeMax = 0, //滚动条的最大距离
scrollSizeMin = 0; //滚动条的最小距离
var interval = ""; //记录setInterval

if (opt.dir == "up" || opt.dir == "down") {//上下
objSize = obj.innerHeight();
scrollEvent = "scrollTop";
obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize);
}
else if (opt.dir == "left" || opt.dir == "right") {//左右
objSize = obj.innerWidth();
scrollEvent = "scrollLeft";
obj.css({ "padding-left": 0, "padding-right": 0 }).width(objSize);
}
else {
alert("你的dir参数有误");
}

var getChildTotalSize = function (dir) {// 定义获取li总尺寸的方法
if (dir == "left" || dir == "right") {
objLis.css("float", "left");
return function () {
objLis.each(function () {
liTotalSize += $(this).outerWidth(true);
});
}
}
else if (dir == "up" || dir == "down") {
objLis.css("float", "none");
return function () {
objLis.each(function () {
liTotalSize += $(this).outerHeight(true);
});
}
}
} (opt.dir);
getChildTotalSize(); //获得所有的li的总尺寸,在方法中赋值

(function () {
var cloneCount = Math.ceil(objSize * 2 / liTotalSize); //赋值子元素多少遍
var cloneHtmlNow = "", cloneHtmlStart = obj.html(); //原始的子元素字符串

for (var i = 0; i < cloneCount; i++) {
cloneHtmlNow += cloneHtmlStart;
}
obj.append(cloneHtmlNow);
liTotalSizeOther = (cloneCount + 1) * liTotalSize; //获取添加了子元素之后的长度
})();

if (opt.dir == "left" || opt.dir == "right") {
obj.css({ "position": "relative", "z-index": 0 });
obj.children().css({ "position": "absolute", "z-index": 1 });
var left = 0;
obj.children().each(function () {
$(this).css({ "left": left + "px", "top": 0 });
left += $(this).outerWidth(true);
});
}

//滚动条的滚动方法
function scrollChange(dir) {
if (dir == "left" || dir == "up") {
obj[scrollEvent](0);
scrollChange = function () {
scrollSize++;
if (scrollSize >= liTotalSize) scrollSize = 0;
obj[scrollEvent](scrollSize);
}
}
else if (dir == "right" || dir == "down") {
scrollSizeMax = liTotalSizeOther - objSize;
obj[scrollEvent](scrollSizeMax);
scrollSize = scrollSizeMax;
scrollSizeMin = scrollSizeMax - liTotalSize;
scrollChange = function () {
scrollSize--;
if (scrollSize <= scrollSizeMin) scrollSize = scrollSizeMax;
obj[scrollEvent](scrollSize);
}
}
};
scrollChange(opt.dir);
interval = setInterval(scrollChange, opt.delay);
obj.children().on("mouseover", function () {
clearInterval(interval);
}).on("mouseleave", function () {
interval = setInterval(scrollChange, opt.delay);
});
}
})(jQuery);

插件的调用:

复制代码 代码如下:

$(function () {
$("#guoul1").gysContentDisplay({ dir: "right" });
$("#guoul2").gysContentDisplay({ dir: "left" });
$("#guoul3").gysContentDisplay({ dir: "up" });
$("#guoul4").gysContentDisplay({ dir: "down" });
$("#guoul5").gysContentDisplay({ dir: "right" });
$("#guoul6").gysContentDisplay({ dir: "none" });
})

时间： 2025-01-19 19:10:03

自己使用jquery写的一个无缝滚动的插件_jquery的相关文章

jQuery实现的一个自定义Placeholder属性插件_jquery

HTML5中文本框的新属性placeholder是个非常好用的属性,但是IE系列直至IE9都不支持这一属性,这就让大家在用这一属性的时候有些犹豫不决.自己曾经写过很多类似共的小控件,但是都不是很通用,这里分享一个渐进增强的自定义placeholder的jQuery插件.有点是使用简单,大家也可以根据自己的需要进行改进.平常写jQuery插件比较少,考虑到用jQuery的同学比较多,这里就用jQuery插件的形式编写了. 在这里简单的介绍一下实现思路. 1.表现与html5原生的placehold

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 <!DOCTYPE html> <html> <head lang="en"> <meta chars

用jquery写的一个万年历

 万年历,想必大家对它都不陌生吧,下面是使用jquery写的一个万年历示例,喜欢的朋友可以参考下 代码如下: <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>  <head>  <meta http-equiv=Content-Type content="text/html;charset=utf-8">  <style>  .main{  width:600px

自己用jQuery写了一个图片的马赛克消失效果

 这篇文章主要介绍的是自己用jQuery写了一个图片的马赛克消失效果实现过程,需要的朋友可以参考下 其中的一个效果:   html代码: 代码如下: <h1>单击图片,产生效果</h1> <div class="box"></div> 插件代码: 代码如下: ; (function ($) { var defaults = { ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小 de

jQuery模拟Marquee实现无缝滚动效果完整实例_jquery

本文实例讲述了jQuery模拟Marquee实现无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>模拟Marquee无缝滚动</title> <style type="text/css"> /* CSS Document reset */ html, body, di

jquery实现简单的无缝滚动_jquery

jquery实现简单的无缝滚动 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> </

jQuery实现图片文字无缝滚动效果

你知道 jQuery,你也知道图片滚动的效果,但是你知道啥叫无缝滚动不?无缝滚动,就是无缝的滚动!换句话说,无缝滚动就是,图片或者文字下一张下一张地滚动,当滚动到屁股的时候就看到头了,反过来,当滚动到头的时候又能看到屁股了.还是看 DEMO 吧,或许更好理解一些.如你所见,当作为一排图片展示的时候,无缝滚动可以让人有无尽的感觉,页面一下子就充实了. 因为我也不是刻意去写这个 jQuery 的无缝滚动,所以 JS 也没封装过,只提供了几个基本的参数作修改,只能仅作参考.  代码如下 复制代码 <!

基于jQuery的图片左右无缝滚动插件_jquery

在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/打包下载:http://www.jb51.net/jiaoben/44973.html核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "slidelf":function(value){ value = $.extend({ "prev":"", "next":""

jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效_jquery

支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide,非常漂亮的图片轮播特效插件,支持左右轮播图片.上下轮播图片.自适应移动端显示,支持众多的参数配置:orientation :'horizontal'(水平切换),speed : 500(切换速度,单位毫秒),easing : 'ease-in-out'(动画效果), minItems : 3(默认展示的数量)等,浏览器兼容方面:IE8+.以及较现代浏览器,不介意低版本浏览器的可以使用,当然也可以使用到移动端触屏. 支持响