JavaScript 自适应轮播图
代码
话不多说，先上代码，方便复制粘贴。演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
img{
display: block;
width: 100%;
height: 100%;
}
.content{
width: 1080px;
margin: 100px auto;
}
.banner{
position: relative;
overflow: hidden;
}
.banner>div{
width: 790px;
position: absolute;
transform: translateX(140px) scale(0.8);
transform-origin: center bottom;
transition: .4s;
}
.banner .first_item{
z-index: 10;
transform: translateX(140px) scale(1);
}
.banner .second_item{
z-index: 1;
transform: translateX(540px) scale(0.8);
}
.banner .last_item{
z-index: 1;
transform: translateX(-250px) scale(0.8);
}
/* 左右切换按钮 */
.btn{
width: 40px;
height: 40px;
position: absolute;
top: 60%;
margin-top: -20px;
background-color: rgba(0, 0, 0, 0.2);
z-index: 1;
text-align: center;
color: rgba(255, 255, 255, 0.6);
line-height: 40px;
font-size: 20px;
font-style: normal;
cursor: pointer;
user-select: none;
}
.btn_right{
right: 0;
}
.btn:hover{
background-color: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 1);
}
/* banner状态点 */
.track{
display: flex;
justify-content: center;
overflow: hidden;
}
.track>span{
display: block;
width: 25px;
height: 4px;
background-color: #ccc;
float: left;
margin: 10px 6px;
transition: .4s;
}
.track .focus{
background-color: #c60023;
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="content">
<div class="banner">
<div class="first_item">
<a href="#"><img src="img/banner/banner1.jpg" alt=""></a>
</div>
<div class="second_item">
<a href="#"><img src="img/banner/banner2.jpg" alt=""></a>
</div>
<div class="">
<a href="#"><img src="img/banner/banner3.jpg" alt=""></a>
</div>
<div class="">
<a href="#"><img src="img/banner/banner4.jpg" alt=""></a>
</div>
<div class="last_item">
<a href="#"><img src="img/banner/banner5.jpg" alt=""></a>
</div>
<!-- 这里切换按钮用大于小于号代替，如果自己有icon图标自行替换 -->
<i class="btn_left btn"><</i>
<i class="btn_right btn">></i>
</div>
<div class="track"></div>
</div>
<script>
window.onload = function(){
// 获取节点，变量声明
var banner = document.querySelector('.banner'),
btn_left = document.querySelector('.btn_left'),
btn_right = document.querySelector('.btn_right'),
track = document.querySelector('.track'),
list_items = banner.querySelectorAll('div'),
listArr = [],
index = 0,
trackHtml = '',
tracks,
timer;
// 初始化
function init(){
// 根据图片高度自适应
banner.style.height = list_items[0].offsetHeight + 'px';
// 生成track坐标点元素
for(var i = 0, len = list_items.length; i < len; i ++){
listArr.push(list_items[i].className)
trackHtml += '<span></span>'
}
track.innerHTML = trackHtml;
// 获取坐标点元素
tracks = track.querySelectorAll('span');
tracks[0].setAttribute('class', 'focus');
play();
}
// 切换动画 target=1 下一张 target=-1 上一张
function move(target){
list_items.forEach((item, i) => {
item.setAttribute('class', listArr[i])
});
// 计算index下标值
index = (index + listArr.length + target) % listArr.length;
tracks.forEach((item, i) => {
item.setAttribute('class', '')
});
tracks[index].setAttribute('class', 'focus')
}
// 下一张
function next(){
listArr.unshift(listArr[listArr.length - 1]);
listArr.pop();
move(1)
}
// 上一张
function previous(){
listArr.push(listArr[0]);
listArr.shift();
move(-1)
}
// 自动轮播
function play(){
timer = setInterval(next, 4000);
}
// 下一张绑定点击事件
btn_right.onclick = function(){
clearInterval(timer);
next();
play();
};
// 上一张绑定点击事件
btn_left.onclick = function(){
clearInterval(timer);
previous();
play();
};
// track绑定点击事件
track.addEventListener('click', function(e){
var e = e || window.e,
//标准浏览器用ev.target，IE浏览器用event.srcElement
target = e.target || e.srcElement,
n = 0;
if(target.className !== 'track'){
clearInterval(timer);
for(var i = 0, len = tracks.length; i < len; i ++){
tracks[i].setAttribute('class', '')
if(tracks[i] === target){
n = i;
tracks[i].setAttribute('class', 'focus');
}
}
// 向右滑动
if(n-index >= 0){
for(var i = 0; i < n-index; i ++){
setTimeout(next, 160*i);
}
}
// 向左滑动
else{
for(var i = 0; i < index-n; i ++){
setTimeout(previous, 160*i);
}
}
play();
}
})
init();
}
</script>
</body>
</html>
前言
这里是我按照自己的想法写的一个原生javascript轮播图，给初学者提供一个思路。写轮播图的方法有很多，这里只是其中一种，最重要的还是能学有所得，举一反三。
效果
这里提供一张轮播图图片
思路
大部分轮播图都是通过banner左右移动的，这里用的是固定css布局，通过改变class来实现轮播的效果。
注意
本篇文章仅供学习使用，并未做浏览器兼容处理，建议使用谷歌或者第三方最新浏览器，对于IE这个神经病，不用也罢。
说明
这里简要说明一些问题，其实代码里大部分都注释过了。
这里的css样式部分，选择器一定要加上
.banner，否则会有权重问题导致无法覆盖上面的css样式。.banner .first_item{
z-index: 10;
transform: translateX(140px) scale(1);
}
.banner .second_item{
z-index: 1;
transform: translateX(540px) scale(0.8);
}
.banner .last_item{
z-index: 1;
transform: translateX(-250px) scale(0.8);
}
方法一的状态点用的是flex布局做的自适应，也可以使用方法二，但是兼容性貌似还不如方法一，win10自带的浏览器都不支持，索性就用了flex布局。
//方法一
.track{
display: flex;
justify-content: center;
overflow: hidden;
}
//方法二
.track{
width: fit-content;
margin: auto;
overflow: hidden;
}
这里注意要保留前两个和最后一个div的class名（也就是
first_item、second_item、last_item），中间可以自适应随意添加图片，最少三张。有人可能会有疑惑，为什么不自动生成class名？这样就可以随意添加了，答案是：懒得写了，如果自己感兴趣，可以自己去改造。<div class="first_item">
<a href="#"><img src="img/banner/banner1.jpg" alt=""></a>
</div>
<div class="second_item">
<a href="#"><img src="img/banner/banner2.jpg" alt=""></a>
</div>
<div class="">
<a href="#"><img src="img/banner/banner3.jpg" alt=""></a>
</div>
<div class="">
<a href="#"><img src="img/banner/banner4.jpg" alt=""></a>
</div>
<div class="last_item">
<a href="#"><img src="img/banner/banner5.jpg" alt=""></a>
</div>
track绑定点击事件函数使用了事件委托，其中的这种切换方式我觉得是最和谐的，也可以用其他的方法。
//向右滑动
if(n-index >= 0){
for(var i = 0; i < n-index; i ++){
setTimeout(next, 160*i);
}
}
//向左滑动
else{
for(var i = 0; i < index-n; i ++){
setTimeout(previous, 160*i);
}
}
play();
JavaScript 自适应轮播图的更多相关文章
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- 原生javascript焦点轮播图
刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- 【JavaScript】轮播图
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- 前端-SuperSlide自动分页控制、自适应轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript简单轮播图
**轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...
- javaScript实现轮播图
一.需求分析 在首页完成对轮播图的效果实现,完成自动切换图片的功能. 二.技术分析 获取元素 document.getElementById(“id 名称”) 事件(onload) 定时操作: set ...
- 原生JavaScript实现轮播图
---恢复内容开始--- 实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...
随机推荐
- Go语言实现：【剑指offer】跳台阶
该题目来源于牛客网<剑指offer>专题. 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 1阶:共1种跳法: 2阶 ...
- liunx 上守护进程的设置
*/2 * * * * root /data/autojobsh/auto_ck_pms_10250.sh */2 * * * * root /data/autojobsh/auto_ck_ipms_ ...
- 安装python 第三方库（whl,py格式）
注意:在python环境中输入 help('modules') 可以列出所有已经安装的模块 1.windows平台下: 1..1安装whl文件 安装 ...
- Eclipse 无法引用到Maven 解决方法
问题描述:打开Eclipse进入java EE视图下,发现原有的Maven Dependencies目录不存在,显示的是org.maven.ide.eclipse.MAVEN2_CLASSPATH_C ...
- 珠峰-node
##### 文件流的读写. ##### 文件流对pipe的封装. ####
- UWP App国际化的两种实现
开发App,我们都会标配简体中文和英文两种语言.至于你加多少种,取决于你的客户市场.无论如何,英语是必不可少的. UWP平台里面,微软也提供了一种默认的国际化方案,即修改Resources.resw资 ...
- Python学习小记(1)---import小记
在这种目录结构下,import fibo会实际导入fibo文件夹这个module λ tree /F 卷 Programs 的文件夹 PATH 列表 卷序列号为 BC56-3256 D:. │ fib ...
- mitmproxy--Cannot establish TLS with client (sni: e.crashlytics.com): TlsException("(-1, 'Unexpected EOF')",) 解决办法
按崔哥(https://cuiqingcai.com/5391.html)的安装步骤一步步下来,会报这个错误: Cannot establish TLS with client (sni: e.cra ...
- mysql中EXPLAIN 的作用
(一)id列: (1).id 相同执行顺序由上到下 mysql> explain -> SELECT*FROM tb_order tb1 -> LEFT JOIN tb_produc ...
- 痞子衡嵌入式：ARM Cortex-M内核那些事（6）- 系统堆栈机制
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M堆栈机制. 今天给大家分享的这篇依旧是2016年之前痞子衡写的技术文档,花了点时间重新编排了一下格式.前面痞子衡 ...