之前用定時(shí)器實(shí)現(xiàn)過(guò)一個(gè)輪播圖稚机，輪播圖的基本功能都能夠滿足慷彤，但有一個(gè)很大的缺點(diǎn)：切換頁(yè)面，或窗口縮小一段時(shí)間后结窘，再切回輪播圖所在頁(yè)面很洋，會(huì)發(fā)現(xiàn)輪播圖有加速效果（圖片以更快的速度往前連續(xù)滾動(dòng)多張）。
使用requestAnimationFrame()來(lái)實(shí)現(xiàn)則不會(huì)出現(xiàn)這樣的問(wèn)題隧枫，在頁(yè)面處于非激活狀態(tài)時(shí)喉磁，動(dòng)畫(huà)會(huì)自動(dòng)暫停。
html,css部分代碼和之前一致：
html
<body>
<div id= "parent">
<div id="uls">
<ul id="img_ul">
<li><img src="imgs/0.jpg"/></li>
<li><img src="imgs/1.jpg"/></li>
<li><img src="imgs/2.jpg"/></li>
<li><img src="imgs/3.jpg"/></li>
<li><img src="imgs/4.jpg"/></li>
</ul>
<ul id='litCir_ul'></ul>
</div>
<div id="buttons">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</body>
css
#parent{
position: relative;
margin: 50px auto;
padding: 0;
width: 500px;
height: 309px;
}
#uls{
position: relative;
margin: 0;
padding: 0;
width: 500px;
height: 309px;
overflow: hidden;
}
#img_ul{
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 3000px;
list-style: none;
}
#img_ul li{
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 309px;
}
#img_ul li img{
width: 500px;
height: 309px;
}
#litCir_ul{
position: absolute;
margin: 0;
padding: 0;
right: 10px;
bottom: 10px;
list-style: none;
}
#litCir_ul li{
margin: 0;
padding: 0;
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-left:10px ;
cursor: pointer;
}
li.active{
background-color: white;
}
li.quiet{
background-color: #1e90ff;
}
#buttons{
margin: 0;
padding: 0;
display: none;
}
#buttons span{
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: Simsun;
font-size: 30px;
border: 1px solid #fff;
opacity: 0.3;
cursor: pointer;
color: #fff;
background: black;
}
#left{
left: 5px;
}
#right{
left: 100%;
margin-left: -45px;
}
js
window.onload = function(){
/*獲取HTML中的對(duì)象*/
var parent = document.getElementById("parent");
var img_ul = document.getElementById("img_ul");
var litCir_ul = document.getElementById("litCir_ul");
var buttons = document.getElementById("buttons");
var cLis =litCir_ul.children;
var len = img_ul.children.length; //圖片張數(shù)
var width = parent.offsetWidth; //每張圖片的寬度
var rate = 15; //一張圖片的切換速度官脓，單位為px
var times = 1; //切換速度的倍率
var gap = 2000; //自動(dòng)切換間隙协怒，單位為毫秒
var timer = null; //初始化一個(gè)定時(shí)器
var picN = 0; //當(dāng)前顯示的圖片下標(biāo)
var cirN = 0; //當(dāng)前顯示圖片的小圓點(diǎn)下標(biāo)
var now;
var then = Date.now();
var temp;
/*克隆第一個(gè)li到列表末*/
img_ul.appendChild(img_ul.children[0].cloneNode(true));
for (var i=0; i<len; i++){
var a_li = document.createElement("li");
a_li.className = 'quiet';
litCir_ul.appendChild(a_li);
}
litCir_ul.children[0].className = "active";
function autoRoll(){
now = Date.now();
var t = now - then;
if(t >= gap){
if(Roll(-(picN+1)*width)){
picN++;
cirN++;
then = Date.now();
}
for(var i=0; i<len; i++){
cLis[i].className = "quiet";
}
if(cirN == len){
cirN = 0;
}
cLis[cirN].className = "active";
if(picN>=len){
img_ul.style.left = 0;
picN = 0;
}
}
timer = requestAnimationFrame(autoRoll);
}
autoRoll();
parent.onmouseover = function(){
cancelAnimationFrame(timer);
buttons.style.display = 'block';
}
parent.onmouseout = function(){
timer = requestAnimationFrame(autoRoll);
buttons.style.display = 'none';
}
for(var i=0; i<len; i++){
cLis[i].index = i;
cLis[i].onmouseover = function(){
var flag = 0;
var rollN = this.index;
for(var j=0; j<len; j++){
cLis[j].className = "quiet";
}
this.className = "active";
temp = cirN; //當(dāng)前active點(diǎn)
picN = cirN = this.index;
console.log('this.index:'+this.index);
times = Math.abs(this.index - temp); //距離上個(gè)小圓點(diǎn)的距離
if(times == 0){
return;
}
console.log('times:'+times);
rate = rate*times; //根據(jù)距離改變切換速率
function rollTo(){
cancelAnimationFrame(img_ul.timer);
if(Roll(-rollN * width)){
flag++;
if(flag == times){
cancelAnimationFrame(img_ul.timer);
rate = 15;
return;
}
}
img_ul.timer = requestAnimationFrame(rollTo);
}
rollTo();
}
}
/*上一張*/
buttons.children[0].onclick = previous;
/*下一張*/
buttons.children[1].onclick = next;
function next(){
cancelAnimationFrame(img_ul.timer);
if(Roll(-(picN+1)*width)){
cancelAnimationFrame(img_ul.timer);
picN++;
cirN++;
for(var i=0; i<len; i++){
cLis[i].className = "quiet";
}
if(cirN == len){
cirN = 0;
}
cLis[cirN].className = "active";
if(picN>=len){
img_ul.style.left = 0;
picN = 0;
}
return;
}
img_ul.timer = requestAnimationFrame(next);
}
function previous(){
if(picN<=0){
img_ul.style.left = -len*width + "px";
picN = len;
}
cancelAnimationFrame(img_ul.timer);
if(Roll(-(picN-1)*width)){
cancelAnimationFrame(img_ul.timer);
picN--;
cirN--;
for(var i=0; i<len; i++){
cLis[i].className = "quiet";
}
if(cirN < 0){
cirN = len-1;
}
cLis[cirN].className = "active";
return;
}
img_ul.timer = requestAnimationFrame(previous);
}
function Roll(distance){
var speed = img_ul.offsetLeft < distance ? rate:(0-rate);
img_ul.style.left = img_ul.offsetLeft + speed + "px";
var leave = distance - img_ul.offsetLeft;
if(Math.abs(leave)<=Math.abs(speed)){
img_ul.style.left = distance+"px";
return 1; //切換完一張圖片
}
return 0;
}
}
補(bǔ)全html，在指定位置放好圖片即可看到效果卑笨。
若你還不了解輪播圖的實(shí)現(xiàn)原理孕暇，歡迎閱讀這篇文章：
簡(jiǎn)單輪播圖的實(shí)現(xiàn)及原理講解（js）
