javascript+css实现图片轮播-走马灯式

该图片轮播器主要是通过改变“图片容器”（即下面html代码中的div class=“innerBox”）的margin-left属性值来实现的。

实现效果如下：

实现代码如下：

html部分：

<div class="photoDisplayBox"><div class="innerBox"><ul><li><a href="#"><img src="../static/images/index.jpg"></a></li><li><a href="#"><img src="../static/images/loginbackground.jpg"></a></li><li><a href="#"><img src="../static/images/love2.jpg"></a></li><li><a href="#"><img src="../static/images/color1.jpg"></a></li><li><a href="#"><img src="../static/images/color2.jpg"></a></li></ul></div><div class="selector"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></div>

css代码如下：

.photoDisplayBox {position: relative;width: 100%;height: 600px;margin: 0 auto;overflow: hidden;
}.photoDisplayBox .innerBox {position: absolute;height: 100%;width: 500%;}.innerBox ul {list-style: none;width: 100%;height: 100%;
}.innerBox li {display: inline-block;float: left;width: 20%;height: 100%;
}.innerBox li img {width: 100%;height: 100%;
}.photoDisplayBox .selector {position: absolute;width: 50%;bottom: 10px;margin-left: 25%;
}.selector .item {height: 10px;vertical-align: center;display: block;float: left;margin: 0 1%;width: 18%;cursor: pointer;background-color: white;
}

javascript代码如下：

let photoDisplayBoxWidth = document.querySelector(".photoDisplayBox").clientWidth;/*图片选择器的宽度*/
let selectorItems = document.querySelectorAll(".photoDisplayBox .selector .item");/*图片轮播器的底部选择项*/
let selectorInnerBox = document.querySelector(".photoDisplayBox .innerBox");/*图片容器*/
let selectorPhotos = document.querySelectorAll(".photoDisplayBox .innerBox a");/*所有图片的父标签*/
let currentItem = 0;/*记录当前是第几张图片*/
let currentMarginLeftWidth = 0;/*记录当前marginLeft值*/
let timeout = 2000;/*自动轮播时长*/let autoChangeTimer = setInterval(autoChangePhoto, timeout);/*两秒钟改变一次*/
let detailChangeTimer = null;changeItemColor();//默认第一个图片选择器为选中/*自动轮播*/
function autoChangePhoto() {if (currentItem % 5 === 0) {//第一张图片直接跳转，不实现轮播currentItem = 0;currentMarginLeftWidth = 0;changeItemColor();selectorInnerBox.style.marginLeft = "0px";//直接设置margin-left的值为0px,即直接跳转到第一张图片} else {changeInnerBoxMarginLeft();//调用“走马灯式”过渡到下一张图片的方法}currentItem++;//每次自动轮播后当前图片选择项+1，用来进行下一次跳转
}/*手动轮播*/
function selfChangePhoto() {if (currentMarginLeftWidth === (-currentItem * photoDisplayBoxWidth)) {//如果选择项没有改变，则依旧显示对应的选择项图片selectorInnerBox.style.marginLeft = (-currentItem * photoDisplayBoxWidth) + "px";} else {changeInnerBoxMarginLeft();//跳转到对应的图片}
}/*核心：通过定时器改变"margin-left"属性值实现走马灯式图片轮播*/
function changeInnerBoxMarginLeft() {clearInterval(autoChangeTimer);//每次进行图片跳转时，先关闭自动轮播定时器，待跳转结束后再开启定时器。changeItemColor();//跳转到对应的图片选择题let newMarginLeftWidth = -currentItem * photoDisplayBoxWidth;//记录需要跳转到图片选择项的margin-left值let distant = currentMarginLeftWidth - newMarginLeftWidth;//记录当前的margin-left值到需要跳转的margin-left值的差值let index = 0;index = (distant / 20);let n = 0;detailChangeTimer = setInterval(() => {//模拟“走马灯”轮播图片计时器n++;let nowWidth = currentMarginLeftWidth - (index * n);//每次“走马灯”计时器需要改变margin-left的大小selectorInnerBox.style.marginLeft = nowWidth + "px";//更新每次轮播的margin-left值实现走马灯if (n >= 20) {//一次轮播currentMarginLeftWidth = newMarginLeftWidth;//重新记录当前margin-left值clearInterval(detailChangeTimer);//清除走马灯定时器autoChangeTimer = setInterval(autoChangePhoto, timeout);//开启自动轮播计时器}}, 1)
}/*鼠标移入选择器后，停止自动轮播*/
for (let i = 0; i < selectorItems.length; i++) {selectorItems[i].onmouseover = () => {/*移入停止自动轮播*/currentItem = i;clearInterval(detailChangeTimer);selfChangePhoto();clearInterval(autoChangeTimer);}selectorItems[i].onmouseout = () => {/*移除开启自动轮播*/clearInterval(autoChangeTimer);clearInterval(detailChangeTimer);autoChangeTimer = setInterval(autoChangePhoto, timeout);}
}for (let i = 0; i < selectorPhotos.length; i++) {selectorPhotos[i].onmouseover = function () {/*鼠标移入图片，停止自动轮播*/clearInterval(autoChangeTimer);clearInterval(detailChangeTimer);}selectorPhotos[i].onmouseout = function () {/*移出开启自动轮播*/clearInterval(autoChangeTimer);autoChangeTimer = setInterval(autoChangePhoto, timeout);}
}function changeItemColor() {/*被选中的选择项为绿色*/for (let i = 0; i < selectorItems.length; i++) {selectorItems[i].style.background = "white";}selectorItems[currentItem].style.background = "green";
}

前端小白，有不足，望指教。
2021.10.7

javascript+css实现走马灯图片轮播器相关推荐

图片轮播器——javascript
在网页中,图片轮播器用得比较多. 效果图: <!DOCTYPE html> <html><head><meta http-equiv="Conten ...
十五分钟用JavaScript基础写一个图片轮播效果
十五分钟用JavaScript基础写一个图片轮播效果前言这次也是一个适合JavaScript初学者的小练手,用JavaScript的基本知识去写一个轮播图,其实轮播图有很多方法去实现,像用一些框架 ...
图片轮播器，relativelayout，外加textview小结
十多个textview,外加三个relativelayout,心烦的是图片轮播器,就环境老玄了,写了三个图片轮播器才成功,直接来代码吧,gogogo. Activity_main.xml <?x ...
IOS开发基础之图片轮播器-12
IOS开发基础之图片轮播器-12 核心代码 // // ViewController.m // 12-图片轮播器 // // Created by 鲁军 on 2021/2/2. //#import ...
图片轮播器(swift)
如何实现一个无限循环,无缝衔接的图片轮播器自己实现一次以后就不用使用轮播器的框架了能用代码解决的问题就不在这里瞎BB了 O(∩_∩)O 首先先在Carousel文件件夹创建以下几个文件 Caro ...
swift：创建滚动视图的图片轮播器
用swift创建图片轮播器和用OC创建的方式是一样的,都主要用到UIScrollView和UIImageview这两个控件,有几张图片,就将滚动视图的内容区域大小设置为每一张图片的大小乘以张数即可.然 ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
Android高级图片滚动控件，编写3D版的图片轮播器
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...
html垂直居中走马灯,史上最全解析：4种方法制作-PPT跑马灯/走马灯图片轮播动画...
本期要点:全面解析不同场景下的跑马灯PPT图片动画技巧概要:动画精准衔接路径起点终点位置插件提高效率图文编辑:幻云PPT设计大雄董军比如我们今天要讲的跑马灯动画跑马灯动画其实是根据咱们传 ...

javascript+css实现走马灯图片轮播器

javascript+css实现图片轮播-走马灯式

javascript+css实现走马灯图片轮播器相关推荐

最新文章

热门文章