原生JS无缝滑动轮播图

网络编程 2024/12/25 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 ul,div,img{
 margin: 0;
 padding: 0;
 list-style: none;
 vertical-align: top;
 }
 #banner{
  width: 400px;
  height: 300px;
  margin:50px auto; 
  position: relative;
  overflow: hidden;
 }
 #banner ul{
  width: 400px;
  position: absolute;
 }
 #banner li img{
  width: 400px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-size: 40px;
 }
 #dot{
  height: 20px;
  position: absolute;
  left: calc(50% - 80px);
  bottom: 20px;
 }
 #dot i{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  float: left;
  margin: 0 10px;
  cursor: pointer;
 }
 #dot i.current{
  background: rgb(161,1,34);
 }
 #pages{
  height: 60px;
  width:100%;
  position: absolute;
  top: calc(50% - 30px);
  cursor: pointer;
 }
  #pages i{
  width:30px;
  height: 60px;
  background: rgb(0,0,0);
  font-size: 22px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  opacity: 0.5;
  font-style: normal;
  position: absolute;
  user-select: none;
 }
  #pages i.gt{
  right:0;
  top: 0;
  font-size: 21px;
 }
  #pages i:hover{
  opacity: 0.7;
 }
 </style>
</head>
<body>
 <div id="banner">
 <ul id="ul">
  <li><img src="/UploadFiles/2021-04-02/imgs (1).jpg">

更多关于轮播图效果的专题，请点击下方链接查看学习
javascript图片轮播效果汇总
jquery图片轮播效果汇总
Bootstrap轮播特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js无缝滑动轮播图,js滑动轮播图,js轮播图