js实现轮播图特效

html结构

<div class="all" id='box'>
        <div class="screen">
            <!-- 无序列表 -->
            <ul>
                <li><img src="images/wf1.jpg" width="500" height="200" /></li>
                <li><img src="images/wf2.jpg" width="500" height="200" /></li>
                <li><img src="images/wf3.jpg" width="500" height="200" /></li>
                <li><img src="images/wf4.jpg" width="500" height="200" /></li>
                <li><img src="images/wf5.jpg" width="500" height="200" /></li>
            </ul>
            <!-- 有序列表 -->
            <ol>

            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>

先把css样式代码写好在用js让它动起来

<style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }
        
        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        
        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }
        
        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }
        
        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
        
        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
        
        .all ol li.current {
            background: yellow;
        }
        
        #arr {
            display: none;
            z-index: 1000;
        }
        
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
        
        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>

使用封装好的的js代码会省去很多时间的

// var timerId = null;
// 封装动画的函数
function animate(element, target) {
    // 通过判断，保证页面上只有一个定时器在执行动画
    if (element.timerId) {
        clearInterval(element.timerId);
        element.timerId = null;
    }

    element.timerId = setInterval(function() {
        // 步进  每次移动的距离
        var step = 10;
        // 盒子当前的位置
        var current = element.offsetLeft;


        // 判断如果当前位置 > 目标位置 此时的step  要小于0
        if (current > target) {
            step = -Math.abs(step);
        }

        // Math.abs(current - target)   <= Math.abs(step)
        if (Math.abs(current - target) <= Math.abs(step)) {
            // 让定时器停止
            clearInterval(element.timerId);
            // 让盒子到target的位置
            element.style.left = target + 'px';
            return;
        }
        // 移动盒子
        current += step;
        element.style.left = current + 'px';
    }, 5);
}
function my$(id) {
  return document.getElementById(id);
}

// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {
  var node, nodes = element.childNodes,
    i = 0;
  while (node = nodes[i++]) {
    if (node.nodeType === 1) {
      return node;
    }
  }
  return null;
}

// 处理浏览器兼容性
// 获取下一个兄弟元素
function getNextElementSibling(element) {
  var el = element;
  while (el = el.nextSibling) {
    if (el.nodeType === 1) {
      return el;
    }
  }
  return null;
}


// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
  // 判断当前浏览器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}

// 处理注册事件的兼容性问题
// eventName, 不带on，  click  mouseover  mouseout
function addEventListener(element, eventName, fn) {
  // 判断当前浏览器是否支持addEventListener 方法
  if (element.addEventListener) {
    element.addEventListener(eventName, fn); // 第三个参数 默认是false
  } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, fn);
  } else {
    // 相当于 element.onclick = fn;
    element['on' + eventName] = fn;
  }
}

首先获取元素注意使用自定义类名要规范

 var box = my$('box')
        var screen = box.children[0]
        var ul = screen.children[0]
        var ol = screen.children[1]
        var uli = ul.children
        var lis = ol.children;       
        var arr = my$('arr')
        var left = arr.children[0]
        var right = arr.children[1]

往直前建好的ol里面添加li 形成图片下标还要设置点击事件函数 顺便添加自定义类名后面要用的自定义类名的值  

 //往oi里面添加li
        for (var i = 0; i < uli.length; i++) {
            var li = document.createElement('li')
            li.innerText = i + 1
            ol.appendChild(li)
                //每个设置定时器函数 受到点击触发liclick（）
            li.onclick = liclick
                //设置自定义class类名 和值
            li.setAttribute('index', i)
        }

运用排他思想设置显示图片的下标背景发生变化， 在使用this关键字指向当前受到点击的下标获取他的自定义属性值 后乘以下标值加上-号就是往左边显示多少

 lis[0].className = 'current';
        // console.log(lis[0]);
        //受到点击触发排他思想 i 和 j  要看清！！！
        function liclick() {
            for (var j = 0; j < lis.length; j++) {
                //把新建的li的类名全部为空
                lis[j].className = ''
            }
            //点击到那个把那个li的类名设置成current
            this.className = 'current'
                //获取img图片的宽度 这个写的是显示区域的宽度
            var imgwidth = screen.offsetWidth
                //获取自定义类名的值
            var dd = this.getAttribute('index')
                //动画函数ul是总宽度 -往左 图片宽度x于第几张图面 -0x500为第一张 -1x500 就显示第二张了
            animate(ul, (-imgwidth * dd))

设置箭头出现隐藏

 //设置箭头出现隐藏
        box.onmouseenter = function() {
            arr.style.display = 'block'
        }
        box.onmouseleave = function() {
                arr.style.display = 'none'
            }

先克隆一个第一张图片添加到最后一张图片后面 实现无缝切换 注意放到代码最下方以免执行错误

 var firstli = ul.children[0]
        var newli = firstli.cloneNode(true)
        ul.appendChild(newli)

右边箭头点击事件

   //右边箭头点击事件
        // 先在上面设置一个获取总页数的变量
        right.onclick = function() {
                //如果当前页数等于总页数的话就把下标手动改成0并把它距离左边距里也改为0就回到了刚开始的位置
                if (index == zyshu) {
                    index = 0;
                    ul.style.left = '0px'
                }

                //不然就受到点击往右边加一
                index++
                // 接着判断index是不是小于总页数
                if (index < zyshu) {
                    //如果是的话就进来触发之前设置的点击事件跳到呢一张图
                    ol.children[index].click()
                } else {
                    //animate()是一个封装好的直接调用传参即可
                    animate(ul, -index * 500)
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = ''
                            // li.className = ''
                    }
                    //排他思想使第一个高亮
                    ol.children[0].className = 'current'
                }
            } //左边箭头点击事件

左边点击事件

 //左边箭头点击事件
        left.onclick = function() {
                //当前页面的下标如果等于0的话再点击就把他强制改为最后一张图

                if (index == 0) {
                    index = zyshu;
                    //更改ul距离左边的位置下标乘以图片宽度 加上-号就是该显示的页面
                    ul.style.left = -index * 500 + "px"
                }
                index--
                //不是就正常操作减减触发改下表的点击事件
                ol.children[index].click()

            }
            //左边点击事件

自动播放 间隙定时器重复调用右边点击事件即可

 var time = setInterval(function() {
            right.onclick()
        }, 1000)

想要实现鼠标进入图片停止定时器就在鼠标进入事件里面清除定时器 移除时再加上即可加上时不需要重新var；

希望大家努力学习 不要放弃