Maison > Article > interface Web > JavaScript réalise l'effet de défilement gauche et droit des images [peut défiler automatiquement, possède des boutons gauche et droit]
JavaScript réalise l'effet de défilement gauche et droit des images [peut défiler automatiquement, possède des boutons gauche et droit]
- 高洛峰original
- 2017-01-18 13:48:063058parcourir
L'exemple de cet article décrit comment obtenir l'effet de défilement gauche et droit des images à l'aide de javascript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Code HTML :
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>图片滚动</title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
img{border:0;}
.scroll{width:358px;height:63px;}
.scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg) no-repeat;float:left;}
.scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg) left no-repeat;float:left;}
.pic{width:312px;height:73px;float:left;}
.pic ul{display:block;}
.pic li{float:left;display:inline;width:104px;text-align:center;}
</style>
</head>
<body>
<p style="margin:100px auto;width:358px;">
<p>
<p id="LeftArr"></p>
<p id="scrollPic">
<ul>
<li><a href="#" target="_blank" title=""><img src="images/pic01.png" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic02.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic03.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic04.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic05.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic06.jpg" width="100" height="63" alt="" /></a></li>
</ul>
</p>
<p id="RightArr"></p>
</p>
</p>
</body>
</html>
<script src="scrollPic.js"></script>
<script>
window.onload = function(){
scrollPic();
}
function scrollPic() {
var scrollPic = new ScrollPic();
scrollPic.scrollContId = "scrollPic"; //内容容器ID
scrollPic.arrLeftId = "LeftArr";//左箭头ID
scrollPic.arrRightId = "RightArr"; //右箭头ID
scrollPic.frameWidth = 312;//显示框宽度
scrollPic.pageWidth = 104; //翻页宽度
scrollPic.speed = 10; //移动速度(单位毫秒，越小越快)
scrollPic.space = 10; //每次移动像素(单位px，越大越快)
scrollPic.autoPlay = true; //自动播放
scrollPic.autoPlayTime = 3; //自动播放间隔时间(秒)
scrollPic.initialize(); //初始化
}
</script>Code scrollPic.js :
var sina = {
$ : function (objName) {
if (document.getElementById) {
return eval('document.getElementById("' + objName + '")')
} else {
return eval('document.all.' + objName)
}
},
isIE : navigator.appVersion.indexOf("MSIE") != -1 ? true : false,
addEvent : function (l, i, I) {
if (l.attachEvent) {
l.attachEvent("on" + i, I)
} else {
l.addEventListener(i, I, false)
}
},
delEvent : function (l, i, I) {
if (l.detachEvent) {
l.detachEvent("on" + i, I)
} else {
l.removeEventListener(i, I, false)
}
},
readCookie : function (O) {
var o = "",
l = O + "=";
if (document.cookie.length > 0) {
var i = document.cookie.indexOf(l);
if (i != -1) {
i += l.length;
var I = document.cookie.indexOf(";", i);
if (I == -1)
I = document.cookie.length;
o = unescape(document.cookie.substring(i, I))
}
};
return o
},
writeCookie : function (i, l, o, c) {
var O = "",
I = "";
if (o != null) {
O = new Date((new Date).getTime() + o * 3600000);
O = "; expires=" + O.toGMTString()
};
if (c != null) {
I = ";domain=" + c
};
document.cookie = i + "=" + escape(l) + O + I
},
readStyle : function (I, l) {
if (I.style[l]) {
return I.style[l]
} else if (I.currentStyle) {
return I.currentStyle[l]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var i = document.defaultView.getComputedStyle(I, null);
return i.getPropertyValue(l)
} else {
return null
}
}
};
//滚动图片构造函数
//UI&UE Dept. mengjia
//080623
function ScrollPic(scrollContId, arrLeftId, arrRightId, dotListId) {
this.scrollContId = scrollContId;
this.arrLeftId = arrLeftId;
this.arrRightId = arrRightId;
this.dotListId = dotListId;
this.dotClassName = "dotItem";
this.dotOnClassName = "dotItemOn";
this.dotObjArr = [];
this.pageWidth = 0;
this.frameWidth = 0;
this.speed = 10;
this.space = 10;
this.pageIndex = 0;
this.autoPlay = true;
this.autoPlayTime = 5;
var _autoTimeObj,
_scrollTimeObj,
_state = "ready";
this.stripDiv = document.createElement("DIV");
this.listDiv01 = document.createElement("DIV");
this.listDiv02 = document.createElement("DIV");
if (!ScrollPic.childs) {
ScrollPic.childs = []
};
this.ID = ScrollPic.childs.length;
ScrollPic.childs.push(this);
this.initialize = function () {
if (!this.scrollContId) {
throw new Error("必须指定scrollContId.");
return
};
this.scrollContDiv = sina.$(this.scrollContId);
if (!this.scrollContDiv) {
throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + this.scrollContId + "\")");
return
};
this.scrollContDiv.style.width = this.frameWidth + "px";
this.scrollContDiv.style.overflow = "hidden";
this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;
this.scrollContDiv.innerHTML = "";
this.scrollContDiv.appendChild(this.stripDiv);
this.stripDiv.appendChild(this.listDiv01);
this.stripDiv.appendChild(this.listDiv02);
this.stripDiv.style.overflow = "hidden";
this.stripDiv.style.zoom = "1";
this.stripDiv.style.width = "32766px";
if(-[1,]){
this.listDiv01.style.cssFloat = "left";
this.listDiv02.style.cssFloat = "left";
}else{
this.listDiv01.style.styleFloat = "left";
this.listDiv02.style.styleFloat = "left";
}
sina.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));
sina.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));
if (this.arrLeftId) {
this.arrLeftObj = sina.$(this.arrLeftId);
if (this.arrLeftObj) {
sina.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()"));
sina.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));
sina.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))
}
};
if (this.arrRightId) {
this.arrRightObj = sina.$(this.arrRightId);
if (this.arrRightObj) {
sina.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()"));
sina.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));
sina.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))
}
};
if (this.dotListId) {
this.dotListObj = sina.$(this.dotListId);
if (this.dotListObj) {
var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4),
i,
tempObj;
for (i = 0; i < pages; i++) {
tempObj = document.createElement("span");
this.dotListObj.appendChild(tempObj);
this.dotObjArr.push(tempObj);
if (i == this.pageIndex) {
tempObj.className = this.dotClassName
} else {
tempObj.className = this.dotOnClassName
};
tempObj.title = "第" + (i + 1) + "页";
sina.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))
}
}
};
if (this.autoPlay) {
this.play()
}
};
this.leftMouseDown = function () {
if (_state != "ready") {
return
};
_state = "floating";
_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)
};
this.rightMouseDown = function () {
if (_state != "ready") {
return
};
_state = "floating";
_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)
};
this.moveLeft = function () {
if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {
this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth
} else {
this.scrollContDiv.scrollLeft += this.space
};
this.accountPageIndex()
};
this.moveRight = function () {
if (this.scrollContDiv.scrollLeft - this.space <= 0) {
this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space
} else {
this.scrollContDiv.scrollLeft -= this.space
};
this.accountPageIndex()
};
this.leftEnd = function () {
if (_state != "floating") {
return
};
_state = "stoping";
clearInterval(_scrollTimeObj);
var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;
this.move(fill)
};
this.rightEnd = function () {
if (_state != "floating") {
return
};
_state = "stoping";
clearInterval(_scrollTimeObj);
var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;
this.move(fill)
};
this.move = function (num, quick) {
var thisMove = num / 5;
if (!quick) {
if (thisMove > this.space) {
thisMove = this.space
};
if (thisMove < -this.space) {
thisMove = -this.space
}
};
if (Math.abs(thisMove) < 1 && thisMove != 0) {
thisMove = thisMove >= 0 ? 1 : -1
} else {
thisMove = Math.round(thisMove)
};
var temp = this.scrollContDiv.scrollLeft + thisMove;
if (thisMove > 0) {
if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {
this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth
} else {
this.scrollContDiv.scrollLeft += thisMove
}
} else {
if (this.scrollContDiv.scrollLeft - thisMove <= 0) {
this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove
} else {
this.scrollContDiv.scrollLeft += thisMove
}
};
num -= thisMove;
if (Math.abs(num) == 0) {
_state = "ready";
if (this.autoPlay) {
this.play()
};
this.accountPageIndex();
return
} else {
this.accountPageIndex();
setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)
}
};
this.next = function () {
if (_state != "ready") {
return
};
_state = "stoping";
this.move(this.pageWidth, true)
};
this.play = function () {
if (!this.autoPlay) {
return
};
clearInterval(_autoTimeObj);
_autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)
};
this.stop = function () {
clearInterval(_autoTimeObj)
};
this.pageTo = function (num) {
if (_state != "ready") {
return
};
_state = "stoping";
var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;
this.move(fill, true)
};
this.accountPageIndex = function () {
this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);
if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {
this.pageIndex = 0
};
var i;
for (i = 0; i < this.dotObjArr.length; i++) {
if (i == this.pageIndex) {
this.dotObjArr[i].className = this.dotClassName
} else {
this.dotObjArr[i].className = this.dotOnClassName
}
}
}
};Description du paramètre :
var scrollPic = new ScrollPic(); //Définir les variables et initialiser les méthodes
scrollContId //ID du conteneur de défilement
arrLeftId //ID du bouton gauche
arrRightId //ID du bouton droit
frameWidth / /Largeur de la boîte d'affichage
pageWidth //Largeur de rotation de page
vitesse //Vitesse de déplacement (unité en millisecondes, plus petite est la plus rapide)
espace //Déplacez les pixels à chaque fois (unité px, plus grande est la plus rapide) )
autoPlay //Lecture automatique
autoPlayTime //Intervalle de lecture automatique (secondes)
initialize() //Initialisation
J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.
Pour plus de javascript permettant d'obtenir l'effet de défilement vers la gauche et la droite des images [peut défiler automatiquement, avec les boutons gauche et droit], veuillez faire attention au site Web PHP chinois pour les articles connexes !
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Effet de défilement transparent de haut en bas implémenté par javascriptArticle suivant：Effet de défilement transparent de haut en bas implémenté par javascript
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript