前端：HTML+CSS+JavaScript实现轮播图2

1. 和之前版本的区别

之前发布的那篇关于轮播图的文章在这：前端：HTML+CSS+JavaScript实现轮播图，只能说存在问题吧！比如2、3实现效果是用了两个定时器实现的，虽然也达到了那种效果，但是从一些方面来说总有点繁琐吧！比如，在一定时间内图片移动像素的计算等。现在这个不需要计算，直接用一个定时器即可实现，我想说现在这个版本和各位在浏览器上看到那种效果实现原理应该差不多。

请添加图片描述
虽然没有给出相应的点击事件哈！

2. 实现原理

利用相对定位relative、绝对定位absolute、定时器、transition
结合relative、absolute来进行图片布局，用定时器来实现图片轮播间隔效果，用transition来实现每张图片移动过渡效果。
在这里插入图片描述
初始实现效果如上，这不符合我们想要的那种效果，这种是通过定时器每隔几秒变化每张图片的left的值的效果。这并不怎么美观，因为图片过渡效果并不符合我们的要求，但是如果显示的有多张图片，那么倒还不错，如下：
在这里插入图片描述

3. 针对上述的改进

在这里插入图片描述
就是把所有图片从左到右进行排列，外层用一个标签元素包裹，每隔一段时间变换外层的标签元素的left属性值。

3. 参考代码

这个是需要改进的代码哈！
main.html

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title></title><linkrel="stylesheet"href="./main.css"></head><body><divclass="main"></div></body><scripttype="text/javascript"src="main.js"></script></html>

main.css

*{padding: 0;margin: 0;}ul{list-style: none;}.main{width: 500px;height: 300px;margin: 0 auto;position: relative;}.dot{height: 10px;position: absolute;bottom: 20px;left: 50%;transform:translateX(-50%);}.dot span{height: 100%;float: left;width: 10px;border-radius: 50%;margin-left: 10px;cursor: pointer;}.dot span:first-child{margin-left: 0;}.red{background-color: red;}.white{background-color: white;}.main ul{position: relative;height: 100%;width: 100%;overflow-x: hidden;}.main ul li{position: absolute;top: 0;transition: all 0.3s;width: 100%;height: 100%;}.main ul li img{width: 100%;}

main.js

// 输入图片链接数组const img_arr =['https://i0.hdslb.com/bfs/banner/627984a9617a35c7e4366e0c74baf29ef3aa96ae.png@976w_550h_1c_!web-home-carousel-cover.avif','https://i0.hdslb.com/bfs/banner/3464f3b055107b2b54b9443e02c43448c0915866.png@976w_550h_1c_!web-home-carousel-cover.avif','https://i0.hdslb.com/bfs/banner/ff7d11c786ddd45c218696c3c6b19c69a71883d7.jpg@976w_550h_1c_!web-home-carousel-cover.avif','https://i0.hdslb.com/bfs/sycp/creative_img/202311/74214ce12c94ba104322e2be463ec6f7.jpg@976w_550h_1c_!web-home-carousel-cover.avif'];const mainEle = document.querySelector('.main');var _htmlStr ='';
img_arr.forEach(function(ele){
    _htmlStr +=`<li>
        <img src="${ele}">
    </li>`})var _htmlStr2 ='';for(let i=0;i<img_arr.length;i++){
    _htmlStr2 +='<span></span>'}var _htmlStr2 =`<div class="dot">${_htmlStr2}</div>`;
_htmlStr =`<ul>${_htmlStr}</ul>${_htmlStr2}`;

mainEle.innerHTML = _htmlStr;const img_width =500;const elements = document.querySelectorAll('.main ul li');const elements2 = document.querySelectorAll('.dot span');
elements.forEach(function(ele,index){
    ele.style.left = index * img_width +'px';})

elements2.forEach(function(ele,index){if(index ==0){
        ele.className ='red';}else{
        ele.className ='white';}})functionleft(){
    elements.forEach(function(ele,index){let left_v =parseFloat(ele.style.left);if(left_v - img_width <0){
            ele.style.left =(elements.length -1)* img_width +'px';}else{
            ele.style.left = left_v - img_width +'px';}if(left_v - img_width ==0){
            elements2[index].className ='red';}else{
            elements2[index].className ='white';}})}var timer =setInterval(left,2000);

这个是改进版本
main.html

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title></title><linkrel="stylesheet"href="./main.css"></head><body><divclass="main"><divclass="pre_ul"id="main"><ul><li><imgsrc="https://i1.hdslb.com/bfs/archive/da52b26129a84aa316383d53e596d3f89c708294.jpg@672w_378h_1c_!web-home-common-cover.avif"alt=""></li><li><imgsrc="https://i0.hdslb.com/bfs/archive/6df10d7e0834f8511ea620dbfe6bfc7b1eabdab2.jpg@672w_378h_1c_!web-home-common-cover.avif"alt=""></li><li><imgsrc="https://i0.hdslb.com/bfs/archive/47338bc6056b6bbc906155590c6e201ae5dffee8.jpg@672w_378h_1c_!web-home-common-cover.avif"alt=""></li></ul></div><divclass="dot"id="main"><spanclass="red"></span><spanclass="white"></span><spanclass="white"></span></div></div></body><scripttype="text/javascript"src="main.js"></script></html>

main.css

*{margin: 0;padding: 0;}ul{list-style: none;}.main{width: 500px;height: 300px;position: relative;margin: 0 auto;overflow-x: hidden;}.main .dot{position: absolute;bottom: 8%;left: 50%;transform:translateX(-50%);height: 12px;z-index: 2;}.dot span{float: left;height: 100%;width: 12px;border-radius: 50%;cursor: pointer;margin-left: 8px;}.dot span:first-child{margin-left: 0;}.white{background-color: white;}.red{background-color: red;}.main .pre_ul{height: 100%;position: absolute;top: 0;left: 0;transition: all 0.5s;z-index: 1;}.main .pre_ul ul{width: 100%;height: 100%;position: relative;overflow-x: hidden;}.main .pre_ul ul li{height: 100%;position: absolute;top: 0;left: 0;}.main .pre_ul ul li img{width: 100%;}

main.js

const img_width =500;// 图片最大宽度const eles = document.querySelectorAll('.pre_ul ul li');const pre_ul_ele = document.querySelector('.pre_ul');const dots = document.querySelectorAll('.dot span');const n = eles.length;
pre_ul_ele.style.left =0;
pre_ul_ele.style.width = n * img_width +'px';
eles.forEach(function(ele,index){
    ele.style.width = img_width +'px';
    ele.style.left = index * img_width +'px';})functionclear_red(){
    dots.forEach(function(ele,index){
        ele.className ='white';})}var start_index =0;functionleft(){
    pre_ul_ele.style.transition ='all 0.5s';let left_v =parseInt(pre_ul_ele.style.left);
    pre_ul_ele.style.left = left_v -500+'px';clear_red();
    start_index =(start_index+1)%n;
    dots[start_index].className ='red';if(left_v -500==-n*img_width){
        pre_ul_ele.style.left =0;}}var timer1 =setInterval(left,2000);

注：上述代码没有给出点击按钮变化图片特效，想实现的读者可以去看看上述第一个关于实现轮播图的版本哈！

标签：前端 html css

本文转载自: https://blog.csdn.net/qq_45404396/article/details/134883291
版权归原作者 坚持不懈的大白 所有，如有侵权，请联系我们删除。

前端：HTML+CSS+JavaScript实现轮播图2

前端：HTML+CSS+JavaScript实现轮播图2

1. 和之前版本的区别

2. 实现原理

3. 针对上述的改进

3. 参考代码

发表评论

“前端：HTML+CSS+JavaScript实现轮播图2”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航