小編給大家分享一下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>以上是“JS如何實現橫向輪播圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
