需求:
1、点击左右方向图标切换图片
2、点击图片中的小圆点切换对应图片
3、切换图片改变对应小圆点的颜色
4、鼠标离开时自动轮播,鼠标滑入停止轮播
5、不能有空白
思路:
1、先布局,创建轮播图显示区域,容器
2、创建放图片的盒子,放入容器,并创建图片放入盒子,显示第一张,并将所有图片存到数组
3、创建左右按钮,添加至容器内,将左右按钮存到数组
4、创建小圆点放入容器,将小圆点存到数组
上面4个步骤就把轮播图布局完成了(如上图),下面该加效果了
5、给左右按钮添加点击事件,点击右边按钮时,当前图片下标+1,并把方向设置为向左运动,如果大于图片地址数量-1时
让他回到第一张图片,设置下标为0
点击左边按钮时,当前图片下标-1,并把方向设置为向右运动,如果小于0,就让他为当前图片地址数量-1,也就是最后一张图片
6、给小圆点设置点击事件,先获取点击圆点的下标,如果点击元素下标大于当前显示图片下标时,设置方向向左运动,
反之设置向右运动,并且把点击元素下标赋值给当前图片下标
7、设置函数,如果方向向右运动时,在当前图片前面插入一张图片,但是还是显示当前图片,方向向左运动时,在后面
插入一张图片,还是显示当前图片,并且打开开关,让图片轮播
8、设置轮播函数,方向向左运动时,切换下一张图片,并且把第一张图片删除,方向向右运动时,切换前一张图片,删除
当前图片
9、设置小圆点切换的颜色
10、设置自动轮播,给容器添加鼠标进入离开事件,设置一个开关,鼠标进入时停止轮播,鼠标离开自动轮播
下面为JS完整代码
//定义变量
var imgCon,ul,preDot;
var imgList=[],
dotList=[],
bnList=[],
time=200,
autoBool=false;
bool=false,
pos=0,
x=0,
direction="",
imgSrcList=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png"];
const WIDTH=1680;
const HEIGHT=560;
const SPEED=50;
const LEFT=Symbol();
const RIGHT=Symbol();
init();
function init(){
//创建轮播图显示区域,容器
var carousel=ce("div",{
width:WIDTH+"px",
height:HEIGHT+"px",
margin:"auto",
position:"relative",
overflow:"hidden"
})
//创建放图片的盒子,并放入容器中
createImgCon(carousel);
//创建左右按钮,并放入容器
createBn(carousel);
//创建小圆点,并放入容器
createDot(carousel);
document.body.appendChild(carousel);
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px"
setInterval(animation,16);
carousel.addEventListener("mouseenter",mouseHandler);
carousel.addEventListener("mouseleave",mouseHandler);
changeDot();
}
function mouseHandler(e){
if(e.type==="mouseenter"){
autoBool=false;
time=200;
}else if(e.type==="mouseleave"){
autoBool=true;
}
}
function ce(type,style){
var elem=document.createElement(type);
Object.assign(elem.style,style);
return elem;
}
function createImgCon(parent){
imgCon=ce("div",{
width:2*WIDTH+"px",
height:HEIGHT+"px",
position:"absolute",
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);
}
function createBn(parent){
var arr=["left","right"];
for(var i=0;i<arr.length;i++){
var img=ce("img",{
position:"absolute",
top:(HEIGHT-60)/2+"px",
left:i===0 ? "50px" : "none",
right:i===1 ? "50px" : "none"
})
img.src=`./img/${arr[i]}.png`;
bnList.push(img);
parent.appendChild(img);
img.addEventListener("click",bnClickHandler);
}
}
function bnClickHandler(e){
if(bool) return;
if(e.target.src.includes("left.png")){
pos--;
if(pos<0) pos=imgSrcList.length-1;
direction=RIGHT;
}else{
pos++;
if(pos>imgSrcList.length-1) pos=0;
direction=LEFT;
}
changeDot();
createNextImg();
}
function createNextImg(){
if(direction===RIGHT){
imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
imgCon.style.left=-WIDTH+"px";
x=-WIDTH;
}else if(direction===LEFT){
imgCon.appendChild(imgList[pos]);
x=0;
}
bool=true;
}
function createDot(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:"40px",
height:"40px",
border:"2px solid red",
borderRadius:"50%",
float:"left",
marginLeft:i===0 ? "0px" : "20px"
})
ul.appendChild(dot);
dotList.push(dot);
}
parent.appendChild(ul);
ul.addEventListener("click",dotClcikHandler);
}
function dotClcikHandler(e){
if(bool) return;
if(e.target.constructor!==HTMLLIElement) return;
var index=dotList.indexOf(e.target);
if(index===pos) return;
direction=index>pos ? LEFT : RIGHT;
pos=index;
changeDot();
createNextImg();
}
function animation(){
imgConMove();
autoPlay();
}
//切换小圆点颜色
function changeDot(){
if(preDot) preDot.style.backgroundColor="rgba(255,0,0,0)";
preDot=dotList[pos];
preDot.style.backgroundColor="rgba(255,0,0,0.5)";
}
//控制放图片盒子的移动
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){
imgCon.lastElementChild.remove();
x=0;
bool=false;
}
imgCon.style.left=x+"px";
}
}
//自动轮播
function autoPlay(){
if(!autoBool) return;
time--;
if(time>0) return;
time=200;
var evt=new MouseEvent("click");
bnList[1].dispatchEvent(evt);
}