基于CSS3、JavaScript实现轮播图翻页，自动播放 |
您所在的位置：网站首页 › html怎么做滑动图片 › 基于CSS3、JavaScript实现轮播图翻页，自动播放 |
基于CSS3、JavaScript实现轮播图翻页，自动播放
|
前言
回顾实现轮播图时，发现淘宝、小米和京东等首页使用的轮播图翻页均是用CSS3 tranlate3D实现的，这与之前使用绝对定位，更改left值或绝对定位，更改index值实现翻页效果的方法不同，于是尝试了一下。 提示：以下是本篇文章正文内容，下面案例可供参考 一、效果图
代码如下（示例用4个轮播图片）： DOCTYPE html> Document ; ; 三、主要原理 1. 单图显示原理盒子宽高固定，只够放一张图。超出部分隐藏overflow:hidden。
设置translateX（当然可以用translate3D），每点击一次向左或向右翻页按钮，实现一次水平移动，移动距离为图片宽度。 2.2 过渡设置过渡时间transition，达到过渡效果。 2.3 最后一张图片“右翻页”① 先将第一张图片复制到轮播图末尾 ② 最后一张右翻页正常翻页到新的最后一页 计算目标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[index].className = 'current' } else { banner_ol.children[0].className = 'current' } } 4. 自动播放原理使用setInterval函数，每time秒翻页即可（如向右翻页按钮click事件）。 // 自动播放-定时器 setInterval(function () { time++; if (time == 3) { // 点击向右按钮 btn_r.click(); time = 0; } }, 1000) 注意事项 图片移动可只使用同一个函数imgMove，同一个当前位置变量index。当发生向左右翻页或小圆圈按钮翻多页，设置index增量即可。小圆圈按钮应与实际图片数量保持相同的数量。为小圆圈按钮增添点击事件可以使用事件委托。 // 为小圆圈按钮增加点击事件（事件委托） // 为小圆圈按钮增加点击事件（事件委托） banner_ol.addEventListener('click', function (e) { // 防止点击事件点到ol其他空白区域 if (e.target.tagName == 'LI') { time = 0; // 排它思想 for (var i = 0; i |
有人可能会说，盒子宽高=图片宽高，可是如何一行显示4张图片呢？设置ul的宽度为100%*图片数量，并且设置li标签浮动即可。
③ 以过渡时间为0秒翻页到第一页 
④从第一页正常翻页到第二页 
提示：第一张向左翻页同理。【本文地址】
今日新闻 |
推荐新闻 |