general carousel
轮播图是一种十分常见的图片组合展示形式，它其实上是在有限的空间里拓宽了图片内容的输出视野，通过丰富的交互形态，增强了图片的灵活性和观赏感
轮播图核心功能实现：
- 完成图片的前或后逐个切换
- 完成底部按钮和图片的关联导航
- 触发底部按钮，给定背景色以标记，完成画面切换
- 图片切换的同时，背景色标记随之流动
- 默认环境下图片自动轮播，主区域聚焦时切换手动模式
html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='./reset.css'/>
<link rel='stylesheet' href='./pattern.css'/>
<link rel='stylesheet' href='./iconfont.css'/>
<script src='./swtich.js'></script>
<title>a navigation of switch picture</title>
</head>
<body>
<div class='nav_pic'>
<div class='switchList'>
<ul>
<li><a href='javascript:;'><img src='./image/5.jpg'/></a></li>
<li><a href='javascript:;'><img src='./image/2.jpg'/></a></li>
<li><a href='javascript:;'><img src='./image/3.jpg'/></a></li>
<li><a href='javascript:;'><img src='./image/4.jpg'/></a></li>
<li><a href='javascript:;'><img src='./image/1.jpg'/></a></li>
</ul>
</div>
<div class='switchControl'>
<div class='back'><i class='iconfont icon-houtui1'></i></div>
<div class='front'><i class='iconfont icon-qianjin'></i></div>
</div>
<div class='switchButtons'>
<ul>
<li><a class='active' href='javascript:;'></a></li>
<li><a href='javascript:;'></a></li>
<li><a href='javascript:;'></a></li>
<li><a href='javascript:;'></a></li>
<li><a href='javascript:;'></a></li>
</ul>
</div>
</div>
</body>
</html>
css layout
.nav_pic {
position:relative;
width:500px;
height:270px;
background-color:lightcoral;
margin:60px auto;
overflow:hidden;
}
.nav_pic ul {
width:2500px;
}
.switchList {
position:relative;
}
.nav_pic .switchList>ul>li {
float:left;
margin:0 10px;
}
/* switchControl */
.nav_pic .switchControl .iconfont {
position:absolute;
font-size:32px;
color:rgb(220,220,220);
top:110px;
cursor:pointer;
opacity:0.8
}
.nav_pic .switchControl .icon-houtui1 {
left:30px;
}
.nav_pic .switchControl .icon-qianjin {
right:30px;
}
/* switchButtons */
.nav_pic .switchButtons {
position:absolute;
bottom:10px;
opacity:0.8
}
.nav_pic .switchButtons>ul>li {
float:left;
padding:5px;
}
.nav_pic .switchButtons a {
display:block;
width:15px;
height:15px;
border-radius:50%;
background-color:rgb(239, 241, 239)
}
.nav_pic .active {
background-color:red !important
}
modules
通过计算，使底部buttons水平居中
let buttonItem = document.querySelector('.switchButtons>ul>li').offsetWidth
let buttonsLength = document.querySelectorAll('.switchButtons>ul>li').length
let switchButtons = document.querySelector('.switchButtons')
switchButtons.style.left = (mainwidth - buttonItem * buttonsLength) / 2 + 'px'
左右无缝切换图片
let front = document.querySelector('.front')
let back = document.querySelector('.back')
let nextPage = front.onclick = function () {
let switchList = document.querySelector('.switchList')
currentLeft = switchList.offsetLeft
switchList.style.left = -mainwidth + currentLeft + 'px'
if (currentLeft == -mainwidth * 4) {
switchList.style.left = '0px'
}
flowMove(setpos)
}
back.onclick = function () {
let switchList = document.querySelector('.switchList')
currentLeft = switchList.offsetLeft
switchList.style.left = mainwidth + currentLeft + 'px'
if (currentLeft == 0) {
switchList.style.left = -mainwidth * 4 + 'px'
}
setpos = false
flowMove(setpos)
}
底部按钮与图片的关联导航
let buttonLists = document.querySelectorAll('.switchButtons>ul>li')
let switchList = document.querySelector('.switchList')
for (let i = 0; i < buttonLists.length; i++) {
buttonLists[i].onclick = function () {
switchList.style.left = -mainwidth * i + 'px'
}
}
点击对应底部按钮时，给予唯一显示的背景色以标识
let aLists = document.querySelectorAll('.switchButtons>ul>li>a')
for (let i = 0; i < aLists.length; i++) {
aLists[i].onclick = function () {
for (let j = 0; j < aLists.length; j++) {
if (aLists[j].hasAttribute('class')) {
aLists[j].removeAttribute('class')
}
}
this.setAttribute('class', 'active')
}
}
图片左右切换时，对应按钮随之捆绑流动
function flowMove() {
if (setpos) {
index = Math.abs(currentLeft / mainwidth) + 1
if (index > aLists.length - 1) {
index = 0
}
} else {
index = Math.abs(currentLeft / mainwidth) - 1
if (index < 0) {
index = aLists.length - 1
}
}
for (let i = 0; i < aLists.length; i++) {
aLists[i].removeAttribute('class')
}
aLists[index].setAttribute('class', 'active')
}
自动轮播
navPic.onmouseover = function () {
clearInterval(clearclock)
}
navPic.onmouseout = function () {
clearclock = setInterval(nextPage, 2000)
}
js
the initial js , no auto change , the differenent
// switch left or right
let setpos = true
function nextPic(turn) {
let switchList = document.querySelector('.switchList')
currentLeft = switchList.offsetLeft
if(turn){
switchList.style.left = -500 + currentLeft + 'px'
if (currentLeft == -2000) {
switchList.style.left = '0px'
}
flowMove(setpos)
}else{
switchList.style.left = 500 + currentLeft + 'px'
if (currentLeft == 0) {
switchList.style.left = '-2000px'
}
setpos = false
flowMove(setpos)
}
}
switch.js
window.onload=function(){
let navPic = document.querySelector('.nav_pic')
let mainwidth = navPic.offsetWidth
let setpos = true
let clearclock = null
// averge switchButtons , make it center in horizontally
let buttonItem = document.querySelector('.switchButtons>ul>li').offsetWidth
let buttonsLength = document.querySelectorAll('.switchButtons>ul>li').length
let switchButtons = document.querySelector('.switchButtons')
switchButtons.style.left = (mainwidth - buttonItem * buttonsLength) / 2 + 'px'
//the picture move to left or right
let front = document.querySelector('.front')
let back = document.querySelector('.back')
let nextPage = front.onclick = function () {
let switchList = document.querySelector('.switchList')
currentLeft = switchList.offsetLeft
switchList.style.left = -mainwidth + currentLeft + 'px'
if (currentLeft == -mainwidth * 4) {
switchList.style.left = '0px'
}
flowMove(setpos)
}
back.onclick = function () {
let switchList = document.querySelector('.switchList')
currentLeft = switchList.offsetLeft
switchList.style.left = mainwidth + currentLeft + 'px'
if (currentLeft == 0) {
switchList.style.left = -mainwidth * 4 + 'px'
}
setpos = false
flowMove(setpos)
}
//auto play picture
navPic.onmouseover = function () {
clearInterval(clearclock)
}
navPic.onmouseout = function () {
clearclock = setInterval(nextPage, 2000)
}
// click button jump to the corresponding picture
let buttonLists = document.querySelectorAll('.switchButtons>ul>li')
let switchList = document.querySelector('.switchList')
for (let i = 0; i < buttonLists.length; i++) {
buttonLists[i].onclick = function () {
switchList.style.left = -mainwidth * i + 'px'
}
}
// switch buttons and jsut show red
let aLists = document.querySelectorAll('.switchButtons>ul>li>a')
for (let i = 0; i < aLists.length; i++) {
aLists[i].onclick = function () {
for (let j = 0; j < aLists.length; j++) {
if (aLists[j].hasAttribute('class')) {
aLists[j].removeAttribute('class')
}
}
this.setAttribute('class', 'active')
}
}
// button show red with move of the picture
function flowMove() {
if (setpos) {
index = Math.abs(currentLeft / mainwidth) + 1
if (index > aLists.length - 1) {
index = 0
}
} else {
index = Math.abs(currentLeft / mainwidth) - 1
if (index < 0) {
index = aLists.length - 1
}
}
for (let i = 0; i < aLists.length; i++) {
aLists[i].removeAttribute('class')
}
aLists[index].setAttribute('class', 'active')
}
}
carousel
