HTML图片轮播 |
您所在的位置：网站首页 › banner图图片链接 › HTML图片轮播 |
HTML图片轮播
|
一、简介：
之前我也写过图片轮播的 文章，写的不是很详细只有效果图片展示及相应的代码展示，而且js代码也写得很乱。这一次我又重新学习了一遍图片轮播，并对它进行了代码整理让你们更容易理解 二、文件目录：
第一种： 使用background: url()设置标签背景的方式，通过js对css样式进行修改实现图片轮播 Title #box{ width: 950px; height: 290px; margin: 0 auto; background: url("images/banner_01.jpg") no-repeat; background-size:contain; transition: all 1s; position: relative; } .icon_left{ position: absolute; width: 50px; height: 50px; top: 45%; left:20px; } .icon_right{ position: absolute; width: 50px; height: 50px; top: 45%; right:20px; } var i=1;//表示当前图片所在位置 var time = setTimeout("showImg()", 2000);//启动时钟事件刷新时间 1000==1秒 function icon_left(){ clearTimeout(time)//清楚时钟事件 if(iimg{ width: 1530px; height: 470px; } .on{ width: 10px; height: 10px; border-radius: 100%; background-color: gainsboro; margin-left: 20px; } .banner-imgBox-div{ width: 400px; position: absolute; bottom: 20px; left: 40%; display: flex; } .on2{ background-color: red; } .banner-imgBox-left{ position: absolute; left: 20px; top:48%; width: 48px; height: 48px; } .banner-imgBox-right{ position: absolute; right: 20px; top:48%; width: 48px; height: 48px; margin-right: 0; }
var time=2000;
let content = document.querySelector('.banner-imgBox2');
let switchBtn = document.querySelector('.banner-imgBox-div');
switchBtn.children[0].classList.add('on2');
let index=0;
let x=0;
function marginLeft(right) {
if(right){
switchBtn.children[index].classList.remove('on2');
if(index==switchBtn.children.length-1){
index=0;
content.innerHTML+=content.innerHTML;
x++;
}else {
index++;
x++;
}
switchBtn.children[index].classList.add('on2');
content.style.marginLeft=x*-1530+"px"
}else{
switchBtn.children[index].classList.remove('on2');
if(index==0){
index=switchBtn.children.length-1;
if(x==0){
x=0
}else{
x--;
}
}else {
index--;
x--;
}
switchBtn.children[index].classList.add('on2');
content.style.marginLeft=x*-1530+"px"
}
}
var interval = setInterval(() => {
marginLeft(true)
}, time);
let container = document.querySelector('.banner-imgBox');
// 鼠标经过时清除定时器
container.onmouseover = function () {
clearInterval(interval);
}
// 鼠标移开时设置定时器
container.onmouseout = function () {
// 先清除定时器
clearInterval(interval);
// 往右滑动并开启定时器
// marginLeft(true)
interval = setInterval(() => {
marginLeft(true)
}, time);
}
五、效果图：
|
【本文地址】
今日新闻 |
推荐新闻 |