网络编程

js实现从左向右滑动式轮播图效果
网络编程 2025/10/25 佚名
3 2

轮播图就是让图片每隔几秒自动滑动，达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的，滑动式的轮播图就是图片从左向右滑入的效果，渐入式的轮播图就是图片根据透明度渐渐显示的效果，这里说的是实现第一种效果的方法。

原理

相同大小的图片并成一列，但只显示其中一张图片，其余的隐藏，通过修改left值来改变显示的图片。

js实现从左向右滑动式轮播图效果

点击查看效果

html部分

　　nav为总容器，第一个ul列表#index为小圆点列表，鼠标覆盖哪个小圆点就显现第几张图片，on是一个给小圆点添加背景颜色属性的类；第二个ul列表#img为图片列表。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Carousel Figure</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
  </head>
  <body>
  <!--从左向右滑动-->
    <nav>
      <ul id="index">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul id="img">
        <li><img src="/UploadFiles/2021-04-02/img1.jpg">


css部分




图片尺寸均为720*405，这里需要注意以下几点：


ul#img列表相对于nav是绝对定位的，#img的长度必须设置为所有图片的总宽度，这样图片才可以并列一排显示；


总容器nav的宽度必须设置为图片的宽度720px,即只能显示一张图片，超出宽度的部分隐藏，即overflow: hidden；


小圆点列表应该在图片列表上面显示，故设置#img的z-index：-1；


小圆点列表是由一系列的li通过改变边框样式构成，故只需改变背景颜色即可达到移动小圆点的效果。





  *{
    margin:0;
    padding:0;
  }
  nav{
    width: 720px;
    height: 405px;
    margin:20px auto;
    overflow: hidden;
    position: relative;
  }
  #index{
    position: absolute;
    left:320px;
    bottom: 20px;
  
  }
  #index li{
    width:8px;
    height: 8px;
    border: solid 1px gray;
    border-radius: 100%;
    background-color: #eee;
    display: inline-block;
  }
  #img{
    width: 3600px;/*不给宽高无法移动*/
    height: 405px;
    position: absolute;/*不定义absolute，js无法设置left和top*/
    z-index: -1;
  }
  #img li{
    width: 720px;
    height: 405px;
    float: left;
  }
  #index .on{
    background-color: black;
  }






JS部分




图片移动函数moveElement()




　　moveElement函数需要获取图片现在的位置以及目标位置并计算它们之间的差距进行移动，可以用offsetLeft和offsetTop获取图片现在的位置。图片移动时“划过”的效果是将距离分成好10次进行移动，即利用setTimeOut函数，然而为了防止鼠标悬停，需调用clearTimeout()函数，代码如下：





  function moveElement(ele,x_final,y_final,interval){//ele为元素对象
    var x_pos=ele.offsetLeft;
    var y_pos=ele.offsetTop;
    var dist=0;
    if(ele.movement){//防止悬停
      clearTimeout(ele.movement);
    }
    if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
      return;
    }
    dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
    x_pos = x_pos<x_final "color: #800000">小圆点移动函数moveIndex()




　　移动小圆点的实质是移动设置的背景颜色的类on，原理是先判断哪个li上有背景颜色，有则去掉，让所有的li都没有背景，然后在对当前的li添加背景。





  function moveIndex(list,num){//移动小圆点
    for(var i=0;i<list.length;i++){
      if(list[i].className=='on'){//清除li的背景样式
        list[i].className='';
      }
    }
    list[num].className='on';
  }






图片自动轮播




　　将以下代码直接写在window.onload中即可。

　　这里需要定义一个变量index，表示移动到第index（0~n-1，n为li的个数）张图片。





  var img=document.getElementById('img');
  var list=document.getElementById('index').getElementsByTagName('li');
  var index=0;//这里定义index是变量，不是属性

  var nextMove=function(){//一直向右移动，最后一个之后返回
    index+=1;
    if(index>=list.length){
      index=0;
    }
    moveIndex(list,index);
    moveElement(img,-720*index,0,20);
  };







图片的自动轮播需要用到setInterval()函数，让程序每隔几秒自动调用nextMove()函数：





  var play=function(){
    timer=setInterval(function(){
      nextMove();
    },2500);
  };






鼠标覆盖小圆点效果




　　要实现鼠标覆盖哪个小圆点，就呈现出对应的图片这一效果，需要知道鼠标覆盖的是哪个小圆点，这里给每个li都添加一个自定的属性index，使该属性的值为对应的小圆点的序号i(0~n-1，n为li的个数)，这样每次鼠标覆盖时只需获取index属性的值即可知道鼠标覆盖的是哪个小圆点。注意，该index属性和变量index没有丝毫的关系，只有相同的名字。





  for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
    list[i].index=i;//这里是设置index属性，和index变量没有任何联系
    list[i].onmouseover= function () {
      var clickIndex=parseInt(this.index);
      moveElement(img,-720*clickIndex,0,20);
      index=clickIndex;
      moveIndex(list,index);
      clearInterval(timer);
    };
    list[i].onmouseout= function () {//移开后继续轮播
      play();
    };
  }






总结




　　轮播图的实现并不复杂，主要在于将图片的移动行为和小圆点的移动行为分开，这样就比较容易实现。这个轮播图其实还是有点问题的，从最后一幅图滑向第一个时滑动的距离较长，其实也很好解决，将滑动的方式改一下，这里是根据-720*index来计算最终的left值，而index是将图片的移动和小圆点的移动绑到一起，将滑动方式改成现在的offsetLeft+（-720），图片的移动就可以与index值无关，然后在html文件增加一幅图片：





<li><img src="/UploadFiles/2021-04-02/img1.jpg">


然后在滑到最后一幅图片时，迅速的将偏移量赋值0，变成第一幅，两幅图一样，无法分辨其中变化，即可达到无缝连接。





  if(x_pos==-3600){
    ele.style.left='0';
    ele.style.top='0';
  }else{
    ele.style.left=x_pos+'px';
    ele.style.top=y_pos+'px';
  }





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                

                                    标签：
                                        
js,滑动,轮播图
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“js实现从左向右滑动式轮播图效果”

暂无“js实现从左向右滑动式轮播图效果”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2025/10/25

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com