jQuery实现滚动效果

 更新时间:2017年11月17日 14:26:56   作者:Dear_Mr  
这篇文章主要为大家详细介绍了jQuery实现滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

1. 图片轮播:

原理如下:

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

具体实现:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="./style.css" rel="external nofollow" >
</head>
<body>
 <div class="carousel">
 <div class="Con">
 <!-- 轮播(carousel)项目 -->
  <div class="scroll">
  <img src="./pic/1.jpg">
  <img src="./pic/2.jpg">
  <img src="./pic/3.jpg">
  <img src="./pic/4.jpg">
  <img src="./pic/5.jpg">
  <img src="./pic/6.jpg">
  <img src="./pic/7.jpg">  
  </div>

  <!-- 轮播(carousel)指标 -->
  <div class="But">
  <span class="active"></span> <!-- 0 * img.width -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </div> 
 </div>

 <!-- 轮播(carousel)导航 -->
 <a href="javascript:void(0)" class="prev" data-slide="prev"> << </a>
 <a href="javascript:void(0)" class="next" data-slide="next"> >> </a>
 </div>
</body>
</html>

$(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元素中

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <style type="text/css">
 .ul-list li {
 text-decoration: none;
 list-style: none;
 }
 </style>
</head>
<body>
 <ul class="ul-list">
 <li><a href="#">本地数据正反查询的实现例子</a></li>
 <li><a href="#">A-star寻路算法</a></li>
 <li><a href="#">node.js的querystring.stringify的使用</a></li>
 <li><a href="#">利用事件委托写一个简易扫雷游戏</a></li>
 <li><a href="#">懒加载(延迟加载)</a></li>
 <li><a href="#">JS中XML的解析</a></li>
 </ul>
 <script type="text/javascript">
 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);
 </script>
</body>
</html>

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

相关文章

  • 喜大普奔!jQuery发布 3.0 最终版

    喜大普奔!jQuery发布 3.0 最终版

    jQuery发布已经十年了,挺让人难以置信。过去的这些年Web开发变了很多,jQuery也随之变化着。在这个过程中,团队一直在对确保过往代码的兼容支持和获取最好的Web开发实践的现实之间努力着。就在2天前,jQuery发布了新的3.0最终版本
    2016-06-06
  • jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

    jQuery访问浏览器本地存储cookie、localStorage和sessionStorage

    cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同,今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法,需要的朋友参考下吧
    2017-10-10
  • jQuery中append()方法用法实例

    jQuery中append()方法用法实例

    这篇文章主要介绍了jQuery中append()方法用法,实例分析了append()方法的功能、定义及在匹配元素的结尾插入指定内容的使用技巧,需要的朋友可以参考下
    2015-01-01
  • Jquery submit()无法提交问题

    Jquery submit()无法提交问题

    代码点击注册按钮时无法提交表单,名称冲突可能会导致混乱的失败,接下来为大家介绍下解决方法,感兴趣的朋友可以了解下
    2013-04-04
  • jquery 圆角遮罩图片实现图片圆角

    jquery 圆角遮罩图片实现图片圆角

    用jquery实现的图片圆角效果代码。
    2009-05-05
  • 详解jQuery-each()方法

    详解jQuery-each()方法

    这篇文章主要介绍了jQuery-each()方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • jQuery中fadein与fadeout方法用法示例

    jQuery中fadein与fadeout方法用法示例

    这篇文章主要介绍了jQuery中fadein与fadeout方法用法,结合实例形式分析了jQuery使用fadein与fadeout方法实现页面元素淡入淡出效果的相关技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery中对节点进行操作的相关介绍

    jQuery中对节点进行操作的相关介绍

    本篇文章小编将为大家介绍,在jQuery中对节点进行操作的解决办法,有需要的朋友可以参考一下
    2013-04-04
  • jQuery验证Checkbox是否选中的代码 推荐

    jQuery验证Checkbox是否选中的代码 推荐

    jQuery验证Checkbox是否选中的代码,需要的朋友可以参考下。建议大家看下脚本之家的相关文章。
    2011-09-09
  • jQuery中replaceWith()方法用法实例

    jQuery中replaceWith()方法用法实例

    这篇文章主要介绍了jQuery中replaceWith()方法用法,以实例形式分析了replaceWith()方法用于匹配元素替换的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12

最新评论