【前言】
近期文章发布到博客园，今天有个同事为了个问题。原生js实现左右滑动轮播的案例。给他写了个简单的，详细注释加到了代码里，这里分享下
【主体】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.wrapper{
width: 600px;
height: 300px;
border: 1px solid black;
margin: 10px auto;
}
.inner{
width: inherit;
height: inherit;
position: relative;
}
.inner ul{
width: 3600px;
height: inherit;
position: absolute;
top: 0;
}
.inner ul li{
float: left;
width: 600px;
height: inherit;
}
.inner ul li:nth-child(even){
background-color: orange;
}
.inner ul li:nth-child(odd){
background-color: lightblue;
}
.circle{
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
}
.circle span{
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid black;
border-radius: 50%;
line-height: 15px;
text-align: center;
font-size: 14px;
}
.circle .current{
background-color: rgba(0,0,0,.6);
color: white;
}
.direction{
position: absolute;
top: 50%;
width: 100%;
}
.direction span{
width: 30px;
height: 30px;
display: inline-block;
background-color: rgba(0,0,0,.6);
cursor: pointer;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">
<ul>
<li>页面1</li>
<li>页面2</li>
<li>页面3</li>
<li>页面4</li>
<li>页面5</li>
<li>页面1</li>
</ul>
<div class="circle">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="direction">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
</div>
<script type="text/javascript">
//获取页面元素
var ul = document.getElementsByTagName("ul")[0];
var inner = document.getElementsByClassName("inner")[0];
var circle = document.getElementsByClassName("circle")[0];
var spanArr = circle.children;
var direction =document.getElementsByClassName("direction")[0];
var dirChid=direction.children;
var innerWidth = inner.offsetWidth;
console.log('展示区域宽度'+innerWidth);
console.dir(spanArr)
//两个定时器（index记录图片，span记录小圆球）
var index = 0;
var span = 0;
//为左箭头绑定事件
//index 记录图片的索引，span记录小球的索引，图片个数为6，小球的个数为5
dirChid[0].onclick=function () {
//每次点击左切换，图片的索引减一，小球的索引减一
index--;
//图片的索引<0时，设置ul的位置为第五个图片的位置
if(index<0){
ul.style.left= -innerWidth*spanArr.length+"px";
index= spanArr.length-1;
}
animation(ul,-index*innerWidth);
//小球的索引减一
span--;
//当小球索引小于0时，设置它的索引为4
if(span<0){
span= spanArr.length-1;
}
//点亮小球
for(var i= 0 ; i<spanArr.length;i++){
spanArr[i].className = "";
}
spanArr[span].className = "current";
}
//为右箭头绑定事件，
dirChid[1].onclick=function () {
index++;
//图片的索引大于小球长度个数时，设置ul的位置为第1张图片的位置
if(index>spanArr.length){
ul.style.left=0;
index=1;
}
animation(ul,-index*innerWidth);
span++;
if(span>spanArr.length-1){
span= 0;
}
for(var k= 0 ; k<spanArr.length;k++){
spanArr[k].className = "";
}
spanArr[span].className = "current";
}
//封装缓动动画函数
// ul -600
function animation(ele,target) {
clearInterval(ele.timer);
ele.timer=setInterval(function () {
//获取起使位置
leader= ele.offsetLeft;
//获取缓动动画步长
var step = (target-leader)/10;
//支持不同方向的移动，所以步长有正有负
if(step >0){
step= Math.ceil(step);
}else{
step = Math.floor(step);
}
//当前位置= 盒子的位置+步长
leader = leader +step;
ele.style.left = leader+"px";
if(ele.offsetLeft === target) {
clearInterval(ele.timer);
}
},30)
}
</script>
</body>
</html>
.
相关推荐
主要为大家详细介绍了原生js无缝轮播插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
主要为大家详细介绍了原生js实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现无缝滚动轮播图，最大的优点：使用相对定位进行无缝滚动，五张图的轮播只需五张图
纯原生JS写的无缝轮播图，里面包含了html、css、和js文件，基本上每一行代码都有注释，很有参考价值
原生js实现无缝轮播（包括面向对象的写法），包括实现思路。
原生js实现无缝轮播图.zip，直接可以使用，内附img，如需更换图片，自己更换即可，简单方便
原生JS实现无缝滚动轮播图，使用相对定位进行无缝滚动，五张图的轮播只需五张图
使用原生javascript + 使用面向对象思想，编写无缝轮播图特效。
原生js实现无缝轮播图插件,模块化开发，有问题请留言。实现过程：https://blog.csdn.net/jacoox/article/details/80585367
本文主要分享了原生js实现无缝轮播图效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
原生js+css写的淘宝无缝轮播图，代码量很少适合新手学习！
实现思路（向右无缝滚动）： 三张图片的尺寸为274X390； 初始位置定义包含整个图片列表的div的left值为-274px。 在图片列表的left 值在-274-0之间时，只需实现图片列表的向右滚动； 当图片列表的left值>=0时，...
前端，banner图轮播实现，原生js，广告轮播，自动轮播
原生JavaScript写的一套轮播图代码，包含焦点轮播，自动轮播，无缝轮播。下载后替换图片即可使用
原生JS无缝轮播图 ，如果无法打开预览，原因是部分运营商DNS污染（域名指往不正确的IP地址），可以通过 修改hosts文件 / 修改DNS服务器 / 代理 的方式访问 HTML部分 最外层是一个固定宽度且带有overflow: hidden;...
详细描述了怎样去用原生js写轮播图，有左右切换按钮以及导航按钮，无缝连接，没有空白。描述了我在写轮播图过程中遇到的一些问题以及解决方法，希望能和大家一起讨论。
本文实例为大家分享了JS实现无缝轮播图的具体代码，供大家参考，具体内容如下 运动插件 function animove(obj,distance,speed,callback) { //调用的变量 目标距离 速度 回调函数 clearInterval(obj.timer); obj....
本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> ...