<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>大图滚动</title> ???<style type="text/css"> ???????*{ ???????????margin:0; ???????????padding:0; ???????????border:0; ???????} ???????.clear{ ???????????*zoom:1; ???????} ???????.clear:after{ ???????????visibility: none; ???????????content:""; ???????????display:block; ???????????clear:both; ???????????height:0; ???????} ???????#wrap{ ???????????width: 510px; ???????????height:286px; ???????????margin:0 auto; ???????????position:relative; ???????????background: pink; ???????????overflow: hidden; ???????} ???????#inner{ ???????????width: 1000%; ???????????height:100%; ???????????position:absolute; ???????????left:0; ???????????top:0; ???????} ???????#inner img{ ???????????width:10%; ???????????height:100%; ???????????float: left; ???????} ???????.paganation{ ???????????width: 100%; ???????????position: absolute; ???????????bottom:10px; ???????????text-align:center; ???????} ???????.paganation span{ ???????????padding:5px 8px; ???????????background: #F2F2F2; ???????????color:red; ???????????border-radius:50%; ???????????cursor: pointer ???????} ???????.paganation .selected{ ???????????background: red; ???????????color:white; ???????} ???????.arrow{ ???????????position:absolute; ???????????top:0; ???????????width: 30px; ???????????height: 286px; ???????????line-height: 286px; ???????????text-align: center; ???????????color: red; ???????????cursor: pointer; ???????} ???????#right{ ???????????right: 0; ???????} ???????.arrow:hover{ ???????????background: rgba(0,0,0,0.5); ???????} ???</style></head><body><div id="wrap"><!-- 图片展示区 --> ???<div id="inner" class="clear"><!-- 所有图片并排的块 --> ???????<img style="background:red;" src="img/1.jpg" alt=""> ???????<img style="background:orange;" src="img/2.jpg" alt=""> ???????<img style="background:green;" src="img/3.jpg" alt=""> ???????<img style="background:cyan;" src="img/4.jpg" alt=""> ???????<img style="background:yellow;" src="img/5.jpg" alt=""> ???????<img style="background:purple;" src="img/6.jpg" alt=""> ???????<img style="background:pink;" src="img/7.jpg" alt=""> ???????<img style="background:blue;" src="img/8.jpg" alt=""> ???????<img style="background:red;" src="img/1.jpg" alt=""> ???</div> ???<div class="paganation" id="paganation"><!-- 页面按钮区域 --> ???????<span class ="selected">1</span> ???????<span>2</span> ???????<span>3</span> ???????<span>4</span> ???????<span>5</span> ???????<span>6</span> ???????<span>7</span> ???????<span>8</span> ???</div> ???<div id="left" class="arrow"><</div><!-- 向左切换按钮 --> ???<div id="right" class="arrow">></div><!-- 向右切换按钮 --></div><script type="text/javascript"> ???var wrap=document.getElementById("wrap"); ???var inner=document.getElementById("inner"); ???var spanList=document.getElementById("paganation").getElementsByTagName("span"); ???var left=document.getElementById("left"); ???var right=document.getElementById("right"); ???var clickFlag=true;//设置左右切换标记位防止连续按 ???var time//主要用来设置自动滑动的计时器 ???var index=0;//记录每次滑动图片的下标 ???var Distance=wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度 ???//定义图片滑动的函数 ???function AutoGo(){ ???????var start=inner.offsetLeft;//获取移动块当前的left的开始坐标 ???????var end=index*Distance*(-1);//获取移动块移动结束的坐标。 ???????//计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。 ???????var change=end-start;//偏移量 ???????var timer;//用计时器为图片添加动画效果 ???????var t=0; ???????var maxT=50;//滑动的效率 ???????clear();//先把按钮状态清除,再让对应按钮改变状态 ???????if(index==spanList.length){ ???????????spanList[0].className="selected"; ???????}else{ ???????????spanList[index].className="selected"; ???????} ???????clearInterval(timer);//开启计时器前先把之前的清 ???????timer=setInterval(function(){ ???????????t++; ???????????if(t>=maxT){//当图片到达终点停止计时器 ???????????????clearInterval(timer); ???????????????clickFlag=true;//当图片到达终点才能切换 ???????????} ???????????inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动 ???????????if(index==spanList.length&&t>=maxT){ ???????????????inner.style.left=0; ???????????????index=0; ???????????????//当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果 ???????????} ???????},17); ???} ???//编写图片向右滑动的函数 ???function forward(){ ???????index++; ???????//当图片下标到最后一张把小标换0 ???????if(index>spanList.length){ ???????????index=0; ???????} ???????AutoGo(); ???} ???//编写图片向左滑动函数 ???function backward(){ ???????index--; ???????//当图片下标到第一张让它返回到倒数第二张， ???????//left值要变到最后一张才不影响过渡效果 ???????if(index<0){ ???????????index=spanList.length-1; ???????????inner.style.left=(index+1)*Distance*(-1)+"px"; ???????} ???????AutoGo(); ???} ???//开启图片自动向右滑动的计时器 ???time=setInterval(forward,3000); ???//设置鼠标悬停动画停止 ???wrap.onmouseover=function(){ ???????clearInterval(time); ???} ???wrap.onmouseout=function(){ ???????time=setInterval(forward,3000); ???} ???//遍历每个按钮让其切换到对应图片 ???for(var i=0;i<spanList.length;i++){ ???????spanList[i].onclick=function(){ ???????????index=this.innerText-1; ???????????AutoGo(); ???????} ???} ???//左切换事件 ???left.onclick=function(){ ???????if(clickFlag){ ???????????backward(); ???????} ???????clickFlag=false; ???} ???//右切换事件 ???right.onclick=function(){ ???????if(clickFlag){ ???????????forward(); ???????} ???????clickFlag=false; ???} ???//清除页面所有按钮状态颜色 ???function clear(){ ???????for(var i=0;i<spanList.length;i++){ ???????????spanList[i].className=""; ???????} ???}</script></body></html>原生JS实现图片轮播
原文地址：https://www.cnblogs.com/QianBoy/p/8206120.html