JavaScript实现简单图片轮播效果       这篇文章主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现简单图片轮播的具体代码，最终实现效果图

代码块

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" / 
 title /title 
 style 
 margin: 0;
 padding: 0
 ul {
 list-style: none
 img {
 vertical-align: top
 .box {
 width: 490px;
 height: 170px;
 margin: 100px auto;
 padding: 5px;
 border: 1px solid #ccc;
 .inner {
 width: 490px;
 height: 170px;
 background-color: pink;
 overflow: hidden;
 position: relative;
 .inner ul {
 width: 1000%;
 position: absolute;
 top: 0;
 left: 0;
 .inner li {
 float: left;
 .square {
 position: absolute;
 right: 10px;
 bottom: 10px;
 .square span {
 display: inline-block;
 width: 16px;
 height: 16px;
 background-color: #fff;
 text-align: center;
 line-height: 16px;
 cursor: pointer;
 .square span.current {
 background-color: orangered;
 color: #fff;
 /style 
 /head 
 body 
 div id="box" 
 div 
 li a href="#" img src="images/01.jpg" / /a /li 
 li a href="#" img src="images/02.jpg" / /a /li 
 li a href="#" img src="images/03.jpg" / /a /li 
 li a href="#" img src="images/04.jpg" / /a /li 
 li a href="#" img src="images/05.jpg" / /a /li 
 /ul 
 div 
 span 1 /span 
 span 2 /span 
 span 3 /span 
 span 4 /span 
 span 5 /span 
 /div 
 /div 
 /div 

 var box = document.getElementById("box");
 var inner = box.children[0]; //获取box下的第一个元素，也就是inner
 var ul = inner.children[0]; //获取inner下的ul
 var squareList = inner.children[1]; //获取inner下的第二个元素
 var squares = squareList.children; //获取所有的按钮
 var imgWidth = inner.offsetWidth;
// alert(imgWidth);
 //给每个按钮注册鼠标经过事件
 for(var i=0; i squares.length; i++){
 squares[i].index = i; //把索引保存在自定义属性中
 squares[i].onmouseover = function(){ //鼠标经过事件
 //排他 干掉所有人 
 for(var j=0; j squares.length; j++){
 squares[j].className = "";
 //留下我自己
 this.className = "current";
 //以动画的方式把ul移动到指定的位置
 //目标 和当前按钮索引有关，和图片宽度有关 而且是负数
 var target = -this.index * imgWidth; //获取到索引
 animate(ul,target);

 var step = obj.offsetLeft target step : -step;
 if (Math.abs(obj.offsetLeft - target) Math.abs(step)) {
 obj.style.left = obj.offsetLeft + step + "px";
 } else {
 obj.style.left = target + "px";
 clearInterval(obj.timer);
 }, 15)