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 Module下使用本地包
介绍两种方式: 方式一(推荐): 严格的说,方式一是使用项目目录下的go文件. 项目目录如下: |── studyModule //项目主目录 | |──log //主目录下文件夹 | | |──lo ...
- One Stage目标检测
在计算机视觉中,目标检测是一个难题.在大型项目中,首先需要先进行目标检测,得到对应类别和坐标后,才进行之后的各种分析.如人脸识别,通常是首先人脸检测,得到人脸的目标框,再对此目标框进行人脸识别.如果该 ...
- Java TreeSet的使用
1.TreeSe自带排序的set,没有重复元素. 2.TreeSet 如果构造函数中没有使用比较器,那在装载的对象类中要实现Comparable 接口. 3.TreeSet 使用初始化比较器的方式. ...
- Linux 配置ip 子接口 多网卡绑定
linux系统配置ip地址,图形化界面略过,这里只介绍文本行.做以下设置注意是否有此权限 查看当前路由及网关信息: [root@localhost ~]# netstat -r Kernel IP r ...
- [MSSQL]xp_cmdshell 查看磁盘空间
EXEC xp_cmdshell 'wmic logicaldisk get freespace,caption | findstr C'; <class 'pyodbc.Row'> (' ...
- Rust学习--变量
0x0 每种编程语言都有变量的概念,我们可以把变量理解为最简单的存储方式,它是编码过程中是必不可少的. Rust的变量很有特色.变量不可变的特性让人想起了Erlang.以及后面的模式匹配,我觉得作者应 ...
- 一个用python写的比特币均线指标
https://blog.csdn.net/gsl222/article/details/104554397 https://github.com/yyy999/auto_ma912 一个用pytho ...
- React Native运行出现Could not find "iPhone X" simulator
打开项目文件夹下 node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js 查找 if (!version.startsW ...
- 从零构建Flink SQL计算平台 - 1平台搭建
一.理想与现实 Apache Flink 是一个分布式流批一体化的开源平台.Flink 的核心是一个提供数据分发.通信以及自动容错的流计算引擎.Flink 在流计算之上构建批处理,并且原生的支持迭代计 ...
- PMP-番外篇-PMP工具与技术目录
########################################################### 这里先总结所有工具和技术,让大家有一个整体的概念. 也可以当作一个工具和技术查询 ...