Heim > Artikel > Web-Frontend > So implementieren Sie ein horizontales Karusselldiagramm in js
So implementieren Sie ein horizontales Karusselldiagramm in js
- 王林nach vorne
- 2020-03-06 10:51:332771Durchsuche
Beschreibung:
Karusselldiagramm, primäres, horizontales Knopf- oder unteres digitales Steuerkarussell, kann ein automatisches Karussell (mit Anmerkungen versehen, bei Verwendung löschen) ausschalten), den Kern Wissen ist, dass die Verschiebung des datengesteuerten Bildes den Effekt erzielt.
JS-Code:
/*
* 工厂模式
* */
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;
}
}
})();(empfohlenes Lernen: JS-Tutorial)
HTML-Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#carousel,#imgCon img{
width: 1200px;
height: 400px;
}
#carousel
{
position: relative;
margin: auto;
overflow: hidden;
}
#imgCon{
width: 6000px;
height: 400px;
position: absolute;
left: 0;
font-size: 0;
transition: all 1s;
}
#leftBn,#rightBn
{
position: absolute;
top:170px;
}
#leftBn{
left: 20px;
}
#rightBn
{
right: 20px;
}
ul{
position: absolute;
bottom: 20px;
list-style: none;
margin: auto;
left: 45%;
}
li
{
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 10px;
float: left;
text-align: center;
color: white;
cursor: default;
line-height:20px;
font-size: 12px;
margin-left: 8px;
}
</style>
</head>
<body>
<div id="carousel">
<div id="imgCon">
<img src="img/a.jpeg">
<img src="img/b.jpeg">
<img src="img/c.jpeg">
<img src="img/d.jpeg">
<img src="img/e.jpeg">
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<img src="img/left.png" id="leftBn">
<img src="img/right.png" id="rightBn">
</div>
<script>
/*
*
* 数据驱动显示
*
* */
var imgCon,leftBn,rightBn,lis,ul,prevLi;
var position=0;//图像的标记 第一张0 第二张1...
init();
function init() {
imgCon=document.getElementById("imgCon");//图
leftBn=document.getElementById("leftBn");//左按钮
rightBn=document.getElementById("rightBn");//右按钮
lis=document.getElementsByTagName("li");//下方数字右按钮
ul=document.getElementsByTagName("ul")[0];
leftBn.addEventListener("click",clickHandler);
rightBn.addEventListener("click",clickHandler);
for(var i=0;i<lis.length;i++){//为每隔小Li 也就是底部数字赋值
lis[i].num=i;
lis[i].addEventListener("click",liClickHandler);
}
changeLi();
}
// setInterval(autoImg,3000);可以实现自动
function autoImg() {//自动轮播
position++;
if(position>4) position=0;
changeImg();
}
function clickHandler(e) {
e= e || window.event;
if(this===leftBn){
position--;
if(position<0) position=4;
}else if(this===rightBn){
position++;
if(position>4) position=0;
}
changeImg();
}
function liClickHandler(e) {
e= e || window.event;
position=this.num;
changeImg();
}
function changeImg() {//图片的转换效果 唯一
imgCon.style.left=-position*1200+"px";//一次一张图片的位移
changeLi();
}
function changeLi() {//底部数字的转换效果
if(prevLi){
prevLi.style.backgroundColor="rgba(255,0,0,0)";
}
prevLi=lis[position];
prevLi.style.backgroundColor="rgba(255,0,0,0.5)";
}
</script>
</body>
</html>Weitere Inhalte zum Thema Programmierung finden Sie in der Spalte Einführung in die Programmierung auf der chinesischen PHP-Website!
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein horizontales Karusselldiagramm in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Javascript-Code verstehen und optimierenNächster Artikel：Javascript-Code verstehen und optimieren