零基础也能学会，原生JS实现图片轮播（附源码，拿去即用）

Posted 欧阳呀

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零基础也能学会，原生JS实现图片轮播（附源码，拿去即用）相关的知识，希望对你有一定的参考价值。

javascript —— 原生JS实现图片轮播

  • 首先，祝大家端午安康，发大财！一夜暴富
    在这里插入图片描述

1. 项目效果图

  • 技术栈（原生JS），真正高端的效果往往只需要简单质朴的JS就能实现
  • 可以点击左右箭头切换图片
  • 鼠标悬浮在数字上也可切换图片
  • 设置了定时器，会自动轮播
  • 用到了animate，效果非常丝滑
    在这里插入图片描述

2. 基础布局（index.html）

  • 这里非常简单，不做过多解释
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <link rel="stylesheet" type="text/css" href="./index.css"  />
        <style>
        </style>
    </head>
    <body>
        <h1>原生JS实现轮播图</h1>
        <div id="box" class="all">
            <div class="inner"> <!-- 相框-->
             <ul>
                <li><a href="#"><img src="img/1.jpg" width="550" height="320" alt=""></a></li>
                <li><a href="#"><img src="img/2.jpg" width="550" height="320" alt=""></a></li>
                <li><a href="#"><img src="img/3.jpg" width="550" height="320" alt=""></a></li>
                <li><a href="#"><img src="img/4.jpg" width="550" height="320" alt=""></a></li>
             </ul>
             <ol> <!--里面存放小圆点-->
            
             </ol>
            </div>
            <div class="focusD" id="arr">
             <span id="left"><</span>
             <span id="right">></span>
            </div>
        </div>
    </body>  
    <script src="./index.js"></script>    
</html>

3. CSS 样式（index.css）

* {
    margin: 0;
    padding: 0;
   }
   h1{
       text-align: center;
       margin-top: 150px;
   }
   /*<--清除底部三像素距离-->*/
   img {
    vertical-align: top;
   }
  
   .all {
    width: 550px;
    height: 320px;
    margin: 100px auto;
    padding: 5px;
    border: 1px solid #ccc;
    position: relative;
   }
  
   .inner {
    position: relative;
    width: 550px;
    height: 320px;
    background-color: pink;
    overflow: hidden;
   }
  
   .inner ul {
    width: 1000%;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
   }
  
   .inner ul li {
    float: left;
   }
  
   .focusD {
    position: absolute;
    left: 0;
    top: 50%;
    width: 550px;
    padding: 0 10px;
    height: 30px;
    box-sizing: border-box;
    display: none;
   }
  
   .inner ol {
    position: absolute;
    right: 30px;
    bottom: 10px;
   }
  
   .inner ol li {
    width: 15px;
    display: inline-block;
    height: 15px;
    margin: 0 3px;
    cursor: pointer;
    line-height: 15px;
    text-align: center;
    background-color: #fff;
   }
   /*当前的高亮的小圆点*/
   .inner ol .current {
    background-color: orange;
    color: #fff;
   }
  
   .focusD span {
    display: inline-block;
    width: 25px;
    font-size: 24px;
    height: 30px;
    color: #ccc;
    line-height: 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
   }
  
   #left {
    float: left;
   }
  
   #right {
    float: right;
 }

4. JS部分（做了详细注释）

4.1 获取需要操作的元素

let index=0;
//获取最外面的div
let box = my$("box");
//获取相框
let inner = box.children[0];
//获取去相框的宽度
let imgWidth = inner.offsetWidth;
// 获取ul
let ulObj = inner.children[0];
//获取ul中所有的li
let list = ulObj.children;
//获取ol
let olObj = inner.children[1];
//获取焦点
let arr = my$("arr");

4.2 创建小圆点，及设置背景色

 //创建小按钮-----根据ul中li的个数
 for (let i = 0; i < list.length; i++) {
  let liObjs = document.createElement("li");
  olObj.appendChild(liObjs);
  liObjs.innerHTML = (i + 1);
  //在ol中每个li中增加自定义属性，添加索引值
  liObjs.setAttribute("index", i);
  //注册鼠标进入事件
  liObjs.onmouseover = function () {
   //先干掉所有背景颜色
   for (let j = 0; j < olObj.children.length; j++) {
    olObj.children[j].removeAttribute("class");
   }
   //设置当前鼠标进来的类样式
   this.className = "current";
   //获取ol中li的索引值
    index = this.getAttribute("index");
   //移动ul
   animate(ulObj, -index * imgWidth); //移动动画函数
  };
 }
 //设置第一个ol中li的背景颜色
 olObj.children[0].className = "current";
 //克隆ol中第一个li放到最后一个
 ulObj.appendChild(ulObj.children[0].cloneNode(true));

4.3 设置定时器（定时轮播）

 let timeId=setInterval(clickHandle,3000);
 
 my$("box").onmouseover=function(){
  arr.style.display="block";
  clearInterval(timeId);
 };

4.4 绑定左右箭头点击事件

 //点击右边按钮
  my$("right").onclick=clickHandle;
  function clickHandle() {
   if (index==ulObj.children.length-1){
    ulObj.style.left=0+"px";
    index=0;
   }
   index++;
   animate(ulObj,-index*imgWidth);
   if (index==list.length-1){
    olObj.children[0].className="current";
    olObj.children[olObj.children.length-1].className="";
   }else {
    for (let i=0;i<olObj.children.length;i++){
     olObj.children[i].className="";
    }
    olObj.children[index].className="current";
   }
  };
  //点击左边按钮
  my$("left").onclick=function () {
   if (index==0){
    index=list.length-1;
    ulObj.style.left=-index*imgWidth+"px";
   }
   index--;
   animate(ulObj,-index*imgWidth);
   for (let i=0;i<olObj.children.length;i++){
    olObj.children[i].className="";
   }
   olObj.children[index].className="current";
  };
 
 my$("box").onmouseout=function(){
  arr.style.display="none";
  timeId=setInterval(clickHandle,3000);
 };
 
 
 
 // 设置一个元素，移动到指定位置
 function animate(element, target) {
  clearInterval(element.timeId);
  element.timeId = setInterval(function () {
   let current = element.offsetLeft;
   let step = 9;
   step = current > target ? -step : step;
   current += step;
   if (Math.abs(target - current) > Math.abs(step)) {
    element.style.left = current + "px";
   } else {
    clearInterval(element.timeId);
    element.style.left = target + "px";
   }
  }, 10);
 }
function my$(id) {
 　　 return document.getElementById(id);
}

5. FAQ

  • 注意各文件引入路径
  • 需要自己找几张图片
  • JS文件一个就可，将所有JS按本文顺序放一起就行
  • 大家有啥问题可以加微信交流（在个人主页），无任何广告，大神坐镇，干货满满
  • 个人QQ：2567040816

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位

在这里插入图片描述

以上是关于零基础也能学会，原生JS实现图片轮播（附源码，拿去即用）的主要内容，如果未能解决你的问题，请参考以下文章

js实现轮播图效果(附源码)--原生js的应用

js原生 JavaScript轮播图渐变淡入淡出效果实现（附代码）

Python爬虫实战，零基础初试爬虫下载图片（附源码和分析过程）

原生JS实现轮播

原生js实现轮播图

原生Js_实现图片轮播功能功能