jQuery实现滚动效果


Posted in jQuery onNovember 17, 2017

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

1. 图片轮播:

原理如下:

jQuery实现滚动效果

假设有三张图片,三张图片实际上都是存在于页面上的,但是由于设置的可视部分的大小(这里主要考虑宽度)是小于等于一张图片的大小的,想要看到其他图片的话,最直接的想法就是将需要显示的图片放在可视区域,也就是说需要改变的是整个图片区域的偏移值(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 相关文章推荐
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
You might like
source.php查看源文件
2006/12/09 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
python进程与线程小结实例分析
2018/11/11 PHP
phpwind放自动注册方法
2006/12/02 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JS求平均值的小例子
2013/11/29 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
python中的列表与元组的使用
2019/08/08 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
从python读取sql的实例方法
2020/07/21 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
二年级小学生评语
2014/04/21 职场文书
办理信用卡工作证明
2014/09/30 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python