get 轮播效果 his 基本实现 详细 bottom style 距离 简单的
平时中我习惯用jquery写轮播效果,实现过程不是很难,也很方便,为了加深对js面向对象的理解,我打算用面向对象实现一个简单的轮播,这里采用了字面量的方式实现。为了实现这个过程,我们要自己动手封装一个运动函数animate,在这里我采用的是匀速运动的方式,这种方式可能体验不是很好,后面分析js代码我在详细解释。废话不多说,先上代码。页面布局可以根据自己的习惯来。
html代码:
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <link rel="stylesheet" href="./CSS/slide .css">
- <script src="./js/slide.js"></script>
- </head>
- <body>
- <div class="slide">
- <ul class="img-box">
- <li>
- <img src="./img/1.jpg" >
- </li>
- <li>
- <img src="./img/2.jpg" >
- </li>
- <li>
- <img src="./img/3.jpg" >
- </li>
- <li>
- <img src="./img/4.jpg" >
- </li>
- <li>
- <img src="./img/5.jpg" >
- </li>
- <div class="clear"></div>
- </ul>
- <div class="icon">
- <span class="on"></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
- </div>
- </body>
- </html>
css代码:
- *{
- padding:0;
- margin: 0;
- list-style-type: none;
- text-decoration: none;
- }
- .clear{
- clear: both;
- }
- a:hover{
- text-decoration: none;
- }
- .slide{
- position: relative;
- width: 500px;
- height: 300px;
- margin:20px auto;
- overflow: hidden;
- }
- .slide .img-box{
- width: 10000px;
- position: absolute;
- left: 0;
- top: 0;
- }
- .slide .img-box li{
- float: left;
- width: 500px;
- height: 300px;
- }
- .slide .img-box li img{
- width:100%;
- height: 100%;
- }
- .icon{
- position: absolute;
- right:8%;
- bottom: 6%;
- }
- .icon span{
- display: block;
- float: left;
- width: 15px;
- height: 15px;
- border-radius: 50%;
- background: white;
- opacity: 0.7;
- margin-left: 5px;
- }
- .icon .on{
- background: orange;
- opacity: 0.7;
- }
js代码:
- window.onload = function() {
- function animate(ele, xTarget, time) {
- var xPos = ele.offsetLeft,
- //每次执行一次运动得到ele元素相对于父容器左边界偏移的距离。
- speed = 25; //匀速运动的速度
- if (Math.abs(xTarget - xPos) <= speed) { //接近目标位置时候进行矫正,因为移动的距离不一定是speed的整数倍,矫正后终止animate的执行。
- xPos = xTarget;
- ele.style.left = xPos + ‘px‘;
- return false;
- }
- xPos = xPos > xTarget ? xPos - speed: xPos + speed; //轮播方向向左或者向右时的处理
- if (ele.movement) { //保证每次只有一个定时器运行
- clearTimeout(ele.movement);
- }
- ele.style.left = xPos + ‘px‘;
- ele.movement = setTimeout(function() { //采用递归执行animate函数直到满足程序终止条件Math.abs(Xtarget - xPos)<=speed才停止。
- animate(ele, xTarget, time);
- },
- time);
- }
- function moveIndex(spanList, index) { //根据索引让右下方对应的索引加上名称为on的class,实现高亮。
- for (var i = 0,
- len = spanList.length; i < len; i++) {
- spanList[i].className = ‘‘;
- }
- spanList[index].className = ‘on‘;
- }
- function autoPlay(obj) { //自动轮播函数
- if (++obj.index >= obj.aSpan.length) {
- obj.index = 0;
- }
- moveIndex(obj.aSpan, obj.index);
- animate(obj.oUl, -obj.index * 500, 10);
- }
- var slide = { //将轮播的方法的实现封装在slide的对象中。
- init: function() { //初始化方法
- this.oUl = document.querySelector(‘.img - box‘);
- this.aSpan = document.querySelectorAll(‘.icon span‘);
- this.index = 0; //为轮播定义一个总索引
- this.timer = null; //页面加载自动轮播的定时器
- },
- play: function() { //通过选取右下角的小图标展示对应索引的图片。
- var that = this;
- for (var i = 0; i < this.aSpan.length; i++) { (function(j) {
- that.aSpan[j].onmouseover = function() {
- that.index = j;
- moveIndex(that.aSpan, that.index);
- animate(that.oUl, -that.index * 500, 10);
- }
- })(i)
- }
- },
- autoSlide: function() { //页面加载完即开始自动轮播
- var that = this;
- this.timer = setInterval(function() {
- autoPlay(that);
- },
- 3000);
- },
- hover: function() { //该方法主要为了实现箭头放在轮播区域停止自动轮播,移开继续自动轮播的功能。
- var that = this;
- var oSlide = document.querySelector(‘.slide‘);
- oSlide.onmouseover = function() {
- clearInterval(that.timer);
- }
- oSlide.onmouseout = function() {
- that.timer = setInterval(function() {
- autoPlay(that);
- },
- 3000);
- }
- }
- }
- //通过对象调用对象上的函数
- slide.init();
- slide.play();
- slide.autoSlide();
- slide.hover();
- }
1.animat函数
该函数有三个参数:
ele:要移动的目标元素,我这里是ul。
xTarget:目标位置,是指ele要移动到的目标位置。
time:指animate函数中的定时器的时间间隔,这里我用的是20ms。
animate函数中采用了递归,每次执行animate函数,ele都会相对于原来的位置移动speed的距离,speed我上面给定的是25,所以整个移动过程是一个匀速运动过程,但这样会有一个不好的体验,就是目前位置和目标位置距离过大时,整个滑动过程耗时较长,因为匀速嘛,距离越长耗时越多,所以这里还给出一种算法,
speed =Math.ceil(Math.abs(xTarget - xPos) / 10),这是速度逐渐递减的,由快到慢,距离越长,前面滑动的速度越快,这种体验会更好一些,这里我就不给出具体写法了。
2.moveIndex函数
这个函数应该很好理解,就是根据输入的index参数改变对应索引的元素class名称。
3.var that = this
这样的做的目的其实是用that变量保存调用对象中函数的那个对象本身,因为在后续的处理中,可能会用到对象slide的属性和方法,而在事件处理程序和定时器处理程序中this的指向又发生了改变,所以就率先用that变量保存好对象,以便需要的时候使用。
这样就基本实现了一个面向对象的简单轮播效果。
原生js面向对象实现简单轮播
get 轮播效果 his 基本实现 详细 bottom style 距离 简单的
原文:http://www.cnblogs.com/homeStrong/p/7901228.html
来源: http://www.bubuko.com/infodetail-2408563.html