JS實(shí)現(xiàn)橫向輪播圖（中級(jí)版）
更新時(shí)間：2020年01月18日 11:47:28 作者：SSSkyCong
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)橫向輪播圖的中級(jí)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)橫向輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
描述：
輪播圖，中級(jí)，橫向buton或者底部數(shù)字控制輪播，可以實(shí)現(xiàn)自動(dòng)輪播（注釋了，使用的話將其注釋消掉），解決了初級(jí)版本的點(diǎn)1再點(diǎn)5時(shí)多張圖片滑動(dòng)的問(wèn)題，核心只有兩張圖在切換，加入了圖片加載。
效果：
代碼：
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對(duì)象下的事件偵聽(tīng)沒(méi)有被刪除掉，將會(huì)常駐堆中
// 一旦觸發(fā)了這個(gè)事件需要的條件，就會(huì)繼續(xù)執(zhí)行事件函數(shù)
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() {//創(chuàng)建默認(rèn)的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個(gè)按鈕的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個(gè)圖片
var li=Method.$c("li",ul,{//每個(gè)li的數(shù)據(jù)
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"){//鼠標(biāo)劃上 自動(dòng)暫停
autoBool=false;
}else if(e.type==="mouseleave"){//鼠標(biāo)離開(kāi) 自動(dòng)開(kāi)始
autoBool=true;
}
}
function clickHandler(e) {//左右button的鍵位判斷 點(diǎn)擊事件
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";
}
/*
* 自動(dòng)輪播函數(shù)
* 1、如果當(dāng)前autoBool是false，就不進(jìn)行自動(dòng)輪播
* 這個(gè)變量是鼠標(biāo)進(jìn)入輪播圖時(shí)是false，離開(kāi)時(shí)
* 才會(huì)變化為false
* 2、讓time--，因?yàn)檫@個(gè)函數(shù)沒(méi)16毫秒執(zhí)行一次，如果
* 每次進(jìn)來(lái)就讓time-1，然后判斷time是否小于等于0，如果
* 小于等于0，說(shuō)明這個(gè)函數(shù)已經(jīng)進(jìn)入了240次，每次16毫米，
* 合計(jì)就是4秒鐘。這樣可以控制讓輪播圖每4秒自動(dòng)播放下張
* 圖片
* 3、如果time小于等于0，就重新讓time等于240，等待下次進(jìn)入
* 4、設(shè)置圖片播放定位+1，如果大于了圖片的數(shù)量，就讓它為0
* 5、設(shè)置輪播圖方向是向左運(yùn)動(dòng)
* 6、執(zhí)行創(chuàng)建輪播圖片，并且繼續(xù)后面的任務(wù)
*
*
*
* */
function carouselAuto() {
if(!autoBool)return;
time--;
if(time>0)return;
//當(dāng)time減到0時(shí)，就不繼續(xù)減了，進(jìn)入下面
time=240;
position++;
if(position>arr.length-1) position=0;
direction="left";
createCarouselImg();
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript對(duì)象數(shù)據(jù)結(jié)構(gòu)基本形式:{ key : value},其中key:value就為對(duì)象的一個(gè)屬性,key作為屬性名稱,value為屬性值,這值可以是任何JavaScript數(shù)據(jù)類型。2009-10-10
jq.ajax+php+mysql實(shí)現(xiàn)關(guān)鍵字模糊查詢(示例講解)
下面小編就為大家分享一篇jq.ajax+php+mysql實(shí)現(xiàn)關(guān)鍵字模糊查詢(示例講解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò)問(wèn)題解決
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò),ES6模塊化提供了export命令和import?命令，對(duì)于模塊的導(dǎo)出和引入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
js實(shí)現(xiàn)仿愛(ài)微網(wǎng)兩級(jí)導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)仿愛(ài)微網(wǎng)兩級(jí)導(dǎo)航菜單效果代碼,通過(guò)javascript自定義函數(shù)結(jié)合鼠標(biāo)點(diǎn)擊事件實(shí)現(xiàn)tab切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JavaScript中對(duì)循環(huán)語(yǔ)句的優(yōu)化技巧深入探討
這篇文章主要介紹了JavaScript中對(duì)循環(huán)語(yǔ)句的優(yōu)化技巧深入探討,本文翻譯自一個(gè)臺(tái)灣朋友的文章,需要的朋友可以參考下2014-06-06
js實(shí)現(xiàn)的類marquee水平循環(huán)滾動(dòng)
marquee （水平）循環(huán)滾動(dòng)的js實(shí)現(xiàn) ,需要的朋友可以參考下。2010-03-03
這篇文章主要為大家詳細(xì)介紹了bootstrap table使用入門(mén)基本用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
在前端中可以使用多種方法來(lái)判斷一個(gè)對(duì)象是否為空,這篇文章主要給大家介紹了關(guān)于前端判斷對(duì)象為空的6種方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了JavaScript模塊隨意拖動(dòng)的具體實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
javascript自執(zhí)行函數(shù)之偽命名空間封裝法
比較之后，我們可以發(fā)現(xiàn)，第二方法更加的直觀，易于理解。但是少了封裝過(guò)程，代碼完全裸露在外。2010-12-12