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 ...
随机推荐
- 1276:【例9.20】P2758 编辑距离
题目传送门[(https://www.luogu.com.cn/problem/P2758)] 题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作 ...
- 【OpenGL】变换矩阵计算公式
摘自: http://ogldev.atspace.co.uk/www/tutorial06/tutorial06.html, http://ogldev.atspace.co.uk/www/tuto ...
- Centos7.6安装zabbix留纪录
1)查看系统版本 [root@zabbix-s41 ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@zabbix-s41 ~ ...
- 题解P1104生日
\(\color{blue}{P1104 生日(题目传送门)}\) 这道题的大意是:给出n个人的出生日期,让我们按年龄(就是先比年份,再比月份和日期,这是常识好吧)大小来排序,如果相同则按输入顺序排序 ...
- Thread Based Parallelism - Thread Synchronization With Lock
Thread Based Parallelism - Thread Synchronization With Lock import threading shared_resource_with_lo ...
- post 两种方式 application/x-www-form-urlencoded和multipart/form-data
本次主要涉及 application/x-www-form-urlencoded方式. postman访问方式如图: java代码实现: 首先使用maven作为第三方依赖管理: <depende ...
- hive使用beeline无法登录时的解决办法
如果参考官方文档执行下列命令,报错: $ $HIVE_HOME/bin/hiveserver2 $ $HIVE_HOME/bin/beeline -u jdbc:hive2://$HS2_HOST:$ ...
- React中ref的使用
直接获取DOM元素时使用的,一般情况下尽量不要使用ref
- Linux系统WEB服务之Nginx基础入门
一.Nginxi简介 Nginx是什么?它是一个开源.高性能的WEB服务器软件和代理服务器软件,由俄罗斯人Igor Sysoev 开发实现.它的功能主要分三类,第一是它作为一个WEB服务软件使用:第二 ...
- pikachu-跨站请求伪造（CSRF）
一.CSRF漏洞概述 1.1 什么是CSRF漏洞 在CSRF的攻击场景中攻击者会伪造一个请求(整个请求一般是一个链接),然后七篇目标用户进行点击,用户一旦点击了这个请求,整个攻击也就完成了,所以CSR ...