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 ...
随机推荐
- 万字分享，我是如何一步一步监控公司MySQL的？
整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 更多优选 一口气说出 9种 分布式ID生成方式,面试官有点懵了 ...
- 数据算法 --hadoop/spark数据处理技巧 --（15.查找、统计和列出大图中的所有三角形 16.k-mer计数）
十五.查找.统计和列出大图中的所有三角形 第一步骤的mr: 第二部mr: 找出三角形 第三部:去重 spark: 十六: k-mer计数 spark:
- 珠峰-6-http和http-server原理
???? websock改天研究下然后用node去搞. websock的实现原理. ##### 第9天的笔记内容. ## Header 规范 ## Http 状态码 - 101 webscoket 双 ...
- 部署LAMP环境搭建一个网站论坛平台
修改主机名 Hostname openstack-001 Hostname Login 修改本地域名解析 Vi /etc/hosts 最后一行添加 192.168.1.56 openstack-001 ...
- jdk升级后Eclipse无法启动问题
overview: 今日安装jdk11,设置好环境变量后,eclipse无法运行,由于项目依赖原因,不想更新eclipse的版本. 我的jdk是1.8,在将环境变量设回1.8后依然无法运行.在多次尝试 ...
- Go 1.14 中 Cleanup 方法简介
目录 一般的测试 使用 defer 清除依赖 使用 Cleanup 关于t.Parallel 总结 原文:What's New In Go 1.14: Test Cleanup 单元测试通常遵循某些步 ...
- JavaScript节流与防抖函数封装
js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...
- codewars--js--the highest and lowest number + JS 字符串和数组相关知识
本文参考: http://blog.csdn.net/tyrionj/article/details/78653426 http://www.runoob.com/jsref/jsref-obj-st ...
- Blazor client-side Preview 预览版 如何调试 Debug
首先我们使用最简单的模板案例,里面有一个Counter计数器,你可以在创建模板中找到. 首先需要设置运行调试方式为IIS Express.这意味着,MAC可能不能使用调试. 然后开启运行而不调试(Ct ...
- CentOS7.6安装MySQL8.0（图文详细篇）
目录 一.安装前准备 二.安装MySQL 三.设置远程登录 四.安装问题解决 五.设置MySQL开机自启 一.安装前准备 1.在官网下载MySQL安装包(注意下载的安装包类型) 2.查看是否安装ma ...