AJAX实现信息滚动显示效果,jQuery实现滚动效果

本文实例为大家分享了jQuery实现滚动效果展示的具体代码，供大家参考，具体内容如下

1. 图片轮播：

原理如下：

假设有三张图片，三张图片实际上都是存在于页面上的，但是由于设置的可视部分的大小(这里主要考虑宽度)是小于等于一张图片的大小的，想要看到其他图片的话，最直接的想法就是将需要显示的图片放在可视区域，也就是说需要改变的是整个图片区域的偏移值(left/right)

具体实现：

<<

>>

$(function() {

var _index = 0;

var time = 0;

$(".But span").click(function() {

_index = $(this).index();

play(_index);

});

function play(index) {

$(".But span").eq(index).addClass('active').siblings('span').removeClass('active');

$('.scroll').animate({left: -(_index*1024)}, 500);

}

function autoPlay() {

time = setInterval(function() {

_index++;

if(_index > 6) {

$('.scroll').css("left", 0);

_index = 0;

}

play(_index);

}, 3000);

}

autoPlay();

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

if(_index <= 0) {

return;

}

clearInterval(time);

play(--_index);

autoPlay();

});

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

if(_index >= 6) {

return;

}

clearInterval(time);

play(++_index);

autoPlay();

});

});

2. 上下滚动

这里以文字滚动为示例：就是利用定时器，在一定的时间间隔后不断的将ul中的最后一个li元素插入到ul的第一个li元素中

.ul-list li {

text-decoration: none;

list-style: none;

}

• 本地数据正反查询的实现例子
• A-star寻路算法
• node.js的querystring.stringify的使用
• 利用事件委托写一个简易扫雷游戏
• 懒加载(延迟加载)
• JS中XML的解析

setInterval(function() {

$('.ul-list li:last').css({'height':'0px', 'opacity':"0"}).insertBefore(".ul-list li:first").animate({'height':'25px', 'opacity': '1'}, 'slow', function() {

$(this).removeAttr('style');

})

}, 3000);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。