发布时间:2022-09-06 14:30
回顾实现轮播图时,发现淘宝、小米和京东等首页使用的轮播图翻页均是用CSS3 tranlate3D实现的,这与之前使用绝对定位,更改left值或绝对定位,更改index值实现翻页效果的方法不同,于是尝试了一下。
提示:以下是本篇文章正文内容,下面案例可供参考
代码如下(示例用4个轮播图片):
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/banner.css">
<title>Documenttitle>
head>
<body>
<div class="banner">
<a href="#" class="btn btn-l"><a>
<a href="#" class="btn btn-r">>a>
<ul>
<li><a href="#"><img src="img/focus.jpg" alt="">a>li>
<li><a href="#"><img src="img/focus1.jpg" alt="">a>li>
<li><a href="#"><img src="img/focus2.jpg" alt="">a>li>
<li><a href="#"><img src="img/focus3.jpg" alt="">a>li>
ul>
<ol>
ol>
div>
<script src="js/banner.js">script>
body>
html>
盒子宽高固定,只够放一张图。超出部分隐藏overflow:hidden。
有人可能会说,盒子宽高=图片宽高,可是如何一行显示4张图片呢?设置ul的宽度为100%*图片数量,并且设置li标签浮动即可。
.banner {
position: relative;
width: 500px;
height: 300px;
z-index: 1;
overflow: hidden;
}
.banner ul {
width: 500%;
height: 100%;
transition: all .3s;
}
.banner ul li{
float: left;
}
设置translateX(当然可以用translate3D),每点击一次向左或向右翻页按钮,实现一次水平移动,移动距离为图片宽度。
设置过渡时间transition,达到过渡效果。
② 最后一张右翻页正常翻页到新的最后一页
③ 以过渡时间为0秒翻页到第一页
④从第一页正常翻页到第二页
提示:第一张向左翻页同理。
计算目标translateX值,公式:-(目标位置*图片宽度)。加过渡时间移动即可。
/**
* 轮播图移动
* @method imgMove
* @param {number} index 目标位置
* @param {number} moveTime 过渡时间
*/
function imgMove(moveTime) {
var distance = -index * bannerWidth; //计算translateX移动距离
banner_ul.style = 'transform:translateX(' + distance + 'px);' + 'transition:all ' + moveTime + 's'; //开始移动
// 排它思想
for (var i = 0; i < banner_ol.children.length; i++) {
banner_ol.children[i].className = '';
}
// 更改样式
if (index <= banner_ol.children.length - 1) {
banner_ol.children[index].className = 'current'
} else {
banner_ol.children[0].className = 'current'
}
}
使用setInterval函数,每time秒翻页即可(如向右翻页按钮click事件)。
// 自动播放-定时器
setInterval(function () {
time++;
if (time == 3) {
// 点击向右按钮
btn_r.click();
time = 0;
}
}, 1000)
// 为小圆圈按钮增加点击事件(事件委托)
// 为小圆圈按钮增加点击事件(事件委托)
banner_ol.addEventListener('click', function (e) {
// 防止点击事件点到ol其他空白区域
if (e.target.tagName == 'LI') {
time = 0;
// 排它思想
for (var i = 0; i < banner_ol.children.length; i++) {
banner_ol.children[i].className = '';
}
// 更改样式
e.target.className = 'current'
// 获取当前小圆圈按钮data-index
var btnIndex = e.target.dataset.index;
index = btnIndex;
imgMove(0.3)
}
})
完整代码:点击下载
FigDraw 7. SCI 文章绘图之折线图 (Lineplot)
UART和RS232/RS485的关系是什么?RS485在linux下的调试 ubuntu串口调试工具
[ CTF ]天机战队WriteUp-第六届”蓝帽杯“全国大学生网络安全技能大赛(初赛)
MySQL8.0.26安装配置教程(windows 64位)
vs2015搭建python 环境搭建_caffe搭建--vs2015+caffe+python3.5编译环境的搭建
php vue rbac,Vue+ThinkPHP5.1 实现基于角色控制权限的前后端分离后台管理系统
【计算讲谈社】第六讲|三星堆奇幻之旅:只有云计算才能带来的体验