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

JavaScript实现简易轮播图

Html代码块：

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();

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

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

css3图片旋转轮播_使用CSS和JavaScript构建3D旋转轮播
css3图片旋转轮播 A lot has been said on the use of traditional 2D carousels, for example this piece on Sma ...
JavaScript实现网页轮播图
轮播图也成为焦点图,是网页中比较常见的网页特效一.功能: 1.鼠标经过轮播图模块,左右两边的按钮显示,鼠标离开轮播图模块,就隐藏左右按钮. 2.点击右(左)侧按钮一次,图片往左(右)播放一张,一以此 ...
用HTML5和JavaScript做一个轮播图
说明: (1)代码中四个div内的图片 " images/14.jpg " , " images/15.jpg " , " images/16.jpg ...
用javascript做网页轮播图
文章目录网页轮播图: 功能需求: 动图展示: 代码分析: 主题结构部分: 样式设置: 交互效果: 引用缓动动画(图片滚动的效果) 网页轮播图: 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能 ...
php 更换轮播图片不显示不出来,layui 轮播图动态数据不显示问题
layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
【Axure原型分享】图片原型（上传、轮播、列表）
Hello,今天和大家分享原型里常用的图片模板,包括图片上传.图片轮播.图片列表--- [原型预览] https://axhub.im/ax9/ca3dd539f46dc856/#g=1 [原型下载] ...
画布之轮播图片HTML5,Axure原型设计之轮播图
轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或者移动端的原型都非常有帮助.现在讲讲如何使用axure8.0制作轮播图原型~~ 步骤一:(轮播图动态面板) ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
web网页设计实例作业 HTML5+CSS大作业——简单的个人图片网站(6页)
HTML5+CSS大作业--简单的个人图片网站(6页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...

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

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

最新文章

热门文章