【前言】
近期文章发布到博客园，今天有个同事为了个问题。原生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>
.
相关推荐
总结，原生JavaScript无缝轮播插件的实现涉及到HTML结构、CSS样式、JavaScript基础、面向对象编程、节流函数、动画效果、事件绑定、轮播逻辑和浏览器兼容性等多个知识点。掌握这些技能，不仅可以帮助开发者构建高效...
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
无缝轮播图是一种常见的网页元素，用于展示一系列图片或内容，并通过自动或手动切换来创建连续无中断的浏览体验。这种效果在现代网站设计中非常流行，因为它能够吸引用户的注意力并提供动态的用户体验。 首先，我们...
原生JS实现无缝轮播是一种常见的网页动态效果，它能够为用户提供流畅的图像或内容切换体验，无需依赖任何外部库如jQuery。在这个压缩包中，包含的HTML、CSS和JavaScript文件共同构成了一个完整的无缝轮播实现。下面...
以上就是一个基本的原生JavaScript无缝轮播图的实现过程。通过这种方式，我们可以根据项目需求灵活定制轮播图的样式和行为，而无需依赖外部库。这个压缩包中的`swiper-master`可能包含了一个完整的示例项目，你可以...
本项目"0原生js-面向对象-无缝轮播图.zip"旨在通过原生JavaScript和面向对象编程思想，创建一个无缝轮播图特效。无缝轮播图是一种常见的网页元素，它为用户提供了一种优雅的方式来展示多张图片或内容，让它们看起来...
通过以上步骤，我们就实现了一个基本的原生JavaScript无缝轮播图。当然，实际应用中可能还需要考虑更多的细节，如触摸事件支持、动画速度控制、指示器等，但这些构成了无缝轮播图实现的基础。通过不断优化和扩展，...
本教程将深入探讨如何使用原生JavaScript实现一个无缝轮播效果，同时结合面向对象编程思想进行代码组织，提高代码复用性和可维护性。 ### 1. 基本思路 无缝轮播的核心在于通过改变图片的位置或CSS属性，使得用户...
总结来说，原生JS实现无缝滚动轮播图的关键在于利用CSS相对定位和JavaScript动态改变元素的位置。通过合理地组织HTML结构，设置CSS样式，以及编写JavaScript逻辑，我们可以创建一个功能完善的轮播图组件。这种自定义...
本教程将探讨如何使用原生JavaScript来实现一个无缝轮播图插件，实现方式模块化，方便维护和扩展。 ### 1. 基本结构与HTML 首先，我们需要在HTML中创建一个轮播图容器，并在其中放置多个图片（或内容）的`<div>`...
在这个无缝轮播图中，JavaScript主要负责以下几个关键功能： 1. **自动播放**：JavaScript可以设置定时器（setTimeout或setInterval），在一定时间间隔后自动切换到下一张图片，模拟连续滚动的效果。 2. **滑动动画...
本篇将深入探讨如何使用原生JavaScript实现一套包含焦点轮播、自动轮播和无缝轮播功能的轮播图组件。 首先，我们需要理解轮播图的基本结构。通常，轮播图由一个容器元素（如`<div>`）和多个图片元素（如`<img>`）...
实现思路（向右无缝滚动）： 三张图片的尺寸为274X390； 初始位置定义包含整个图片列表的div的left值为-274px。 在图片列表的left 值在-274-0之间时，只需实现图片列表的向右滚动； 当图片列表的left值>=0时，...
原生JS无缝轮播图 ，如果无法打开预览，原因是部分运营商DNS污染（域名指往不正确的IP地址），可以通过 修改hosts文件 / 修改DNS服务器 / 代理 的方式访问 HTML部分 最外层是一个固定宽度且带有overflow: hidden;...
在本实例中，我们将探讨如何使用纯JavaScript实现一个淡入淡出的无缝轮播图，无需依赖任何外部库如jQuery。以下是实现该功能的关键知识点： 1. **HTML结构**： 首先，我们需要一个包含图片的`<ul>`列表，每个`<li>...
总的来说，原生JS实现的无缝轮播图通过JavaScript动画、事件监听和DOM操作实现了图片的自动切换和用户交互。这种技术在现代网页设计中广泛应用，提供了良好的用户体验。理解并掌握这一技术对于前端开发者来说非常...
在"轮播图"文件中，你应该能找到对应的HTML、CSS和JavaScript代码，通过阅读和理解这些代码，你可以进一步掌握原生JS实现轮播图的技巧。这个实例不仅有助于提升你的JavaScript编程能力，还能帮助你了解如何将HTML5和...
总的来说，"携程网首页 +轮播图 原生js实现"项目涵盖了前端开发的多个基础和进阶技能，不仅锻炼了开发者对HTML、CSS和JavaScript的综合运用能力，还提供了实践动态效果和用户体验优化的机会。通过这个项目，开发者...