Home > Article > Web Front-end > How to implement horizontal carousel chart in js

How to implement horizontal carousel chart in js

王林forward: 2020-03-06 10:51:332768browse

Description:

Carousel chart, primary, horizontal button or bottom digital control carousel, can realize automatic carousel (annotated, if used, uncomment it off), the core knowledge is that the displacement of the data-driven image achieves the effect.

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;
 }
 }
})();

(Recommended learning: 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>

For more programming related content, please pay attention to the Introduction to Programming column on the php Chinese website!

The above is the detailed content of How to implement horizontal carousel chart in js. For more information, please follow other related articles on the PHP Chinese website!

php html JS

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Understand and optimize javascript codeNext article：Understand and optimize javascript code

See more

How to implement horizontal carousel chart in js

Related articles