JavaScript实现无缝轮播图效果

通过原生js实现无缝轮播效果。

思路：

1.利用html+css完成轮播图片，按钮，底部小点的整体效果的布局。

2.通过原生js完成图片轮播，无缝自动切换，底部小点随图片切换而切换。

步骤1：

建立无缝轮播的HTML的基本布局

html部分：

<div id="slider"><!-- 图片部分 --><ul class="slider-list"><!-- <li><a href="#"><img src="./img/5.jpg"></a></li> --><li><a href="#"><img src="./img/1.jpg"></a></li><li><a href="#"><img src="./img/2.jpg"></a></li><li><a href="#"><img src="./img/3.jpg"></a></li><li><a href="#"><img src="./img/4.jpg"></a></li><li><a href="#"><img src="./img/5.jpg"></a></li><li><a href="#"><img src="./img/1.jpg"></a></li></ul><!-- 小点部分 --><div class="dot-list"><span class="dot cur"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div><!--箭头布分 --><a href="#" class="arraw prev" id="left"><span></span></a><a href="#" class="arraw next" id="right"><span></span></a></div>

html代码中分为个部分：

1.图片部分。

2.小点部分，这里用的是span标签，也可以用其他标签，能实现小点效果就行。

3.箭头部分。

步骤2：

css部分

/* 主体部分 */
*{margin: 0;padding: 0;list-style: none;
}
img{width: 680px;height: 340px;
}
#slider{position: relative;width: 680px;height: 340px;margin: 100px auto;/* outline: 2px solid red; */overflow: hidden;
}
.slider-list{display: flex;position: relative;left: 0px;width: 100%;height: 100%;/* transform: translateX(-680px); */transition: all 1s;
}
.slider-list li{width: 680px;height: 340px;
}
/* 小点部分 */
.dot-list{position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);padding: 2px 10px;border-radius: 12px;background-color: rgba(255, 255, 255, .3);
}
.dot-list .dot{display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color: white;
}
.dot-list .dot.cur{background-color: red;
}
/*箭头部分  */
.arraw{position: absolute;top: 50%;transform: translateY(-50%);width: 30px;height: 60px;background-color: rgba(0, 0, 0, 0.795);display: none;
}
.prev{left: 0;
}
.next{right: 0;
}
.arraw span{position: absolute;top: 50%;left: 50%;transform: translate(50%,50%);width: 10px;height: 10px;border-bottom:2px solid white;border-left:2px solid white;
}
.prev span{transform: translate(-50%,-50%) rotate(45deg);
}
.next span{transform: translate(-50%,-50%) rotate(-135deg);
}
#slider:hover .arraw{display: block;
}

完成html+css代码后，效果图如下：

注意这里的效果图为了方便演示，取消了css代码中.arraw{ display: none;}。

步骤3：

通过原生js实现自动无缝轮播效果

js代码：

 var slid =document.getElementById('slider');var slidLis=slid.getElementsByTagName('ul')[0];// var slidLis=document.querySelector(".slider-list")var slidLi=slidLis.getElementsByTagName('li');var lef = document.getElementById('left');var righ = document.getElementById('right');var index = 0;function lun(){index++;circe();slidLis.style.left=index*-680 + "px";slidLis.style.transition="all 1s";if(index === 5){index= 0;setTimeout(function(){slidLis.style.left=0;slidLis.style.transition="none";},1000)}circe();}righ.addEventListener("click",lun);lef.addEventListener("click",function(){index--;if(index === -1){slidLis.style.left=5*-680 + "px";slidLis.style.transition="none";index = 4;setTimeout(function(){slidLis.style.left=index*-680 + "px";slidLis.style.transition="all 1s";},0);  }else{slidLis.style.left=index*-680 + "px";}circe();});
//  自动轮播
var autoplay = setInterval(lun,2000);
slid.addEventListener("mouseenter",function(){clearInterval(autoplay);
});
slid.addEventListener("mouseleave",function(){clearInterval;autoplay = setInterval(lun,2000);
})//小圆点var dotList = document.getElementsByTagName('span');
function circe(){for(var i = 0;i < dotList.length;i++){if(i === index){dotList[i].classList.add("cur");}else{dotList[i].classList.remove("cur"); }}
}

效果如下：

以上无缝轮播的难点主要是：当从最后一张图片切换到第一张图片，过渡效果的处理。

上面代码是通过在html代码上，在最后一张图片后在增加一张与第一张相同的图片（假的第一张图片），当轮播要从最后一张切换到第一张时，实则先过渡到我们设的假的第一张图片，然后在过渡结束后立刻切换真正的第一张。这里的我们需要设置一个setTimeout();时间为我们设置的过渡时间一样，因为我们需要等待过渡结束时，在设置transition:"none";。

JavaScript实现无缝轮播图效果相关推荐

纯css3实现无缝轮播图效果
主要就是利用css3中的动画了,看完整实现代码如下: <!DOCTYPE html> <html lang="en"> <head><me ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
HTML+CSS+JavaScript实现轮播图效果
前言先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果百度网盘:百度网盘请输入提取码提取码:slbt 没有添加动画效果,添加了自动切换 ...
html动态轮播效果怎么做,详解JavaScript实现动态的轮播图效果
利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之 ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...

JavaScript实现无缝轮播图效果

JavaScript实现无缝轮播图效果相关推荐

最新文章

热门文章