輪番図(クリック切り替えと自動再生)
43869 ワード
輪番パターン例
効果の表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1、
// 2、
// 3、
// 4、
// 5、
// imgCon
// dotList
// bnList
// imgList
// pos
// direction
// imgSrcList
var imgCon,ul,preDot;
var pos=0,
x=0,
bool=false;
dotList=[],
imgList=[],
bnList=[],
time=300,
imgSrcList=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png"]
direction=""
autoBool=false;
const WIDTH=1500;
const HEIGHT=500;
const LEFT=Symbol();
const RIGHT=Symbol();
const SPEED=40;
init();
/*
init()
1、
2、
3、
4、
5、 body
6、 ， 0 ，
7、
8、 ， 16 animation ， 1000
60 ， 60 ， 16.6666
9、 ， ，
*/
function init(){
var carousel=ce("div",{
width:WIDTH+"px",
height:HEIGHT+"px",
position:"relative",
margin:"auto",
overflow:"hidden"
});
createImgCon(carousel);
createButton(carousel);
createDotList(carousel);
document.body.appendChild(carousel);
changeDot();
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
setInterval(animation,16);
carousel.addEventListener("mouseenter",mouseHandler);
carousel.addEventListener("mouseleave",mouseHandler);
}
/*
1、 ， false，
300
2、 ， true，
*/
function mouseHandler(e){
if(e.type==="mouseenter"){
autoBool=false;
time=300;
}else if(e.type==="mouseleave"){
autoBool=true;
}
}
/*
：
type ，
style ， ，
1、
2、
3、
*/
function ce(type,style){
var elem=document.createElement(type);
// ES6 ，
Object.assign(elem.style,style);//
/* for(var prop in style){
elem.style[prop]=style[prop];
} */
return elem;
}
/*
：
parent ，
1、 ，
2、 ， imgList
3、 0 imgCon
4、
*/
function createImgCon(parent){
imgCon=ce("div",{
position:"absolute",
width:2*WIDTH+"px",
height:HEIGHT+"px",
left:0
});
for(var i=0;i<imgSrcList.length;i++){
var img=ce("img",{
width:WIDTH+"px",
height:HEIGHT+"PX"
});
img.src=imgSrcList[i];
imgList.push(img);
}
imgCon.appendChild(imgList[0]);
parent.appendChild(imgCon);
}
/*
：
parent ，
1、
2、 ， ，
3、
4、
5、 bnClickHander
*/
function createButton(parent){
//
var arr=["left","right"];
for(var i=0;i<arr.length;i++){
var img=ce("img",{
position:"absolute",
// ( - ) / 2
top:(HEIGHT-60)/2 +"px",
// 0 ， ， 50 ， none
left:i===0 ? "50px" : "none",
// 1 ， ， 50 ， none
right:i===1 ? "50px" : "none",
});
img.src=`./img/${arr[i]}.png`;
bnList.push(img);
parent.appendChild(img);
img.addEventListener("click",bnClickHander);
}
}
/*
：
parent ，
1、 ul
2、 ， ，
3、 dotList
4、 ul
5、 ul ， ，
*/
function createDotList(parent){
ul=ce("ul",{
listStyle:"none",
margin:0,
padding:0,
position:"absolute",
bottom:"50px"
});
for(var i=0;i<imgSrcList.length;i++){
var dot=ce("li",{
width:"28px",
height:"28px",
borderRadius:"50%",
border:"2px solid #FF0000",
float:"left",
marginLeft:i===0 ? "0px" : "15px"
});
dotList.push(dot);
ul.appendChild(dot);
}
// dotList=Array.from(ul.children);
parent.appendChild(ul);
ul.addEventListener("click",dotClickHandler);
}
/*
e MouseEvent
e.target
bool true， ， ，
1、 left.png
， ，
2、 ， -1
0， -1， ，
3、 ， +1， -1， 0
0 ，
*/
function bnClickHander(e){
if(bool) return;
// src
if(e.target.src.includes("left.png")){
pos--;
// imgSrcList.length-1 ， pos
if(pos<0) pos=imgSrcList.length-1;
direction=RIGHT;
}else{
pos++;
if(pos>imgSrcList.length-1) pos=0;
direction=LEFT;
}
createNextImg();
}
/*
e MouseEvent
e.target
， li，
bool true， ， ，
1、 li，
2、
3、 ，
4、 ， ，
5、
*/
function dotClickHandler(e){
if(bool) return;
// if(e.target.nodeName!="LI") return;
if(e.target.constructor!==HTMLLIElement) return;
var index=dotList.indexOf(e.target);
if(index===pos) return;
direction=index>pos ? LEFT : RIGHT;
pos=index;
createNextImg();
}
/*
，
1、 ，
2、 ，
，
3、 ， bool true，
4、
*/
function createNextImg(){
// console.log(direction,pos,imgList[pos]);
if(direction===LEFT){
imgCon.appendChild(imgList[pos]);
x=0;
}else if(direction===RIGHT){
// insertBefore ，
imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
imgCon.style.left=-WIDTH+"px";
x=-WIDTH;
}
bool=true;
changeDot();
}
/*
preDot
， ， ， 0
0
0 ，
，
，
*/
function changeDot(){
if(preDot){
preDot.style.backgroundColor="rgba(255,0,0,0)";
}
preDot=dotList[pos];
preDot.style.backgroundColor="rgba(255,0,0,0.5)";
}
/*
16
1、 imgConMove ，
2、
*/
function animation(){
imgConMove();
autoplay();
}
/*
16
， bool ， false ，
1、
x ， 16 40 ， ，
， x
bool false，16
， ， x 0，
2、
x 40
x 0， ，
，bool false，x 0，
*/
function imgConMove(){
if(!bool) return;
if(direction===LEFT){
x-=SPEED;
if(x<=-WIDTH){
imgCon.firstElementChild.remove();
x=0;
bool=false;
}
imgCon.style.left=x+"px";
}else if(direction===RIGHT){
x+=SPEED;
if(x>=0){
bool=false;
x=0;
imgCon.lastElementChild.remove();
}
imgCon.style.left=x+"px";
}
}
/*
1、 fasle ，
2、time
3、 time 0
4、time 0， time 300
5、
6、
*/
function autoplay(){
if(!autoBool) return;
time--;
if(time>0) return;
time=300;
var evt=new MouseEvent("click");
bnList[1].dispatchEvent(evt);
}
</script>
</body>
</html>
効果の表示