实现简单的轮播图

EsgynChina 发布于2019-08-22 10:39 / 1952人阅读

摘要：小练习轮播图组件任务描述在和上一任务同一目录下面创建一个文件，在目录中创建，并在其中编码，实现一个轮播图的功能。实现思路考察对节点，定时器，事件的处理。

小练习3：轮播图组件

任务描述
在和上一任务同一目录下面创建一个task0002_3.html文件，在js目录中创建task0002_3.js，并在其中编码，实现一个轮播图的功能。

图片数量及URL均在HTML中写好

可以配置轮播的顺序（正序、逆序）、是否循环、间隔时长

图片切换的动画要流畅

在轮播图下方自动生成对应图片的小点，点击小点，轮播图自动动画切换到对应的图片

效果示例：http://echarts.baidu.com/ 上面的轮播图（不需要做左右两个箭头）

实现原理：控制图片的left值，把不需要的图片进行hidden。

实现思路

考察对dom节点，定时器，事件的处理。

JS部分

第一步实现点击切换

获取left //记得转换成数字，向左移动减600，向右移动加600

封装animate 函数

/*
*进行轮播
*/
function animate(offset){
    var newleft = parseInt(list.style.left) + offset;
    list.style.left = newleft + "px";
}

next.onclick = function(){
    animate(-600);
}
prev.onclick = function(){
    animate(600);
}

第二步实现无限轮播

实现：在第一张图和最后一张图都加上一张轮播的附属图片

进行判断，当移动到附属图时，把list-style-left的值改为原图，进行跳转

改变小圆点位置

实现：设置一个index，每次移动时改变 index的值，把属性设置为“on”

如果大于5，则跳转到1，如果小于1，则跳转到5；

在原有代码上添加

    
    function animate(offset){
    var newleft = parseInt(list.style.left) + offset;
    list.style.left = newleft + "px";
    if(newleft > -600){
        list.style.left = -3000+ "px";
    }
    else if(newleft < -3000){
        list.style.left = -600 + "px";
    }
}
next.onclick = function(){
    if(index==5){
        index = 1;
    }
    else{
        index+=1;
        
    }
    showButton();
    animate(-600);
}
prev.onclick = function(){
    if(index==1){
        index = 5;
    }
    else{
        index-=1;
    }
    showButton();
    animate(600);
}

第三步点击小圆点切换

获取自定义的index属性 //getAttribute

算出偏移量 //offset=-600*（目标位置的Index - 当前的Index）

/*
*显示小圆点
*/
function showButton(){
    for(var i = 0; i
第四步自动转换

相对应每隔一段时间去执行next.onclick

鼠标移动到图片上是触发。


/*
*进行自动播放
*/
function play(){
    timer = setInterval(function(){
        next.onclick();
    },3000);
}
/*
*停止自动播放
*/
function stop(){
    clearInterval(timer);
}
container.onmouseover = play;
            
container.onmouseout = stop;

简单的轮播图就完成了
附上完整代码



    
    Document
    
    


    
        
            
            
            
            
            
            
            
        
        
            
            
            
            
            
        
        < 
        >

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91005.html

小白成长日记：一步一步写个轮播图插件

摘要：并不是所有人写的代码或者插件都适合小白使用，比如这是一个的滚动插件，大多数人使用了之后发现滚动不了，去作者提，其实是他们并不懂滚动的原理。最近在这里看了一篇关于面试的文章《回顾自己三次失败的面试经历》，作者三次倒在了轮播图上。囧，所以我也写个轮播图看看。这次是用jQuery写的，因为最近一直在研究jQuery插件的写法，所以用jQuery写的，而且我发现，我vue用太多，完全不熟悉d...

notebin 2019-08-22 11:15 评论0 收藏0
用vue写一个仿简书的轮播图

摘要：写好样式，只需改变每张图片的即可实现轮播效果。可以将轮播图看成两个，如图所示写好每个的样式容器宽度容器高度大图片宽度小图片宽度小图片高度模板包含两个轮播图部分，设置一个，定时改变。原文地址：Bougie的博客先展示最终效果：showImg(https://segmentfault.com/img/remote/1460000019061753);Vue的理念是以数据驱动视图，所以拒...

Tecode 2019-08-30 14:08 评论0 收藏0
用vue写一个仿简书的轮播图

摘要：写好样式，只需改变每张图片的即可实现轮播效果。可以将轮播图看成两个，如图所示写好每个的样式容器宽度容器高度大图片宽度小图片宽度小图片高度模板包含两个轮播图部分，设置一个，定时改变。原文地址：Bougie的博客先展示最终效果：showImg(https://segmentfault.com/img/remote/1460000019061753);Vue的理念是以数据驱动视图，所以拒...

cartoon 2019-08-22 15:19 评论0 收藏0
用vue写一个仿简书的轮播图

摘要：写好样式，只需改变每张图片的即可实现轮播效果。可以将轮播图看成两个，如图所示写好每个的样式容器宽度容器高度大图片宽度小图片宽度小图片高度模板包含两个轮播图部分，设置一个，定时改变。原文地址：Bougie的博客先展示最终效果：showImg(https://segmentfault.com/img/remote/1460000019061753);Vue的理念是以数据驱动视图，所以拒...

tomlingtm 2019-08-01 18:41 评论0 收藏0
　用js实现点击切换和自动播放的轮播图示例

　　js实现点击切换和自动播放的轮播图，其实十分简单，话不多说，我们直接看示例：　　轮播图案例　　<!DOCTYPEhtml> 　　<html> 　　<head> 　　<metacharset="UTF-8"> 　　<metaname="vie...

3403771864 2022-10-24 21:47 评论0 收藏0