There are four methods in the rotation chart , In this issue, I will first share two , The remaining two methods will be added in the next period

Common part ：

* {
				padding: 0px;
				margin: 0px;
			}

			.banner {
				width: 600px;
				margin: auto;
				border: 10px solid green;
				height: 350px;
				position: relative;
				/* overflow: hidden; */
			}

			.imgList img {
				width: 600px;
				height: 350px;
			}

			.imgList {
				position: absolute;

			}

			.imgList li {
				float: left;
				margin-right: 20px;
				list-style: none;
			}

			.circle {
				position: absolute;
				bottom: 15px;
				left: 50%;
				transform: translateX(-50%);
			}

			.circle a {
				width: 15px;
				height: 15px;
				background: green;
				display: block;
				border-radius: 50%;
				opacity: .8;
				float: left;
				margin-right: 10px;
			}

			.circle a.hover {
				background: black;
				opacity: .7;
			}
			.hover{
				background-color:red;
			}

HTML The content part ：
 

<div class="banner">

			<ul class="imgList">
				<li><img src="banner/1.png" /></li>
				<li><img src="banner/2.jpg" /></li>
				<li><img src="banner/3.jpg" /></li>
				<li><img src="banner/4.jpg" /></li>

			</ul>
			<div class="circle">
				
			</div>
		</div>

The first way js Content ：

    var imgList = document.querySelector('.imgList');
            var banner = document.querySelector('.banner');
            var circle = document.querySelector('.circle');
            // Get the length of the carousel picture   The width of each picture is 620px   And assign the overall width value to ul;
            window.οnlοad=function(){
                imgList.style.width = imgList.children.length * 620 + "px";
                // adopt for loop , according to ul The length of the sub tag , Create the corresponding a Number of labels ;
                for (var i = 0; i < imgList.children.length; i++) {
                    var aNub = document.createElement('a');
                    // Created above a After label , We will build a Label placement circle In turn
                    circle.appendChild(aNub);
                    aNub.setAttribute('index', i);        
         
                }
                circle.addEventListener('click',function(e){
                  var thisindex =e.target.getAttribute('index');
                  imgList.style.left=-thisindex*620+"px";
                  console.log(e.target.nodeName);
                   if(e.target.nodeName!='A'){
                       // return false namely Exit operation
                       return false;
                   }
                    // thisIndex = e.target.getAttribute('index');
                    // Call the function of changing the style of small dots
                    // circlechange();
                })
            } 

The second way is js Content ：

    var imgList = document.querySelector('.imgList');
            var banner = document.querySelector('.banner');
            var circle = document.querySelector('.circle');
            var circleA = circle.children;
            var thisIndex = 0;
            // Get the length of the carousel picture   The width of each picture is 620px   And assign the overall width value to ul;
            window.οnlοad=function(){
                imgList.style.width = imgList.children.length * 620 + "px";
                // adopt for loop , according to ul The length of the sub tag , Create the corresponding a Number of labels ;
                for (var i = 0; i < imgList.children.length; i++) {
                    var aNub = document.createElement('a');
                    // Created above a After label , We will build a Label placement circle In turn
                    circle.appendChild(aNub);
                    aNub.setAttribute('index', i);                

    let thisIndex=aNub.getAttribute('index');
                        aNub.οnclick=function(){
                          imgList.style.left=-thisIndex*620+"px";
                        }    

// In order to create and write later , So let's create another one index attribute  
                    // console.log(index);        

}

Automatic rotation part ：

css, And HTML The content is synchronized with the previous ;

js Call content ：

function animation(obj, target, callback) {
    clearInterval(obj.timer);// eliminate obj Of timer Method , Prevent animation from overlapping 
    obj.timer = setInterval(function () { // Add timer Method , Reduce memory consumption  obj Global object , The method added to it will not be destroyed as the callback function ends 
        var step = (target - obj.offsetLeft) / 10;// One action is done in ten times , So there will be a process   Slow down 
        //step There will be problems when it is not an integer , Take the value upward when moving forward , Value down when retreating , Move closer to the higher absolute value 
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {// Forward and backward share judgment sentences  ==
            clearInterval(obj.timer);
            /*  if (callback) {// Judge whether there are callback function parameters passed 
                 callback();// call 
             } */
            //  Logic and computation 
            callback && callback();
        }
        else {// Not writing will affect if Judge 
            // The step size is a fixed value ： uniform ;
            // obj.style.left = obj.offsetLeft + 1 + 'px';
            // Slow motion animation , Algorithm ： step =（ The target - The status value ）/ 10( It can be selected randomly )
            obj.style.left = obj.offsetLeft + step + 'px';

        }
    }, 15)
}

js Use the content section ：

var imgList = document.querySelector('.imgList');
			var circle = document.querySelector('.circle');
			var circleA = circle.children;
			var thisIndex = 0;
			var banner = document.querySelector('.banner');
			// Get viewport 
			var banWidth = banner.offsetWidth;
			window.onload = function() {
				imgList.style.width = imgList.children.length * 620 + 'px';
				for (var i = 0; i < imgList.children.length; i++) {
					var aNode = document.createElement('a');
					circle.appendChild(aNode);
					aNode.setAttribute('index', i);
				}

				var num = 0;
				circle.addEventListener('click', function(e) {

					if (e.target.nodeName != 'A') {
						return false;
					}
					thisIndex = e.target.getAttribute('index');
					imgList.style.left = -thisIndex * 620 + 'px';
                      circlechange();
				})


                // Timer part of automatic rotation ;
				setInterval(function(e) {
					if (num == imgList.children.length - 1) {
						// Restore initial 
						imgList.style.left = 0 + 'px';
						num = 0;
					}
					num++;
					// Add animation effect 
					animation(imgList, -num * banWidth);
				},2000)


				function circlechange() {
					// Clear style first   Add a style 
					for (var i = 0; i < circleA.length; i++) {
						circleA[i].className = '';
					}
					// default setting 0 Position style 
					circleA[thisIndex].className = 'hover';
				}
			}