登录
当前位置： 首页 > 编程笔记 >

JS实现图片轮播效果实例详解【可自动和手动】

钱志
2023-03-14
本文向大家介绍JS实现图片轮播效果实例详解【可自动和手动】，包括了JS实现图片轮播效果实例详解【可自动和手动】的使用技巧和注意事项，需要的朋友参考一下

本文实例讲述了JS实现图片轮播效果。分享给大家供大家参考，具体如下：

本次轮播效果图如下：

具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换  3.底下小按钮切换

以下为实现代码：

首先是html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最简单的轮播效果</title>
</head>
<body>
<div class="box" id="box">
  <div class="inner">
    <!--轮播图-->
    <ul>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.jpg" alt=""></a></li>
    </ul>
    <ol class="bar">
      小按钮数量无法确定，由js动态生成
    </ol>
    <!--左右焦点-->
    <div id="arr">
       <span id="left"> <</span>
       <span id="right">></span>
    </div>

  </div>
</div>

</body>
</html>

接下来是css样式：

<style>
    * {
      margin: 0;
      padding: 0
    }
    .box {
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      padding: 5px;

    }
    .inner{
      width: 500px;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
    .inner img{
      width: 500px;
      height: 300px;
      vertical-align: top
    }
    ul {
      width: 1000%;
      position: absolute;
      list-style: none;
      left:0;
      top: 0;
    }
    .inner li{
      float: left;

    }

    ol {
      position: absolute;
      height: 20px;
      right: 20px;
      bottom: 20px;
      text-align: center;
      padding: 5px;
    }
    ol li{
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: #fff;
      margin: 5px;
      cursor: pointer;

    }
    ol .current{
      background-color: red;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #fff;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #000;
      opacity: 0.5;
      border: 1px solid #fff;
    }
    #arr #right {
      right: 5px;
      left: auto;
    }

第三部分是最主要的js代码：

<script>
  /**
   *
   * @param id 传入元素的id
   * @returns {HTMLElement | null} 返回标签对象，方便获取元素
   */
  function my$(id) {
    return document.getElementById(id);
  }

  //获取各元素，方便操作
  var box=my$("box");
  var inner=box.children[0];
  var ulObj=inner.children[0];
  var list=ulObj.children;
  var olObj=inner.children[1];
  var arr=my$("arr");
  var imgWidth=inner.offsetWidth;
  var right=my$("right");
  var pic=0;
  //根据li个数，创建小按钮
  for(var i=0;i<list.length;i++){
    var liObj=document.createElement("li");

    olObj.appendChild(liObj);
    liObj.innerText=(i+1);
    liObj.setAttribute("index",i);

    //为按钮注册mouseover事件
    liObj.onmouseover=function () {
      //先清除所有按钮的样式

      for (var j=0;j<olObj.children.length;j++){
        olObj.children[j].removeAttribute("class");
      }
      this.className="current";
      pic=this.getAttribute("index");
      animate(ulObj,-pic*imgWidth);
    }

  }


  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";
  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  var timeId=setInterval(onmouseclickHandle,1000);
  //左右焦点实现点击切换图片功能
  box.onmouseover=function () {
    arr.style.display="block";
    clearInterval(timeId);
  };
  box.onmouseout=function () {
    arr.style.display="none";
    timeId=setInterval(onmouseclickHandle,1000);
  };

  right.onclick=onmouseclickHandle;
  function onmouseclickHandle() {
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
    //所以,如果用户再次点击按钮,用户应该看到第二个图片
    if (pic == list.length - 1) {
      //如何从第6个图,跳转到第一个图
      pic = 0;//先设置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
    }
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
    animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    if (pic == list.length - 1) {
      //第五个按钮颜色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一个按钮颜色设置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按钮的背景颜色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }
  }
  left.onclick=function () {
    if (pic==0){
      pic=list.length-1;
      ulObj.style.left=-pic*imgWidth+"px";
    }
    pic--;
    animate(ulObj,-pic*imgWidth);
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";
  };

  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>

所有用图片如下：

1.jpg


2.jpg


3.jpg


4.jpg


5.jpg


下面是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最简单的轮播效果</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }
    .box {
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      padding: 5px;

    }
    .inner{
      width: 500px;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
    .inner img{
      width: 500px;
      height: 300px;
      vertical-align: top
    }
    ul {
      width: 1000%;
      position: absolute;
      list-style: none;
      left:0;
      top: 0;
    }
    .inner li{
      float: left;

    }

    ol {
      position: absolute;
      height: 20px;
      right: 20px;
      bottom: 20px;
      text-align: center;
      padding: 5px;
    }
    ol li{
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: #fff;
      margin: 5px;
      cursor: pointer;

    }
    ol .current{
      background-color: red;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #fff;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #000;
      opacity: 0.5;
      border: 1px solid #fff;
    }
    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <div class="inner">
    <!--轮播图-->
    <ul>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.jpg" alt=""></a></li>

    </ul>

    <ol class="bar">

    </ol>
    <!--左右焦点-->
    <div id="arr">
          <span id="left">
            <
          </span>
      <span id="right">
            >
          </span>
    </div>

  </div>
</div>
<script>
  /**
   *
   * @param id 传入元素的id
   * @returns {HTMLElement | null} 返回标签对象，方便获取元素
   */
  function my$(id) {
    return document.getElementById(id);
  }

  //获取各元素，方便操作
  var box=my$("box");
  var inner=box.children[0];
  var ulObj=inner.children[0];
  var list=ulObj.children;
  var olObj=inner.children[1];
  var arr=my$("arr");
  var imgWidth=inner.offsetWidth;
  var right=my$("right");
  var pic=0;
  //根据li个数，创建小按钮
  for(var i=0;i<list.length;i++){
    var liObj=document.createElement("li");

    olObj.appendChild(liObj);
    liObj.innerText=(i+1);
    liObj.setAttribute("index",i);

    //为按钮注册mouseover事件
    liObj.onmouseover=function () {
      //先清除所有按钮的样式

      for (var j=0;j<olObj.children.length;j++){
        olObj.children[j].removeAttribute("class");
      }
      this.className="current";
      pic=this.getAttribute("index");
      animate(ulObj,-pic*imgWidth);
    }

  }


  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";
  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  var timeId=setInterval(onmouseclickHandle,1000);
  //左右焦点实现点击切换图片功能
  box.onmouseover=function () {
    arr.style.display="block";
    clearInterval(timeId);
  };
  box.onmouseout=function () {
    arr.style.display="none";
    timeId=setInterval(onmouseclickHandle,1000);
  };

  right.onclick=onmouseclickHandle;
  function onmouseclickHandle() {
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
    //所以,如果用户再次点击按钮,用户应该看到第二个图片
    if (pic == list.length - 1) {
      //如何从第6个图,跳转到第一个图
      pic = 0;//先设置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
    }
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
    animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    if (pic == list.length - 1) {
      //第五个按钮颜色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一个按钮颜色设置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按钮的背景颜色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }
  }
  left.onclick=function () {
    if (pic==0){
      pic=list.length-1;
      ulObj.style.left=-pic*imgWidth+"px";
    }
    pic--;
    animate(ulObj,-pic*imgWidth);
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";
  };

  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

 类似资料：
  • js手动播放图片实现图片轮播效果

    本文向大家介绍js手动播放图片实现图片轮播效果，包括了js手动播放图片实现图片轮播效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js图片轮播具体实现代码，供大家参考，具体内容如下 一、html代码部分（et.thtml）： 二、css代码部分（styleet,css）: 三、js代码部分（et.js）： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教

  • 详解js图片轮播效果实现原理

    本文向大家介绍详解js图片轮播效果实现原理，包括了详解js图片轮播效果实现原理的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js图片轮播效果实现原理，分享给大家供大家参考，具体内容如下 原理在这呐 首先init()函数用于初始化images数组和image的值，本例中主要是利用setSrc()设置图片的src属性值，这样就达到了图片的切换，图片的轮播是使用定时器来时显的！setInter

  • js实现图片轮播效果

    本文向大家介绍js实现图片轮播效果，包括了js实现图片轮播效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲解了js实现图片轮播效果代码，分享给大家供大家参考，具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的，主要实现的功能：自动播放、鼠标悬停、左右箭头控制+禁止点击 CSS样式： HTML布局( a标签最好加个title属性 )： JS脚本插件： 页面调用： 希望本文所

  • js图片轮播效果实现代码

    本文向大家介绍js图片轮播效果实现代码，包括了js图片轮播效果实现代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现图片轮播效果的具体代码，供大家参考，具体内容如下 首先给大家看一看js图片轮播效果，如下图 具体思路： 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index 二、添加定时器，每隔2秒钟index递

  • js图片轮播手动切换效果

    本文向大家介绍js图片轮播手动切换效果，包括了js图片轮播手动切换效果的使用技巧和注意事项，需要的朋友参考一下 利用ScrollPicLeft.js这个库实现图片的前后切换，适用于网页中的证书展示、推荐商品之类的栏目。它不像传统的marquee滚动那样，而是可以手动的去点击前后切换箭头按钮，进行图片的翻页，从而达到浏览上一张，下一张的效果。 不需要调用jquery，初始化简单，使用非常的简单，便利

  • 原生js和css实现图片轮播效果

    本文向大家介绍原生js和css实现图片轮播效果，包括了原生js和css实现图片轮播效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了javascript图片轮播效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

相关阅读

js图片轮播手动切换效果原生js和css实现图片轮播效果图解js图片轮播效果JQuery实现图片轮播效果Android开发实现的自动换图片、轮播图效果示例

相关文章

线性DP图文实例讲解插头DP图文实例讲解Bootstrap 轮播Bootstrap4 轮播详解MySQL/Redis/ZooKeeper实现分布式锁

相关问答

javascript - Vue3如何实现像这个网站的图片自动切换效果?echarts - 用Echarts怎么实现图例效果？harmonyos-next - HarmonyOS Swiper组件如何实现手指拖动滑动效果而不是自动滑动效果？Owl轮播自动播放和分页问题javascript - 求最好用的轮播js插件，主要是用于图片轮播，html块轮播？

相关工具

图片翻转动画效果自定义照相机和图片滤镜效果读取txt并实现翻页效果视图各种动画效果动画片播放器

相关文档

GRUB2 配置文件 grub.cfg 详解 / GRUB2 实战手册Python 自动化测试之实操Android Animation 动画详解如何实现自己的 jQuery自己动手写 servlet 容器
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.