轮播图共计四种方法，本期先向大家分享两种，下期会补充剩余二个方法

公共部分：

* {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内容部分：

<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>

第一种方法的js内容：

var imgList = document.querySelector('.imgList');
           var banner = document.querySelector('.banner');
           var circle = document.querySelector('.circle');
       window.οnlοad=function()

//获取轮播图图片的长度每个图片的宽度为620px 并将整体的宽度值赋给ul;
               imgList.style.width = imgList.children.length * 620 + "px";
               //通过for循环，根据ul子标签的长度，创建相应的a标签个数；
               for (var i = 0; i < imgList.children.length; i++) {
                   var aNub = document.createElement('a');
                   //上面创建好a标签后，我们将建好的a标签放置circle后面依次排列
                   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'){
                   //返回false 即退出操作
                   return false;
               }
               // thisIndex = e.target.getAttribute('index');
                   //调用小圆点改变样式的函数
                   // circlechange();
               })
           }

第二种方法的js内容：

var imgList = document.querySelector('.imgList');
           var banner = document.querySelector('.banner');
           var circle = document.querySelector('.circle');
           var circleA = circle.children;
           var thisIndex = 0;
           //获取轮播图图片的长度每个图片的宽度为620px 并将整体的宽度值赋给ul;
           window.οnlοad=function(){
               imgList.style.width = imgList.children.length * 620 + "px";
               //通过for循环，根据ul子标签的长度，创建相应的a标签个数；
               for (var i = 0; i < imgList.children.length; i++) {
                   var aNub = document.createElement('a');
                   //上面创建好a标签后，我们将建好的a标签放置circle后面依次排列
                   circle.appendChild(aNub);
                   aNub.setAttribute('index', i);

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

//为了后面的创建及编写需要，我们再创建一个index属性
// console.log(index);

}

自动轮播部分：

css，及HTML内容与上同步；

js调用内容：

function animation(obj, target, callback) {clearInterval(obj.timer);//清除obj的timer方法，防止动画叠加obj.timer = setInterval(function () { //为元素对象添加timer方法，减少内存消耗 obj是全局对象，为其添加的方法不会随着回调函数结束而销毁var step = (target - obj.offsetLeft) / 10;//一个动作分十次做完，所以会有过程 减速//step不为整数时会出问题，前进时向上取值，后退时向下取值，往绝对值较大数值靠拢step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {//前进与后退共用判断语句 ==clearInterval(obj.timer);/*  if (callback) {//判断是否有回调函数参数传递callback();//调用} */// 逻辑与运算callback && callback();}else {//不写会影响if判断//步长为固定值：匀速；// obj.style.left = obj.offsetLeft + 1 + 'px';//缓动动画，算法：步长=（目标值-状态值）/ 10(可随机取值)obj.style.left = obj.offsetLeft + step + 'px';}}, 15)
}

js使用内容部分：

var imgList = document.querySelector('.imgList');var circle = document.querySelector('.circle');var circleA = circle.children;var thisIndex = 0;var banner = document.querySelector('.banner');//获取视口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();})//自动轮播的定时器部分；setInterval(function(e) {if (num == imgList.children.length - 1) {//恢复初始imgList.style.left = 0 + 'px';num = 0;}num++;//添加动画效果animation(imgList, -num * banWidth);},2000)function circlechange() {//先清除样式 再添加样式for (var i = 0; i < circleA.length; i++) {circleA[i].className = '';}//默认设置0位置样式circleA[thisIndex].className = 'hover';}}

轮播图的两种方法及自动轮播相关推荐

前端实现轮播图的三种方法。
轮播图,作为前端学习的经典案例,涉及了各种知识点,包括动画函数,js基础知识以及逻辑思路等,一辈子只做一次. 下面总结实现轮播图的三种方法,从易到难,大家选择性学习. 轮播图一. Vue.js实现轮 ...
matlab 图像转视频教程,Matlab制作视频并转换成gif动态图的两种方法
一.第一个方法比较简单,就是使用movie(f)直接取生成AVI视频文件. %% f(t)-->f(4*t+12) 并且验证%% function Signal_change() tic%记录程 ...
python matplotlib在一张画布上画多个图的两种方法，plt.subplot(),plt.subplots()。
Matplotlib在一张画布上画多个图的两种方法,plt.subplot,plt.subplots. 目录回顾 plt.subplots()画法 plt.subplot()画法保存回顾之前也 ...
html图片轮播怎么做的,CSS3制作轮播图的一种方法
轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种下面是style部分: 这几行都能明白吧 *{margin:0;padding:0;} a{text-decoration:n ...
python3+matplotlib绘制双轴折线图（两种方法）
Background 这里提供两种方法,一种是基于pandas,另一种是基于twinx. 1.先看最终效果图 pandas twinx 2.源码 import pandas as pd import ...
Matlab画三维图的两种方法
2010-11-07 21:20:30 zz: http://hi.baidu.com/mynana/blog/item/3c79c1ce6b65cb0393457e7a.html 这几天看到Ras ...
JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
JS轮播图的n种方法
第一种轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en&quo ...
Python可视化 | Matplotlib绘制圆环图的两种方法！
人生苦短,快学Python!今天给大家介绍Python可视化之环形图的绘制. 环形图,也被称为圆环图.它在功能上与饼图相同,只是中间有一个空白,并且能够同时支持多个统计数据.与标准饼图相比,环形图提供 ...

轮播图的两种方法及自动轮播