跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

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元素中 基于jQuery的AJAX和JSON的实例 中文WORD版 本文档主要讲述的是基于jQuery的AJAX和JSON的实例;过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。有需要的朋友可以下载看看 下载
  • 本地数据正反查询的实现例子
  • A-star寻路算法
  • node.js的querystring.stringify的使用
  • 利用事件委托写一个简易扫雷游戏
  • 懒加载(延迟加载)
  • JS中XML的解析
相关推荐: jquery中$.fn和图片滚动效果实现方法 JS实现scroll自定义滚动效果 jQuery实现广告条滚动效果实例分享

相关文章