锐客网

  1. 首页 > it技术 > >

JS实现轮播图效果的3种简单方法

本文实例为大家分享了3种方法实现JS轮播图效果的具体代码，供大家参考，具体内容如下
Js实现轮播图01 实现思路
这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下：
实现效果
JS实现轮播图效果的3种简单方法
文章图片

轮播图实现01 - 锐客网.lunbo{width: 900px; height: 400px; margin:100px auto; }.lunbo img{width: 100%; height:100%; } JS实现轮播图效果的3种简单方法
文章图片

Js实现轮播图02 实现思路
这可能是轮播图最简单点的实现之一，通过改变background的图片链接来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变background属性里面的url（）图片链接的名字来实现切换效果。代码如下：
实现效果
JS实现轮播图效果的3种简单方法
文章图片

轮播图实现02 - 锐客网body{margin: 0; padding: 0; }.lunbo{width:100%; height:720px; background-image: url(pic/img1.jpeg); /*背景图片*/background-size:100% 100%; }

Js实现轮播图03 本轮播图的实现，首先通过CSS代码将全部存放图片的li标签通过opacity属性设置为0来隐藏不显示， 通过js代码使用定时器不断调用类active突出显示li标签，同时隐藏兄弟li标签，再通过index++来实现切换循环显示的效果，当点击两边的按钮时，调用index++所在的方法实现切换的效果，没有复杂的算法，一点点基础一看代码就会学会，请大家参考。
实现效果
JS实现轮播图效果的3种简单方法
文章图片

HTML代码
Js实现轮播图 - 锐客网
  • JS实现轮播图效果的3种简单方法
    文章图片
  • JS实现轮播图效果的3种简单方法
    文章图片
  • JS实现轮播图效果的3种简单方法
    文章图片
  • JS实现轮播图效果的3种简单方法
    文章图片
  • JS实现轮播图效果的3种简单方法
    文章图片
<>

CSS代码
*{ margin: 0; padding: 0; }a{ list-style: none; }li{ list-style: none; }.lunbo{ width: 100%; }.content{ width: 800px; height: 300px; margin: 20px auto; position: relative; }#item{ width: 100%; height: 100%; }.item{ position: absolute; opacity: 0; transition: all 1s; }.item.active{ opacity:1; }img{ width: 100%; }#btn-left{ width: 30px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left:5px; z-index: 10; /*始终显示在图片的上层*/ position: absolute; left: 0; top: 50%; transform: translateY(-60%); /*使按钮向上偏移居中对齐*/ cursor: pointer; opacity: 0; /*平时隐藏*/}.lunbo:hover #btn-left{ /*鼠标滑入，显示图标*/ opacity: 1; }#btn-right{ width: 26px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left: 5px; z-index: 10; position: absolute; right: 0; top: 50%; cursor: pointer; opacity: 0; transform: translateY(-60%); }.lunbo:hover #btn-right{ opacity: 1; }#circle{ height: 20px; display: flex; position: absolute; bottom: 35px; right: 25px; }.circle{ width: 10px; height: 10px; border-radius: 10px; border: 2px solid white; background: rgba(0,0,0,0.4); cursor: pointer; margin: 5px; }.white{ background-color: #FFFFFF; }

JS代码
window.onload=function(){var items=document.getElementsByClassName("item"); var circles=document.getElementsByClassName("circle"); var leftBtn=document.getElementById("btn-left"); var rightBtn=document.getElementById("btn-right"); var content=document.querySelector('.content'); var index=0; var timer=null; //清除classvar clearclass=function(){ for(let i=0; i
代码可能写的不是很好，存在很多不足，欢迎大家指点批评，我会努力去改正，有疑问欢迎留言，我会尽力去解答，谢谢大家花宝贵的时间来阅读这篇文章。
【JS实现轮播图效果的3种简单方法】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    推荐阅读


    上一篇：深入理解Java设计模式之解释器模式

    下一篇：vue+ts实现元素鼠标拖动效果