JavaScript-----Carousel Diagram Plugin

First, the effect

1. HTML code:

<! DOCTYPE html>
2, JS code:
var imgobj = {"Imglist": [{"Name": "Name1", "url": "Imgs/1.jpg", "detail": "Fewfewfwfewf1", "link": "http://w  Ww.hao123.com "}, {" Name ":" Name2 "," url ":" Imgs/2.jpg "," detail ":" Fewfewfwfewf2 "," link ":" Http://www.baidu.com "        }, {"Name": "Name3", "url": "Imgs/3.jpg", "detail": "fewfewfwfewf3", "link": "Http://www.w3cschool.com"}, {"Name": "Name4", "url": "Imgs/4.jpg", "detail": "Fewfewfwfewf4", "link": "Http://www.taobao.com"}]} var parent = document.getElementById ("slide"), slideimg (parent, imgobj), function slideimg (parent, imgobj) {var leftbtn    = document.getElementById ("left-btn");    var rightbtn = document.getElementById (' right-btn ');    var container = document.getElementById ("Slide-container");    var mask = document.getElementById ("Slide-mask");    var circles = document.getelementsbyclassname ("img-list-btn");    var nowindex = 1;    Fill picture var len = imgObj.imgList.length; for (Let i = 0; i < len; i++) {Let Imglistboj = "<div class= ' img ' >" + "<a href= '" + imgobj.imglist[i].link + "' >" + "        </span> "; } else {list = "<span class= ' img-list-btn ' id = ' img-list-btn ' data-index= '" + (i + 1) + "' ></span&gt        ;";        }    mask.innerhtml + = list;        }//Left Leftbtn.addeventlistener ("click", Function () {var = container.getattribute)            if (left = = null) {left = 0;        Container.setattribute ("left", "0");            } if (Nowindex >= 1 && nowindex < len) {left = parseint (left)-800;           if (nowindex! = len) {     nowindex++; for (var j = 0; J < Len; J + +) {/* Console.log (Circles[j]); */var className = Cir                    Cles[j].getattribute ("class");                    ClassName = Classname.replace ("Choose", "" ");                Circles[j].setattribute ("Class", className);                } var circle = Document.queryselector (". Slide-mask span:nth-child (" + Nowindex + ")");            Circle.classList.add ("choose");        }} container.setattribute ("left" and left);        var s = "Transform:translatex" ("+ (parseint (left)) +" px); ";    Container.setattribute ("style", s);        })//Right-Rightbtn.addeventlistener ("click", Function () {var = container.getattribute ("left");            if (left = = null) {left = 0;        Container.setattribute ("left", "0");            } if (Nowindex > 1 && nowindex <= len) {left = parseint (left) + 800; if (Nowindex!)= 1) {nowindex--;                } for (var j = 0; J < Len; J + +) {var className = Circles[j].getattribute ("class");                ClassName = Classname.replace ("Choose", "" ");            Circles[j].setattribute ("Class", className);            } var circle = Document.queryselector (". Slide-mask span:nth-child (" + Nowindex + ")");        Circle.classList.add ("choose");        } container.setattribute ("left", left);        var s = "Transform:translatex" ("+ (parseint (left)) +" px); ";    Container.setattribute ("style", s);        })//Dot Click event Mask.addeventlistener ("click", Function (EV) {var ev = EV;        var target = Ev.target;        var index = Target.getattribute ("Data-index");        var s = "Transform:translatex (" + (parseint (index) * -800 + +) + "px);";        Container.setattribute ("style", s);        Nowindex = index;        Container.setattribute ("Left", (parseint (Index) *-800 + 800)); for (var j = 0; J < Len;            J + +) {var className = Circles[j].getattribute ("class");            ClassName = Classname.replace ("Choose", "" ");        Circles[j].setattribute ("Class", className);        } var circle = Document.queryselector (". Slide-mask span:nth-child (" + Nowindex + ")");    Circle.classList.add ("choose");        }) SetInterval (function () {var t = parseint (Math.random () * 2);        if (t = = 0) {Rightbtn.click ();        } else {Leftbtn.click (); }}, 3000);}
 3, CSS code: 
 
. slide{Position:absolute;    top:0;    left:50%;    Transform:translate (-50%, 0);    width:800px;    HEIGHT:60RPX;    margin:0 Auto; Overflow:hidden;}.    slide-nav{width:800px;    HEIGHT:60RPX;    margin:0 Auto;    position:relative;    top:0; left:0;}.    Slide-nav. slide-container {height:400px;    White-space:nowrap;    font-size:0; Transition:linear 0.4s all;}.    Slide-nav. Slide-container. img{width:800px;    HEIGHT:60RPX;    Display:inline-block; Overflow:hidden;}. Slide-nav. Slide-container. img img {width:800px;}.    slide-mask {position:absolute;    Bottom: -40px;    left:0;    z-index:100;    width:800px;    height:40px; Text-align:center;}.    Slide:hover. Slide-mask {Transform:translatey ( -40px); Transition:linear 0.3s all;}.    Slide-mask span{Display:inline-block;    width:20px;    height:20px;    margin:10px 10px 0 0;    border-radius:10px;    Background-color: #BD2D30; Cursor:pointer;}. Slide-mask. choose{    Background-color:white;}.    left-btn {position:absolute;    z-index:120;    width:60px;    HEIGHT:60RPX;    Background-color:rgba (0, 0, 0, 0.5);    top:0;    left:0;    Float:left;    Transform:translatex (-100%);    Background:-moz-linear-gradient (left, Rgba (0, 0, 0, 0.8), Rgba (0, 0, 0, 0.1));    Background:-webkit-linear-gradient (left, Rgba (0, 0, 0, 0.8), Rgba (0, 0, 0, 0.1)); Background:linear-gradient (left, Rgba (0, 0, 0, 0.8), Rgba (0, 0, 0, 0.1));}.    right-btn {position:absolute;    z-index:120;    width:60px;    HEIGHT:60RPX;    Transform:translatex (100%);    Background:-moz-linear-gradient (right, Rgba (0, 0, 0, 0.8), Rgba (0, 0, 0, 0.1));    Background:-webkit-linear-gradient (right, Rgba (0, 0, 0, 0.8), Rgba (0, 0, 0, 0.1));    Background:linear-gradient (right, Rgba (0, 0, 0, 0.8), Rgba (0, 0, 0, 0.1));    top:0; right:0;}.    btn {line-height:400px;    Text-align:center;    Font-weight:bold;    font-size:30px;    Color:white; Cursor:pointer;}. slide:hover. left-btn {transform:translatex (0); Transition:linear 0.4s all;}.    Slide:hover. right-btn {transform:translatex (0); Transition:linear 0.4s All;}
　　
JavaScript-----Carousel Diagram Plugin