简单html实现图片轮播,JavaScript实现简易轮播图

小鱼儿 2022-10-06 09:47 268阅读 0赞

JavaScript实现简易轮播图

Html代码块：

![1.jpg][]

![2.jpg][1.jpg]

![3.jpg][1.jpg]

![4.jpg][1.jpg]

![5.jpg][1.jpg]

![1.jpg][]

CSS代码：

\* \{

margin: 0;

padding: 0;

\}

.container \{

overflow-x: hidden;

\}

.box \{

height: 260px;

display: flex;

left: 0;

position: relative;

\}

.box img \{

flex: 1;

\}

我这里使用的是弹性布局，更简洁的将图片排列，不会像float和inline-block一些问题。

JS代码：

var imgList = document.getElementsByTagName("img");//获取所有图片NodeList一个集合

var imgLength = imgList.length;//拿到集合的长度大小

var container = document.querySelector(".container");

var box = document.querySelector(".box");

var width = 360;//定义一个宽度,原本想直接获取但是发现弹性布局默认会让宽度为浏览器宽度

var timer;//设置一个全局变量的计时器

var index = 1;//索引

container.style.width = width + 'px';//设置容器的宽度

box.style.width = width \* imgLength + 'px';//动态设置盒子的宽度

function startImg() \{

timer = setInterval(function() \{

if (index <= 5) \{

box.style.left = box.offsetLeft - width + "px";

box.style.transition = ".4s";

if(index == 5)\{

//当index==5时候这一遍代码都会执行,所以这里单独设置当index==5时候,setTimeOut等待动画结束后触发,从而衔接.

setTimeout(function()\{

box.style.left = "0px";

box.style.transition = "0s";

index = 1;

\},400)\}

\}

index ++;

\}, 3000);

\}

//为容器设置鼠标移动事件

container.addEventListener("mousemove",function()\{

if(timer)\{

clearInterval(timer);

\}

\})

//为容器设置鼠标移出事件

container.addEventListener("mouseleave",function()\{

startImg();

\})

//默认开始执行函数

startImg();

在宽度动态获取这里做的不够好，如果有小伙伴给我提个意见可好。谢谢大家欣赏！

[1.jpg]:

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 261 阅读

相关 Html图片轮播遍历,javaScript 简单轮播图实现

Document .crousel \{ width:1500px; height: 500px; margin: auto; position: relative

比眉伴天荒/ 2022年10月09日 05:54/ 0 赞/ 167 阅读

相关 html script轮播图,javascript简单轮播图

\\轮播图实现原理：通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。\\![bV

ゞ浴缸里的玫瑰/ 2022年10月06日 13:57/ 0 赞/ 217 阅读

相关 html简单图片轮播居中,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][] ![s3.jpg][] 在这个html的

蔚落/ 2022年10月06日 10:52/ 0 赞/ 333 阅读

相关 html图片翻转轮播,JavaScript实现旋转轮播图

最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图： ![95ec81ffb6f91c49

一时失言乱红尘/ 2022年10月06日 09:52/ 0 赞/ 386 阅读

相关简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 269 阅读

相关 html 图片轮播实例,简单实现轮播图效果的实例

一、要点： 1.页面加载时，图片重合，叠在一起\[绝对定位\]; 2.第一张显示，其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去，显示

- 日理万妓/ 2022年10月06日 07:56/ 0 赞/ 207 阅读

相关 html原生js实现图片轮播,原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器，取代body，这样

冷不防/ 2022年10月06日 07:52/ 0 赞/ 231 阅读

相关 html轮播图用什么语言,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][s1.jpg] ![s3.jpg

不念不忘少年蓝@/ 2022年10月05日 12:46/ 0 赞/ 159 阅读

相关 JavaScript实现简易轮播图

JavaScript实现简易轮播图 -------------------- Html代码块： <div class="container"> <d

- 日理万妓/ 2022年04月10日 08:28/ 0 赞/ 311 阅读