实现基于jQuery的图片/文字无缝滚动

  • 时间:
  • 浏览:0
  • 来源:5分11选5娱乐平台-5分11选5下注平台_5分11选5注册平台
作者:匿名 hihi 来源:Life Studio 浏览: 2012-2-29 9:55:15 字号:大 中 小

[摘要]你知道jQuery,你也知道图片滚动的效果,但你不在知道啥什么叫无缝滚动吗?无缝滚动,只是我我图片可能性文字下一张下一张地滚动到最后一张的后后不让停止结束,只是我我循环又从第一张结束了,缝滚动都可不可不还可以你会否是尽的感觉,页面一下子就充实了。

    你知道jQuery,你也知道图片滚动的效果,但你不在知道啥叫无缝滚动不?无缝滚动,只是我我无缝的滚动!换句话说,无缝滚动只是我我,图片可能性文字下一张下一张地滚动,当滚动到屁股的后后就都看头了,反过来,当滚动到头的后后又能都看屁股了。还是看 DEMO 吧,或许更好理解并且 。如你所见,当作为一排图片展示的后后,无缝滚动都可不可不还可以你会否是尽的感觉,页面一下子就充实了。

    可能性我也都不 刻意去写并且 jQuery 的无缝滚动,只是我我 JS 也没封装过,只提供了几只基本的参数作修改,没办法仅作参考。

HTML 次责:

<div class="scroll_area">

<div class="scroll_list">

<ul class="scroll_ul">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

</ul>

</div>

<a id="prev" class="btn_icon" href="javascript:;">上另一个多多多</a>

<a id="next" class="btn_icon" href="javascript:;">下另一个多多多</a>

</div>

jQuery次责:

$(function() {

//配置变量

var config = {

showNum : 3, //设置滚动的显示个数

autoScroll : false, //否是是自动滚动,默认为 false

autoScrollInterval : 60 0 //自动滚动间隔,默认为 60 0 毫秒,autoScroll = true 时才有效

}

var scrollUlWidth = $('.scroll_ul li').outerWidth(true), //单个 li 的深层



scrollUlLeft = 0, //.scroll_ul 初使化时的 left 值为 0

prevAllow = true, //为了补救连续点击上一页按钮

nextAllow = true; //为了补救连续点击下一页按钮

//计算父容量限宽



$('.scroll_list').width(config.showNum * scrollUlWidth);

//点击上一页



$('#prev').click(function() {

if (prevAllow) {

prevAllow = false;

scrollUlLeft = scrollUlLeft - scrollUlWidth;

$('.scroll_ul').css('left', scrollUlLeft);

//一键复制最后另一个多多多 li 并插入到 ul 的最前面

$('.scroll_ul li:last').clone().prependTo('.scroll_ul');

//删除最后另一个多多多 li

$('.scroll_ul li:last').remove();

$('.scroll_ul').animate({

left : scrollUlLeft + scrollUlWidth

}, 60 , function() {

scrollUlLeft = parseInt($('.scroll_ul').css('left'), 10);

prevAllow = true;

})

}

});

//点击下一页



$('#next').click(function() {

if (nextAllow) {

nextAllow = false;

$('.scroll_ul').animate({

left : scrollUlLeft - scrollUlWidth

}, 60 , function() {

scrollUlLeft = parseInt($('.scroll_ul').css('left'), 10);

scrollUlLeft = scrollUlLeft + scrollUlWidth;

$('.scroll_ul').css('left', scrollUlLeft);

//一键复制第另一个多多多 li 并插入到 ul 的最上端

$('.scroll_ul li:first').clone().appendTo('.scroll_ul');

//删除第另一个多多多 li

$('.scroll_ul li:first').remove();

nextAllow = true;

})

}

});

//自动滚动



if (config.autoScroll) {

setInterval(function() {

$('#next').trigger('click');

}, config.autoScrollInterval)

}

})

    基本原理和使用土办法都写在注释里了,我也就不让 作解释了。最后说一句,google、百度上搜一下就知道,可能性有大把大把写好的横的竖的无缝的滚动,总有一款适合你,并且我觉得 ,没办法另一方亲自写的才最适合另一方的需要,只是我我都不 了以上代码。

文章转自:http://wange.im/marquee-scroll.html

sssss
Tags: jQuery   jQuery插件  
责任编辑:qjt198895