JavaScript实现首页图片轮播图效果

2024-11-02 13:09:03

一、轮番图

效果展示：

轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。

二、源码展示

设置body

<body>
  <div class="m-view">
    <div class="slide" style="left: -800px">
      <img src="1.jpg" alt="4">
      <img src="2.jpg" alt="0">
      <img src="3.jpg" alt="1">
      <img src="4.jpg" alt="2">
      <img src="5.jpg" alt="3">
      <img src="3.jpg" alt="4">
      <img src="2.jpg" alt="0">
    </div>
    <div class="prev"><</div>
    <div class="next">></div>
    <div class="pointer">
      <span class="button on" index="0"></span>
      <span class="button" index="1"></span>
      <span class="button" index="2"></span>
      <span class="button" index="3"></span>
      <span class="button" index="4"></span>
    </div>
  </div>

样式设置

<style>
    .m-view,.m-view .slide img{
      position: relative;/*作为绝对定位的父元素*/
      width: 500px;
      height: 300px;
    }
    .m-view{
      overflow: hidden;/*将超出该div的子元素隐藏*/
    }
    .m-view .slide{
      position: absolute;
      width: 500px;
      height: 300px;
    }
    .m-view .slide img{
      margin-right: -5px;
    }
    .m-view .prev,.m-view .next{
      position: absolute;
      top: 40%;
      font: 60px/60px Microsoft YaHei;
      color: #00BFFF;
    }
    .m-view .prev{
      left: 10px;
    }
    .m-view .next{
      right: 10px;
    }
    .m-view .pointer{
      position: absolute;
      bottom: 40px;
      left: 33%;
    }
    .m-view .pointer span{
      display: inline-block;/*水平排列*/
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin-right: 10px;
      background-color: #00FF00;
    }
    .m-view .pointer .on{/*点亮当前图片对应的圆圈*/
      background-color: #1E90FF;
    }
    img{
      object-fit: contain;
    }
  </style>

实现轮番

  var view=document.getElementsByClassName('m-view')[0];
    var slide=document.getElementsByClassName('slide')[0];
    var prev=document.getElementsByClassName('prev')[0];
    var next=document.getElementsByClassName('next')[0];
    var button=document.getElementsByClassName('button');
    var curIndex=0;//当前图片的索引位置
    var toggled=true;//是否正在切换，true表明切换已完成，此时才能切换
    /* Toggle函数实现切换一张图片的功能 */
    function Toggle () {
      var TIMER=50;//滑动一次所用的时间，它是setInterval的第二个参数
      var time=800;//每切换一张图片总共用的时长
      var times=time/TIMER;//每切换一张图片需滑动的次数
      var stepLenth=800/times;//每次滑动的步长
      var leftToggle=function () {
        var t1=times;
        function leftStep(){
          slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
          t1--;
          if (!t1) {
            clearInterval(interval);
            curIndex--;
            if (curIndex<0) {
              slide.style.left=parseInt(slide.style.left)-4000+"px";
              curIndex=4;
            };
            toggled=true;
          };
        };
        if (toggled==true) {
          toggled=false;
          button[curIndex].className="button";
          if (curIndex!=0) {
            button[curIndex-1].className="button on";
          }else{
            button[curIndex+4].className="button on";
          }
          var interval=setInterval(leftStep,TIMER);
        };
      };
      var rightToggle=function () {
        var t2=times;
        function leftStep(){
          slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
          t2--;
          if (!t2) {
            clearInterval(interval);
            curIndex++;
            if (curIndex>4) {
              slide.style.left=parseInt(slide.style.left)+4000+"px";
              curIndex=0;
            };
            toggled=true;
          };
        };
        if (toggled==true) {
          toggled=false;
          button[curIndex].className="button";
          if (curIndex!=4) {
            button[curIndex+1].className="button on";
          }else{
            button[curIndex-4].className="button on";
          };
          var interval=setInterval(leftStep,TIMER);
        };
      }
      this.leftToggle=leftToggle;//输出对外的接口
      this.rightToggle=rightToggle;
    };
    var toggle=new Toggle();
    prev.onclick=function () {
      toggle.leftToggle();
    };
    next.onclick=function () {
      toggle.rightToggle();
    };
    /* 点击圆圈跳转功能 */
    for (var i = 0; i < button.length; i++) {
      button[i].onclick=function () {
        var newIndex=parseInt(this.getAttribute("index"));
        if (newIndex!=curIndex) {
          var distance=-800*(newIndex-curIndex);
          slide.style.left=parseInt(slide.style.left)+distance+"px";
          button[curIndex].className="button";
          button[newIndex].className="button on";
          curIndex=newIndex;
        };
      };
    }
    /* 自动播放功能，鼠标移上去停止播放，移开再次播放 */
    var intervalo=setInterval(toggle.rightToggle,3000);
    view.onmouseover=function () {
      clearInterval(intervalo);
    }
    view.onmouseout=function () {
      intervalo=setInterval(toggle.rightToggle,3000);
    }

到此这篇关于JavaScript实现首页图片轮播图效果的文章就介绍到这了,更多相关js 轮播图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

利用AngularJs实现京东首页轮播图效果

先来看看效果图其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好. 那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换.在这里面就是在指令里操作dom元素,超级easy. 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo&quo
js实现支付倒计时返回首页

支付倒计时返回首页案例简介:在首页绑定一个按钮跳转到另一个页面,用到了简单的js语法,getElementsByTagName.location.href等. index.html 效果图如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
angularjs实现首页轮播图效果

本文实例为大家分享了angularjs轮播图展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href="http://libs.ba
js制作网站首页图片轮播特效代码

本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;
JavaScript实现首页图片轮播图效果

目录一.轮番图二.源码展示设置body 样式设置实现轮番一.轮番图效果展示: 轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片.这些图片统称为轮播图,这个模块叫做轮播模块. 二.源码展示设置body <body> <div class="m-view"> <div class="slide" style="left: -800px"> <img src="1
详解JavaScript实现动态的轮播图效果

利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之前(或之后)的一张图片 (2)在图片的下方有一排圆形按钮,每个按钮有各自的单击事件,点击任意一个按钮就切换到对应的图片 (3)不点击图片时,图片会自动播放,即有一个图片轮播效果首先可以写出大概的HTML代码为代码1: 代码1: <div id="container"> <
基于javascript实现移动端轮播图效果

本文实例为大家分享了js实现移动端轮播图效果的具体代码,供大家参考,具体内容如下插件使用: 1.zepto.js 2.touch.js 实现效果 html部分:   <div class="box"> <ul>  <li>
JavaScript实现简单的轮播图效果

轮播图是什么? 轮播图:在一个模块或者说窗口,通过电脑上鼠标点击.手机上手指滑动后,可以看到多张图片.这些图片就都是轮播图,这个模块就叫做轮播模块. 如何实现轮播图如何才能在js里面做成一个轮播图呢,比如下面这种的,可以自动生成图片对应的小圆点.点击左右箭头可以跳到上或下一张图片.每隔几秒自动轮播,还可以点击小小圆点去到指定的图片. HTML结构首先我们创建一个HTML页面,这个结构很简单,用一个大的div嵌套两个div,取个名字叫slider,上面的div用来装图片,取个名字叫slider
JavaScript实现带有子菜单和控件的slider轮播图效果

大家或许做过(照片轮播)无限滚动图片的项目,但是,如果使用普通的滚动,当到达最后一张时,便会滚动回第一张,这是一个非常不好的用户体验.下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果,具体实现代码如下所示: 实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // 4. 鼠标放到ol的li上切换图片 // 5.
JavaScript实现简单轮播图效果

本文实例为大家分享了js实现简单轮播图效果的具体代码,可以实现左右翻转,图片切换显示等效果,供大家参考,具体内容如下效果展示: 代码展示: <!doctype html> <html>  <title> <meta charset="utf-8"> </title> <b
JavaScript实现轮播图效果代码实例

这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML部分:  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link rel="styleshe
如何使用JavaScript实现无缝滚动自动播放轮播图效果

在一些项目开发中,我们经常需要使用到轮播图,但是没有深入学习的情况下做轮播图是非常困难的. 思路分成小问题来解决 1. 动态生成序号12345 页面有多少li(图片),就有多少序号 2. 点击序号.显示高亮.切换图片 2.1 给序号注册onclick事件 2.2 取消其他序号高亮显示,让当前点击的序号高亮显示 2.3 点击序号,动画的方式切换到当前点击的图片位置(设置自定义属性,记录当前索引,有了索引就可用动画进行移动) 3. 鼠标放到盒子上的时候显示左右箭头,移开时候隐藏 onmouseen
JavaScript实现轮播图效果

要求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理图片播放的同时,下面小圆圈模块跟随一起变化点击小圆圈,可以播放相应图片鼠标不经过轮播图,轮播图也会自动播放图片鼠标经过,轮播图模块,自动播放停止代码实现: autoPlay.html(复制并保存为html文件,打开即可见效果): <!DOCTYPE html> <html lang="en"> <head> <meta
基于JavaScript实现轮播图效果

本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下学习笔记(学校的课设),实现了左右切换,按指示点切换.按小图标切换和自动切换,但是还有某些功能没完善,如:切换到某张图片后,左右并没有切换到前后相应的图片. 先看实现效果: 代码仅供参考: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

JavaScript实现首页图片轮播图效果

目录

一、轮番图

二、源码展示

设置body

样式设置

实现轮番

相关推荐

随机推荐