html 轮播图自适应,JavaScript 自适应轮播图

JavaScript 自适应轮播图

代码

话不多说，先上代码，方便复制粘贴。演示

轮播图

*{

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);

}

<

>

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 += ''

}

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();

}

前言

这里是我按照自己的想法写的一个原生javascript轮播图，给初学者提供一个思路。写轮播图的方法有很多，这里只是其中一种，最重要的还是能学有所得，举一反三。

效果

0.PNG

这里提供一张轮播图图片

banner1.jpg

思路

大部分轮播图都是通过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名？这样就可以随意添加了，答案是：懒得写了，如果自己感兴趣，可以自己去改造。

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();