javascript手写轮播图播放效果

最新推荐文章于 2023-05-18 20:23:20 发布
最新推荐文章于 2023-05-18 20:23:20 发布
阅读量236 收藏 1
点赞数
文章标签： javascript 前端框架 ViewUI
原文链接：https://segmentfault.com/a/1190000016224134
版权

早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像bootstrap和iview等前端框架中都有封装好的特效，直接拿过来使用就可以了。但是轮播图是怎么做的呢。下面我们用原生代码来手写一个轮播图的特效。
实现效果如下：（图片来自网络）
图片描述
实现功能如下：

  1. 鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。
  2. 点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6
  3. 点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3
  4. 间隔2000ms自动播放（包括图片、数字、缩略图）。

根据前面运动知识，实现代码如下：

我们把前面总结的运动框架封装在move.js中

<!DOCTYPE html>
<html>
  <head>
    <title>轮播图</title>
    <script src="move.js"></script>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      #switch{
        width: 1400px;
        height: 520px;
        margin:auto;
        position: relative;
        overflow: hidden;
      }
      #switch .bigpic li{
        position: absolute;
        top: 0;
        left: 0;
      }
      #switch .bigpic li:nth-child(1){
        z-index: 2;
      }

      #switch .prev{
        width: 46px;
        height: 46px;
        line-height: 46px;
        color: #fff;
        border-radius: 100%;
        background: rgba(255,255,255,0.6);
        position: absolute;
        top:192px;
        left: 20px;
        border-width: 0;
        filter:alpha(opacity:0);
        opacity:0;
        z-index: 999;
      }
      #switch .next{
        width: 46px;
        height: 46px;
        line-height: 46px;
        color: #fff;
        border-radius: 100%;
        background: rgba(255,255,255,0.6);
        position: absolute;
        top:192px;
        right: 20px;
        border-width: 0;
        filter:alpha(opacity:0);
        opacity:0;
        z-index: 9999;
      }
      #switch .number{
        position: absolute;
        right: 30px;
        top: 390px;
        z-index: 9999;
        list-style: none;
      }
      #switch .number li{
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        background: #fff;
        border-radius: 100%;
        color: #000;
        text-align: center;
        cursor: pointer;
        filter:alpha(opacity:60);
        opacity:0.6;
      }
      #switch .number li:nth-child(1){
        filter:alpha(opacity:100);
        opacity:1.0;
      }
      #switch .mark_left{
        width: 700px;
        height: 430px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9998;
      }
      #switch .mark_right{
        width: 700px;
        height: 430px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 9998;
      }

      .smallimg{
        list-style: none;
        padding:0;
        margin:0;
        position: absolute;
        top: 434px;
        height: 86px;
      }
      .smallimg li{
        width:280px;
        height: 86px;
        float: left;
        filter:alpha(opacity:30);
        opacity:0.3;
      }
      .smallimg li:nth-child(1){
        filter:alpha(opacity:100);
        opacity:1.0;
      }
      .smallimg li img{
        width:280px;
        height: 86px;
      }
    </style>
    <script>
      function getByClass(oParent,sClass){
        var aEle=oParent.getElementsByTagName("*");
        var aResult=[];
        for(var i=0; i<aEle.length; i++){
          if(aEle[i].className===sClass){
            aResult.push(aEle[i]);
          }
        }
        return aResult;
      }
      window.onload=function(){
        var oDiv=document.getElementById("switch");
        var oBtnPrev=getByClass(oDiv,"prev")[0];
        var oBtnNext=getByClass(oDiv,"next")[0];
        var oMarkLeft=getByClass(oDiv,"mark_left")[0];
        var oMarkRight=getByClass(oDiv,"mark_right")[0];
        // 左右按钮
        oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
          startMove(oBtnPrev,"opacity",100);
        }
        oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){
          startMove(oBtnPrev,"opacity",0);
        }
        oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
          startMove(oBtnNext,"opacity",100);
        }
        oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
          startMove(oBtnNext,"opacity",0);
        }
        // 大图切换
        var oDivNumber=getByClass(oDiv,"number")[0];
        var aNumber=oDivNumber.getElementsByTagName("li");
        var oBigPic=getByClass(oDiv,"bigpic")[0];
        var aImg=oBigPic.getElementsByTagName("li");
        var aSmallImg=getByClass(oDiv,"smallimg")[0];
        var aSmall=aSmallImg.getElementsByTagName("li");
        var nowZIndex=2;
        var now=0;
        aSmallImg.style.width=aSmall.length*aSmall[0].offsetWidth+"px";
        for(var j=0; j<aNumber.length; j++){
          aNumber[j].index=j;
          aNumber[j].onclick=function(){
            if(this.index===now){
              return;
            }
            now=this.index;
            tab();
          }
          aNumber[j].onmouseover=function(){
            startMove(this,"opacity",100);
          }
          aNumber[j].onmouseout=function(){
            if(this.index!=now){
              startMove(this,"opacity",60);
            }
          }
        }
        for(var m=0; m<aSmall.length; m++){
          aSmall[m].index=m;
          aSmall[m].onclick=function(){
            if(this.index===now){
              return;
            }
            now=this.index;
            tab();
          }
          aSmall[m].onmouseover=function(){
            startMove(this,"opacity",100);
          }
          aSmall[m].onmouseout=function(){
            console.log(this.index);
            console.log(now);
            if(this.index!=now){
              startMove(this,"opacity",30);
            }
          }
        }
        function tab(){
          aImg[now].style.zIndex=nowZIndex++;
          for(var i=0; i<aNumber.length; i++){
            startMove(aNumber[i],"opacity",60);
          }
          for(var i=0; i<aSmall.length; i++){
            startMove(aSmall[i],"opacity",30);
          }

          startMove(aNumber[now],"opacity",100);
          startMove(aSmall[now],"opacity",100);
          aImg[now].style.height=0;
          startMove(aImg[now],"height",430);
          // if(now===0){
          //   startMove(aSmallImg,"left",0);
          // }else if(now===aSmall.length-1){
          //   startMove(aSmallImg,"left",-(now-2)*aSmall[0].offsetWidth);
          // }else{
          //   startMove(aSmallImg,"left",-(now-1)*aSmall[0].offsetWidth);
          // }
          if(now===0){//根据不同的规则设置不同的if
            startMove(aSmallImg,"left",0);
          }else if(now===aSmall.length-1){
            startMove(aSmallImg,"left",-(now-4)*aSmall[0].offsetWidth);
          }
        }
        oBtnPrev.onclick=function(){
          now--;
          if(now===-1){
            now=aImg.length-1;
          }
          tab();
        }
        oBtnNext.onclick=function(){
          now++;
          if(now===aImg.length){
            now=0;
          }
          tab();
        }
        var timer=setInterval(oBtnNext.onclick,2000);
        oDiv.onmouseover=function(){
          clearInterval(timer);
        }
        oDiv.onmouseout=function(){
          timer=setInterval(oBtnNext.onclick,2000);
        }
      }
    </script>
  </head>
  <body>
    <div id="switch">
      <ul class="bigpic">
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="6.jpg" alt=""></li>
      </ul>
      <button class="prev">&lt;</button>
      <button class="next">&gt;</button>
      <div class="mark_left"></div>
      <div class="mark_right"></div>
      <ul class="number">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>

      <ul class="smallimg">
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="6.jpg" alt=""></li>
      </ul>
    </div>
  </body>
</html>

move.js

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, attr, iTarget) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var cur=0;
    if(attr==="opacity"){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
    }
    else{
      cur=parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget - cur) / 6;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (cur === iTarget) {
      clearInterval(obj.timer);
    } else {
      if(attr==="opacity"){
        obj.style.filter="alpha(opacity:"+cur+speed+")";
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
  }, 30)
}
weixin_34097242
关注
纯JavaScript手写图片轮播代码
10-21
图片轮播是一种常见的网页交互效果，通过自动化或手动操作实现图片的顺序切换，广泛应用于电商、媒体、博客等多种网站。JavaScript作为前端开发中的一种核心语言，提供了操作DOM的能力，从而允许开发者实现图片轮播...
jcarousellite.js 基于Jquery的图片无缝滚动插件
u012149354的专栏
03-16 953
安装：      第一步：引用相关jquery和jCarouselLite，如果没有的话可以到jquery官方去下载jquery，到jCarouselLite去下载jCarouselLite      如果你对效果感兴趣的话，那么你可以下载Easing plugin，当然这并不是必须的      如果你想实现通过鼠标滚轮来实现图片翻转的话，那么你可以下载这个插件  Html
WEB API DOM-事件监听 事件类型 事件对象
weixin_68531033的博客
04-20 465
事件监听 用户做的动作为事件, 事件是在编程时系统内发生的动作或者发生的事情 事件源.addEventListener('事件类型', 要执行的函数) 事件监听三要素 事件源:事件在哪个元素身上,要获取dom元素 事件类型;用什么方式触发,比如click等 事件处理程序:要做什么事 <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
JS实现轮播图封装函数
m0_56262017的博客
06-13 758
本文仅仅简单介绍了封装的lunBo函数如何使用，以及通过代码展示，轮播图如何实现。 二、使用步骤 1.建立轮播图结构引入 代码如下（示例）： 建立HTML结构并引入lunBo函数。代码如下（示例）： 对传入的轮播图关键元素参数进行绑定时间，实现轮播图的基本效果。......
插件帮助文档 --- jquery---JCarouselLite
搁浅在PHP沙滩上的博客
01-19 1655
官方网站： http://www.gmarwaha.com/jquery/jcarousellite/ 插件描述： JCarouselLite是一款jquery插件，可以控制文档元素滚动，丰富的参数设置可以控制滚动的更多细节，是一款不可多得的滚动插件。 说明： 12320网站首页推荐专家使用了走马灯的方式，以前选用的JS过于杂乱，不好调控，影响效率。所以选用JCarous
Web API 01
weixin_62443949的博客
03-22 634
API
【JavaScript源代码】Vue3.0手写轮播图效果.docx
12-29
Vue3.0手写轮播图效果 　本文实例为大家分享了Vue3.0手写轮播图效果的具体代码，供大家参考，具体内容如下　让我们开始把　html结构　<template>　...
原生javaScript轮播图手写练习
最新发布
07-24
javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图...
超详细复杂轮播图(纯手写).zip
10-11
在IT行业中，轮播图是一种常见的网页元素，用于展示多张图片或内容并实现自动或手动切换的效果。这个"超详细复杂轮播图(纯手写).zip"文件显然是一个关于如何手工编写轮播图代码的教程或者示例项目。下面我们将深入...
一个用JavaScript纯手写的轮播图.7z
04-06
一个纯手写的轮播图样例，适合新手学习研究轮播图的具体实现方式
使用JS来制作轮播图定时器
weixin_64965154的博客
05-18 1542
这个意思就是我们可以使用 document.getElementById(‘ xx ’).innerHTML 来获取指定标签内的html内容这个[i]的意思是素组的下标，因为是动态，所以我们得写i，不能写死。删除之后我们也还需要一个小圆点我们就用到了add是添加的意思，然后我们这个毕竟是轮播图，我们从第一个需要增加，所以我们这里用模板字符串$i+1,JS最新的ES6语法模板字符串。if函数是判断语句，我们这块的意思是如果我们的i已经到了最后一张，那么数组长度就是八，然后会返回来1，这一步必不可少。
JS实例——手写网页轮播图
Thaley的博客
02-11 2111
JS手写网页轮播图，拆分模块进行手写。含有自动播放，但没有添加节流操作。 需要准备四个模块： 一个大的盒子进行包裹（main）、（focus f1） 左右元素按钮（arrow-l、arrow-r） 小圆点滚动显示（circle） 核心滚动模块图片
js手写轮播图思路与实现
qq_44129572的博客
04-06 3075
（轮播图动起来----最后一张与第一张无缝衔接）----鼠标移入暂停鼠标移出继续轮播-----上一张下一张按钮布局------点击切换上下一张-----拖拽切换上下一张等功能-------底部小圆点可明确表明当前显示第几张图片-----点击底部小圆点切换图片
用js手写一个轮播图
qq_51705526的博客
05-05 2699
前言 emm, 简单弄一下js轮播图是怎么实现的吧, 前端答辩可能要用到这个! 代码实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
前端基础学习之手写基础轮播图（pc端、移动端）
no pains,no gains
01-28 1075
最近在看移动端开发知识点的时候，刚好看到移动端轮播图，想着不如和之前pc端的轮播图放在一起做个记录，再回顾一遍一些基础知识点。 轮播图的几个基础功能点： 自动无缝切换轮播图片 点击按钮切换图片 移动端手指滑动切换图片 移动端手机滑动短距离图片吸附回去 指示器随着图片滚动而改变 1.无缝轮播图（仅简单自动轮播，通过改变绝对定位left值来实现滚动的效果，无其他任何功能点） <!DOCTYPE html> <html> <head lang="en"> .
【前端】手写轮播图·教程1
qq_45677671的博客
02-03 508
文章目录需求分析：效果图：源代码：所用图片： 需求分析： 根据图片的数量生成相同的小圆点，类名是slider-ctrl-con 显示第一个图片，同时第一个小圆点高亮，类名是:slider-ctrl-con current; 点击prev显示上一张图片，同时对应小圆点高亮 点击next显示下一张图片，同时对应小圆点高亮 点击小圆点，切换到对应的图片，同时小圆点高亮 可以自动轮播（每隔3000ms自动切换到下一张） 鼠标移入slider盒子，停止轮播 鼠标移出slider盒子，继续轮播 效果图： 源代码
【前端面试之手写代码】用js手写一个轮播图
阿卡内的博客
09-23 1044
获取pic_list，用于通过style上的left改变位置，点击下一张的话，向左移动，点击上一张，则向右移动。//同样移动图片获取轮播图有几张图片//减去在头和尾部加的两张图片初始化列表最开始的位置//初始化列表最开始的位置这是一些参数，time是第一个定时器（用于跳到下一张，每隔2400ms便跳转到下一张）。time2第二个定时器（图片每隔15ms便向左移动10px）。distance记录图片一共移动的距离。index记录图片当前的索引2. init函数，轮播图中的一些鼠标事件都会在这里定义。
纯手写JS轮播图
Lindsay_jie的博客
04-24 885
之前用JS写的轮播图，有详细注释，放在这里和大家一起学习！ 实现的功能： １．不点击按钮时自动播放轮播图，按钮隐藏 ２．点击左右按钮图片切换，同时自动播放停止 ３．下面一排小圆点与当前图片的序号相对应 部分代码： window.addEventListener('load', function () { // 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮 var btnLeft = document.querySelector('.left'); var btnRig
js手写轮播图
godfather111111的博客
08-07 212
首先我们要知道轮播图的图片应为动态添加，这样后期才方便添加别的图片，当然图片的序号也要动态添加，毕竟得与图片数量对应，然后就是要添加页面左右两边的小箭头了(当鼠标移出轮播图后自动隐藏)，已及创建定时器让图片能自动轮播，以及最关键，当图片轮播到最后一页后，会自动将第一张图片添加到后面，最终才能实现轮播效果。1、先思考 轮播图是怎么实现的？...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值