JS实现横向轮播图（中级版）
程序员文章站
2022-03-10 11:25:19
本文实例为大家分享了js实现横向轮播图的具体代码，供大家参考，具体内容如下
描述：
轮播图，中级，横向buton或者底部数字控制轮播，可以实现自动轮播（注释了，使用的话将其注释消掉...
本文实例为大家分享了js实现横向轮播图的具体代码，供大家参考，具体内容如下
描述：
轮播图，中级，横向buton或者底部数字控制轮播，可以实现自动轮播（注释了，使用的话将其注释消掉），解决了初级版本的点1再点5时多张图片滑动的问题，核心只有两张图在切换，加入了图片加载。
效果：
代码：
js文件：
/*
* 工厂模式
* */
var method=(function () {
return {
loadimage:function (arr,callback) {
var img=new image();
img.arr=arr;
img.list=[];
img.num=0;
img.callback=callback;
// 如果dom对象下的事件侦听没有被删除掉，将会常驻堆中
// 一旦触发了这个事件需要的条件，就会继续执行事件函数
img.addeventlistener("load",this.loadhandler);
img.self=this;
img.src=arr[img.num];
},
loadhandler:function (e) {
this.list.push(this.clonenode(false));
this.num++;
if(this.num>this.arr.length-1){
this.removeeventlistener("load",this.self.loadhandler);
this.callback(this.list);
return;
}
this.src=this.arr[this.num];
},
$c:function (type,parent,style) {
var elem=document.createelement(type);
if(parent) parent.appendchild(elem);
for(var key in style){
elem.style[key]=style[key];
}
return elem;
}
}
})();
html文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="js/method.js"></script>
</head>
<body>
<script>
var imgcon,ul,prevli;
var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];
var position=0;
var direction="";
var carouselbool=false;
var autobool=false;
var time=240;
const width=1200;
const height=400;
init();
function init() {
createcarousel();
createliandimg();
changeli();
setinterval(animation,16)
}
function createcarousel() {//创建默认的div模板 用于装图片
var carousel=method.$c("div",document.body,{
width: width+"px",
height: height+"px",
position: "relative",
margin: "auto",
overflow:"hidden"
});
carousel.addeventlistener("mouseenter",mousehandler);
carousel.addeventlistener("mouseleave",mousehandler);
imgcon=method.$c("div",carousel,{//图片轮播 div
width: width+"px",
height: height+"px",
position:"absolute",
left: 0,
fontsize: 0
});
ul=method.$c("ul",carousel,{//装5个按钮的ul
position: "absolute",
bottom: "20px",
liststyle: "none",
margin: "auto"
});
var leftbn=method.$c("img",carousel,{//左 按钮
position: "absolute",
left: "20px",
top:"170px"
});
leftbn.src="img/left.png";
var rightbn=method.$c("img",carousel,{//右 按钮
position: "absolute",
right: "20px",
top:"170px"
});
rightbn.src="img/right.png";
leftbn.addeventlistener("click",clickhandler);
rightbn.addeventlistener("click",clickhandler)
}
function createliandimg() {
for(var i=0;i<arr.length;i++){//arr 事先装好了 5个图片
var li=method.$c("li",ul,{//每个li的数据
width: "20px",
height: "20px",
border:"1px solid red",
borderradius:"10px",
float:"left",
marginleft:"8px"
});
li.num=i;
li.addeventlistener("click",liclickhandler);
}
ul.style.left=(width-ul.offsetwidth)/2+"px";
var img=method.$c("img",imgcon,{
width: width+"px",
height: height+"px"
});
img.src=arr[position];
}
function mousehandler(e) {
e = e || window.event;
if(e.type==="mouseenter"){//鼠标划上 自动暂停
autobool=false;
}else if(e.type==="mouseleave"){//鼠标离开 自动开始
autobool=true;
}
}
function clickhandler(e) {//左右button的键位判断 点击事件
e = e || window.event;
if(carouselbool) return;
if(~this.src.indexof("left")){
position--;
if(position<0) position=arr.length-1;
direction="right";
}else{
position++;
if(position>arr.length-1) position=0;
direction="left";
}
createcarouselimg();
}
function liclickhandler(e) {
e = e || window.event;
if(carouselbool) return;
if(this.num===position) return;
if(this.num>position){
direction="left";
}else{
direction="right";
}
position=this.num;
createcarouselimg();
}
function createcarouselimg() {
if(direction!=="left" && direction!=="right")return;
var img=method.$c("img",null,{
width: width+"px",
height: height+"px"
});
img.src=arr[position];
imgcon.style.width=width*2+"px";
if(direction==="left"){
imgcon.appendchild(img);
}else if(direction==="right"){
imgcon.insertbefore(img,imgcon.firstelementchild);
imgcon.style.left=-width+"px";
}
changeli();
carouselbool=true;
}
function changeli() {
if(prevli){
prevli.style.backgroundcolor="rgba(255,0,0,0)";
}
prevli=ul.children[position];
prevli.style.backgroundcolor="rgba(255,0,0,0.5)";
}
function animation() {
carouselmovie();
carouselauto();
}
function carouselmovie() {
if(!carouselbool) return;
if(direction==="left"){
if(imgcon.offsetleft<=-width){
carouselbool=false;
imgcon.firstelementchild.remove();
imgcon.style.left="0px";
return;
}
imgcon.style.left=imgcon.offsetleft-40+"px";
return;
}
if(imgcon.offsetleft>=0){
carouselbool=false;
imgcon.lastelementchild.remove();
return;
}
imgcon.style.left=imgcon.offsetleft+30+"px";
}
/*
* 自动轮播函数
* 1、如果当前autobool是false，就不进行自动轮播
* 这个变量是鼠标进入轮播图时是false，离开时
* 才会变化为false
* 2、让time--，因为这个函数没16毫秒执行一次，如果
* 每次进来就让time-1，然后判断time是否小于等于0，如果
* 小于等于0，说明这个函数已经进入了240次，每次16毫米，
* 合计就是4秒钟。这样可以控制让轮播图每4秒自动播放下张
* 图片
* 3、如果time小于等于0，就重新让time等于240，等待下次进入
* 4、设置图片播放定位+1，如果大于了图片的数量，就让它为0
* 5、设置轮播图方向是向左运动
* 6、执行创建轮播图片，并且继续后面的任务
*
*
*
* */
function carouselauto() {
if(!autobool)return;
time--;
if(time>0)return;
//当time减到0时，就不继续减了，进入下面
time=240;
position++;
if(position>arr.length-1) position=0;
direction="left";
createcarouselimg();
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。