js--实现轮播图

最新推荐文章于 2022-11-04 23:24:24 发布

等待戈多的莱昂纳多

最新推荐文章于 2022-11-04 23:24:24 发布

阅读量284

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础。文章标签： js轮播

本文链接：https://blog.youkuaiyun.com/weixin_44892520/article/details/99698314

前端基础。专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了使用JavaScript实现轮播图的各种方法，包括无缝滚动、三维效果、淡入淡出以及横向滚动。无缝滚动通过在末尾添加复制的图片实现；三维轮播利用z-index和位置替换创造立体感；淡入淡出则通过调整图片的opacity和z-index完成。同时，文章中还提及了在实现过程中遇到的难点，如圈圈动画和鼠标悬停时的交互设计，以及如何处理图片的切换动画和延迟时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.无缝滚动

这个关键点就在于，当可视区的图片轮播到最左边时，设置它左边的滑动距离if(view.scrollLeft<=0){ view.scrollLeft=1000; }在需要轮播的所有图片后，再加一个与之相同的容器，内容也相同，可视区图片数为3，则新加的容器里图片数需>=3

在这里插入图片描述
精髓所在：

          time=setInterval(function () {
           view.scrollLeft-=speed;
           if(view.scrollLeft<=0){
               view.scrollLeft=1000;
           }

2.三维轮播

就是zindex替换，样式（left,top）替换
在这里插入图片描述
精髓所在：

                lists[i].style.left = lists[i + 1].style.left;
                lists[i].style.top = lists[i + 1].style.top;
                lists[i].style.zIndex = lists[i + 1].style.zIndex;

3.淡入淡出

就是透明度opacity更换，还有zindex替换
在这里插入图片描述
中午写到快结束了，结果加上圈圈又出问题了…想哭
淡入淡出轮播图：①写界面很简单。首先给一个大的div,需要轮播的图片再用div包着就行。②图片已经排列好了，最后一张图最后加载，所以在最上面，先要调图层，把图片的图层按1,2，3,4，…调好，如何实现呢？function changeZindex() { for(var i=0;i<imglist.length;i++){ imglist[i].style.zIndex=imglist.length-i-1;//层按5,4,3,2,1,0 } }③层按for循环遍历完，然后zindex已经按顺序加上，写每一层的动画④计时器动态修改zindex的值，具体？？？zindex为6，让其透明，让最高层透明，zindex为5，即最高层-1，倒数第二张透明度为1。。。透明度切换，index跟着变化，确保图片跟随变化。⑤写圈圈动画，就是循环，进入当前的这个加上颜色的class,改类名。一般最后面写上window.onload⑥给圈圈加载事件，这个有点复杂…………鼠标进入当前点变色，拿到索引，添加addcolor方法就行。那得先给index赋值index=this.index;点对应图片？？？？怎么搞？？？难点！！！！！！！！！当前索引，减去之前索引，差值就是转的次数。count为负？该怎么转？？？这个有透明度，所以不用考虑，不管它正着反着肉眼看到的是没区别的，但是动画延迟时间就得改了。

4.横向滚动

margin-left是关键
在这里插入图片描述
首先：①写界面，div可视区，ul>li 里面放img,ul的宽度为图片宽度总和。布局ok.②初始动画,ul加载动画，ul进行移动ullist.style.marginLeft="-500px"并且transition: margin-left .5s linear;③动态修改margin-left:var count=0; function animate(){ setInterval(function () { count++ ullist.style.marginLeft=(-500*count)+"px"
④添加点变色的类

function addColor() {
       for(var i=0;i<dian.length;i++){
           if(i==index){
               dian[i].className="bgcolor";
           }else{
               dian[i].className="";
           }
       }
   }

⑤鼠标进入当前点变色，切对应的图（…点怎么对应图片？就是执行之前计时器里写的图片切换动画方法）

for(var i=0;i<dian.length;i++){
            dian[i].index=i;
            dian[i].onmouseenter=function () {
                index=this.index;
                count=this.index;
                normalGo();
                addColor();
            }
        }