Js封装的动画函数实现轮播图
---恢复内容开始---
- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示
- 项目目录结构
- 用到的js封装的animate()动画
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 20);
}
animate.js
- 简单轮播图代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
} ul {
list-style: none
} img {
vertical-align: top
} .box {
width: 730px;
height: 454px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
} .inner {
width: 730px;
height: 454px;
background-color: pink;
overflow: hidden;
position: relative;
} .inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
} .inner li {
float: left;
} .square {
position: absolute;
right: 10px;
bottom: 10px;
} .square span {
display: inline-block;
width: 16px;
height: 16px;
background-color: #fff;
text-align: center;
line-height: 16px;
cursor: pointer;
} .square span.current {
background-color: orangered;
color: #fff;
} </style>
</head>
<body>
<div class="box" id="box">
<div class="inner"><!--相框-->
<ul>
<li><a href="#"><img src="data:images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/6.jpg" alt=""/></a></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</div> <script src="animate.js"type="text/javascript"></script>
<script>
/*我们需要操作:
当点击右下角按钮时对应的图片移动
1.需要获取ul的宽度
2.需要获取每个li的宽度
3.获取相框的宽度
4.获取右下角的span,并且为每个span注册鼠标移入和移除 */
//获取最外面的div
var oDiv=document.getElementById('box');
//获取inner由于inner没有用id所有我们用children的方式
var inner=oDiv.children[0];
//获取ul以及他的宽度
var oUl=inner.children[0];
//获取相框的宽度
var imgWidth=inner.offsetWidth;
var oLi=oUl.children;
//获取sapn
var oSpan=inner.children[1].children; /*为每个span注册鼠标进入的事件,并且鼠标进入时,对应的地方会显示高亮,这里用排他 排他功能:就是先将全部的属性移除,然后在某个上面加上特有的current属性
*/ for(var i=0;i<oSpan.length;i++){
//由于每循环一次i就会变,所以先保存下来
//循环的时候把索引值保存在每个span的自定义属性中
oSpan[i].setAttribute("index",i);
oSpan[i].onmouseover=function(){ for(var j=0;j<oSpan.length;j++){
//先去掉其他属性
oSpan[j].removeAttribute('class');
}
this.className="current"; //移动ul:不管是向左移动还是向右移动ul的left总负的,最大也只可能为0, //获取当前鼠标进入的span的索引
var index=this.getAttribute("index");
animate(oUl,-index*imgWidth); }
} </script>
</body>
</html>
简单轮播图.html
- 轮播图的基本实现(排他功能,用相框的宽度求出移动的距离)
思路理解:
当鼠标放到按钮上的时候,ul移出去的距离为=相框宽度*按钮的下标
根据上面接下来获取需要用到的元素对象:
//获取最外面的div
var oDiv=document.getElementById('box');
//获取inner由于inner没有用id所有我们用children的方式
var inner=oDiv.children[0];
//获取ul以及他的宽度
var oUl=inner.children[0];
//获取相框的宽度
var imgWidth=inner.offsetWidth;
var oLi=oUl.children;
//获取sapn
var oSpan=inner.children[1].children;
遍历每个li,并且做排他功能功能
for(var i=0;i<oSpan.length;i++){
//由于每循环一次i就会变,所以先保存下来
//循环的时候把索引值保存在每个span的自定义属性中,
oSpan[i].setAttribute("index",i);
oSpan[i].onmouseover=function(){ for(var j=0;j<oSpan.length;j++){
//先去掉其他属性
oSpan[j].removeAttribute('class');
}
this.className="current"; //移动ul:不管是向左移动还是向右移动ul的left总负的,最大也只可能为0, //获取当前鼠标进入的span的索引
var index=this.getAttribute("index");
animate(oUl,-index*imgWidth); }
}
---恢复内容结束---
Js封装的动画函数实现轮播图的更多相关文章
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- 原生js用div实现简单的轮播图
文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...
- 原生JavaScript(js)手把手教你写轮播图插件(banner)
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- 告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
- CSS3之动画模块实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
- 每天一个JS 小demo之韩雪冬轮播图。主要知识点:html,css布局,对于数组和对象的理解和运用
@charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
- Jquery基础(动画效果的轮播图特效)
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
随机推荐
- WhiteHat Contest 11 : re1-100
ELF文件,运行一下是要求输密码 die查了一下无壳 直接拖入ida 可以发现 这是它的判断函数 也就是说输入的总长度是42位第一个字符是123也就是0x7b 也就是'{'然后10位是"53 ...
- 洛谷P3389 【模板】高斯消元法
P3389 [模板]高斯消元法 题目背景 Gauss消元 题目描述 给定一个线性方程组,对其求解 输入输出格式 输入格式: 第一行,一个正整数 n 第二至 n+1行,每行 n+1 个整数,为a1,a ...
- Educational Codeforces Round 62 (Rated for Div. 2)
A. Detective Book 题意:一个人读书 给出每一章埋的坑在第几页可以填完 . 一个人一天如果不填完坑他就会一直看 问几天能把这本书看完 思路:模拟一下 取一下过程中最大的坑的页数 如 ...
- Codeforces1073E Segment Sum 【数位DP】
题目分析: 裸的数位DP,注意细节. #include<bits/stdc++.h> using namespace std; ; int k; ][],sz[][],cnt[][]; ] ...
- UOJ275 [清华集训2016] 组合数问题 【Lucas定理】【数位DP】
题目分析: 我记得很久以前有人跟我说NOIP2016的题目出了加强版在清华集训中,但这似乎是一道无关的题目? 由于$k$为素数,那么$lucas$定理就可以搬上台面了. 注意到$\binom{i}{j ...
- springMVC整理02--常用注解的使用
1.使用@RequestMapping 映射请求 1.1在类和方法上添加@RequestMappingSpringMVC 使用@RequestMapping 为控制器指定可以处理哪些 URL 请求. ...
- Matplotlib学习---用matplotlib画热图(heatmap)
这里利用Nathan Yau所著的<鲜活的数据:数据可视化指南>一书中的数据,学习画图. 数据地址:http://datasets.flowingdata.com/ppg2008.csv ...
- Django 静态文件相关设置
项目根目录创建 static 文件夹 settings.py 中加入 STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static") ...
- 华为TaiShan 2280 ARM 服务器
华为TaiShan 2280 ARM 服务器 华为TaiShan 2280 ARM 服务器 https://e.huawei.com/cn/products/cloud-computing-dc/s ...
- nginx 重定向 说明
一.nginx 两个操作系统的安装见以前的随笔(已安装请跳过) linux上搭建nginx windows上搭建nginx 二.Nginx重定向——直接到项目,而非nginx欢迎页 默认ngin修改n ...