js无缝轮播效果实现，自动轮播

本是古典何须时尚 2022-04-06 06:13 403阅读 0赞

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。

##### 1、html结构布局： #####

<div id="wrap">
        <ul class="pic">
            <li>
                <img src="images/1.png">
            </li>
            <li>
                <img src="images/2.png">
            </li>
            <li>
                <img src="images/3.png">
            </li>
            <li>
                <img src="images/4.png">
            </li>
            <li>
                <img src="images/5.png">
            </li>
            <li>
                <img src="images/1.png">
            </li>
        </ul>
        <ul class="tab">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="prev"> < </div>
        <div class="next"> > </div>
    </div>

##### 2、css布局样式： #####

<style>
        * {
        
            margin: 0;
            padding: 0;
        }
    
        li {
        
            list-style: none;
        }
    
        img {
        
            vertical-align: top;
            width: 640px;
            height: 360px;
        }
    
        #wrap {
        
            position: relative;
            width: 640px;
            height: 360px;
            margin: 50px auto;
            overflow: hidden;
        }
    
        #wrap .pic {
        
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 1000%;
        }
    
        .pic li {
        
            float: left;
        }
    
    
        .tab {
        
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -100px;
            width: 150px;
            height: 30px;
            padding-left: 10px;
            background: rgba(0, 0, 0, .2);
            border-radius: 15px;
            transition: .5s;
            transform: scale(.8);
        }
    
        .tab:hover {
        
            background: rgba(0, 0, 0, .5);
            transform: scale(1.2);
        }
    
        .tab li {
        
            width: 20px;
            height: 20px;
            float: left;
            background: #fff;
            border-radius: 50%;
            margin: 5px 10px 0 0;
            opacity: .35;
            cursor: pointer;
        }
    
        .tab li.on {
        
            position: absolute;
            top:0;
            background: #f60;
            opacity: 1;
            z-index: 99;
        }
    
        #wrap>div {
        
            position: absolute;
            top: 50%;
            margin-top: -30px;
            width: 30px;
            height: 60px;
            background: rgba(0, 0, 0, .2);
            text-align: center;
            font-size: 18px;
            line-height: 60px;
            color: #fff;
            cursor: pointer;
        }
    
        #wrap>div:hover {
        
            background: rgba(0, 0, 0, .5);
        }
    
        .next {
        
            right: 0;
        }
    </style>

##### 3、js行为实现： #####

<script>
         const oWrap = document.getElementById("wrap"),
               oNext = document.getElementsByClassName("next")[0],
               oPrev = document.getElementsByClassName("prev")[0],
               oPic = document.getElementsByClassName("pic")[0],
               aPicLi = document.querySelectorAll(".pic li"),
               aTabLi = document.querySelectorAll(".tab li"),
               aTabLiOn = document.querySelectorAll(".tab .on")[0],
               imgW = 640;
         let date = new Date(),
             index = 0,
             timer = null;
         //右边按钮
         oNext.onclick = () =>{
        //点击一次向左边移动index增加值乘以图片宽度
             if(new Date() - date < 800) return;//两次点击间隔小于800,就不动
             date = new Date();
             index++;
             if(index === aPicLi.length-1){
        
                 Move(oPic,{
        left:-index*imgW},500,()=>{
        //最后一张图片,也就是跟第一张图片一模一样的那一个在往左边走动完的瞬间通过回调函数,让oPic回去,也就是真正的第一张图片出来
                     oPic.style.left = 0;
                     index = 0;//回到第一个的下标
                 });
                 Move(aTabLiOn,{
        opacity:0},250,()=>{
        //在最后一个上面通过透明消失,在回调函数里面让他在第一个上面出现
                     aTabLiOn.style.left = "10px";//瞬间回去
                     Move(aTabLiOn,{
        opacity:1},250);//同时opacity变为1出现
                 })
             } else {
        
                 Move(oPic,{
        left:-index*imgW},500);//每点击一次向左走一个图片的位置
                 Move(aTabLiOn,{
        left:index*30+10},500);//每点击一次改变小球的位置
             }
         }
         //左边按钮
         oPrev.onclick = () =>{
        //点击一次向左边移动index增加值乘以图片宽度
             if(new Date() - date < 800) return;//两次点击间隔小于800,就不动
             date = new Date();
             if(index === 0){
        //一上来就对第一个做判断
                 oPic.style.left = -(aPicLi.length-1)*imgW + 'px';
                 index = aPicLi.length - 1;//把倒数第二张图片,也是就是最后以上的图片取出来,在通过index--获取这个图片的下标
                 Move(aTabLiOn,{
        opacity:0},250,()=>{
        //在最前面一个上面通过透明消失,在回调函数里面让他在最后一个上面出现
                     aTabLiOn.style.left = (aTabLi.length - 2)*30 + 10+'px';//瞬间到最后面去,一共有6个球,但是和前面的距离只有四个球
                     Move(aTabLiOn,{
        opacity:1},250);//同时opacity变为1出现
                 })
             }
             index--;
             if(index !== aTabLi.length - 2){
        
                 Move(aTabLiOn,{
        left:index*30+10},500);//每点击一次改变小球的位置
             }
             Move(oPic,{
        left:-index*imgW},500);
         }
         //按钮循环
         timer = setInterval(oNext.onclick,500);
         for(let i=0;i<aTabLi.length;i++){
        //一开始第一个和第二个是重合的,所以这个长度是不能变的
             aTabLi[i].onclick = () => {
        
                 if(i===0) return;//如果点击到下标为1的那个,也就是黄色球的,我们就不执行
                 Move(oPic,{
        left:-(i-1)*imgW},500);//图片运动,这里的i是从黄色小球那一个,也就是第一个开始的,所以我们这里要减一
                 let num = Math.abs(index - i + 1);//黄色的小球是和第二个li重合的,我们点击的第二个其实是第三个,中间有一个间隔
                 if(num>1){
        
                     Move(aTabLiOn,{
        opacity:0},250,()=>{
        
                     aTabLiOn.style.left = (i-1)*30 + 10 + 'px';
                     Move(aTabLiOn,{
        opacity:1},250);
                     })
                 } else {
        
                     Move(aTabLiOn,{
        left:(i-1)*30+10},500);
                 }
                 index = i-1;//上面190行加了1,所以这里需要减一下
             }
         }
         oWrap.onmouseenter = ()=>{
        
             clearInterval(timer);
         }
         oWrap.onmouseleave = ()=>{
        
             timer = setInterval(oNext.onclick,500);
         }
    
    	//运动时间
    	(function(){
        
    	//requestAnimationFrame兼容写法
    	var requestAnimationFrame = window.requestAnimationFrame || function(unSpeed){
        return setTimeout(unSpeed,1000/60);}
    	function Move(obj,json,time,callback){
        //json包括了属性名,和值
    		//获取初始值
    		var objCss = obj.currentStyle || getComputedStyle(obj);//获取属性
    		var startAttr = {
        };//存储各个属性值
    		var S = {
        }; //各个变化值parseFloat能获取小数,去除单位值
    		for(var key in json){
        
    			startAttr[key] = parseFloat(objCss[key]) || 0;//存储对应属性的初始值
    			S[key] = json[key] - startAttr[key];//计算各个属性需要的变化量
    			if(!S[key]){
        //S[key]为0的时候,是假,取反为真
    				delete S[key];
    				delete json[key];
    			}
    		}
    		//获取初始时间
    		var startTime = new Date();
    		//动画函数
    		function unSpeed(){
        
    			var proTime =  (new Date() - startTime) / time;
    			proTime >= 1 ? proTime = 1 :  requestAnimationFrame(unSpeed);
    			for(var key in json){
        
    				if(key.toLowerCase()==="opacity"){
        //判断有没有opacity属性
    					var val = S[key]*proTime + startAttr[key];
    					obj.style[key] = val;
    					obj.style.filter = "alpha(opacity="+val*100+")";//IE兼容opacity的写法
    				} else {
        
    					obj.style[key] = S[key]*proTime + startAttr[key] + 'px';
    				}
    			}
    			if(proTime===1){
        
    				callback && callback.call(obj);
    			}
    		}
    		requestAnimationFrame(unSpeed);
    	}
    	window.Move = Move;
    	})();
    </script>

##### 3、实现效果： #####

![在这里插入图片描述][20181208171130541.gif]

[20181208171130541.gif]: /images/20220406/7b00654f0bd9422e9c9beac3a778294b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，403人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现无缝轮播图

需要引用上文封装的动画库代码如下： CSS样式 { margin: 0; padding: 0;

一时失言乱红尘/ 2023年06月25日 10:08/ 0 赞/ 26 阅读

相关原生JS实现无缝轮播

今天分享前端开发学习中的一个很经典的案例——原生JS实现无缝轮播图。需求： 1.鼠标移入轮播图时左右两边显示上一页下一页按钮，移出时隐藏 2.鼠标点击箭头，图片发生轮播

客官°小女子只卖身不卖艺/ 2023年06月24日 05:24/ 0 赞/ 24 阅读

相关 js无缝轮播图(手动轮播+自动轮播+定时器+过渡动画)

为了方便大家使用，我把Html，CSS，以及js 和用到图片都放在下面了。\\ > 特此说明：这个无缝轮播的代码是可以直接复制粘贴使用，嘻嘻！ 1.先新建一个文件，随意命名

喜欢ヅ旅行/ 2022年11月25日 10:20/ 0 赞/ 473 阅读

相关无缝轮播/自动轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

爱被打了一巴掌/ 2022年10月27日 00:30/ 0 赞/ 335 阅读

相关左右无缝轮播html,JS实现左右无缝轮播图代码

废话不多说了，直接给大家贴代码了。无缝轮播图：无缝轮播图 \\{margin: 0;padding:0; \} ul\{list-style: none;\} .

痛定思痛。/ 2022年10月10日 02:09/ 0 赞/ 391 阅读

相关无缝轮播滚动html模板,js轮播图无缝滚动效果

在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：先文字说明一下：如果要展示5张图，分别为1,2,3,4,5 那么在代码的引入中是这样的：1

缺乏、安全感/ 2022年10月06日 10:53/ 0 赞/ 276 阅读

相关简单的html5实现自动轮播,原生JS实现简单的无缝自动轮播效果

最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以，有些底层的东西自己不懂，到头来也只是一昧的使用，一直在用别人的东西，对自己的成长帮助也不大。万

曾经终败给现在/ 2022年10月06日 03:56/ 0 赞/ 214 阅读

相关原生 js 实现无缝滚动轮播

上一次我们看了如何实现简单的轮播图，以及各种常用的效果实现；这一次，我们看看无缝滚动轮播图的实现（利用左边的margin 来实现）；原理：我们创建一个div，下图共

Love The Way You Lie/ 2022年05月28日 11:00/ 0 赞/ 328 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 404 阅读

相关 JS实现自动轮播图效果

现在很多网站都有轮播图，这篇文章主要为大家详细介绍了js实现轮播图的完整代码及原理，需要的小伙伴可以参考一下。轮播图主要功能： 1、图片自动轮播（主图切换同时下面导

逃离我推掉我的手/ 2022年01月27日 09:34/ 0 赞/ 780 阅读