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; }![]() ![]() ![]() ![]() ![]() ![]() ![]() |
CopyRight 2018-2019 实验室设备网 版权所有 |