第基于JavaScript實現(xiàn)簡單的輪播圖本文實例為大家分享了JavaScript實現(xiàn)簡單的輪播圖的具體代碼，供大家參考，具體內容如下

js輪播圖實現(xiàn)思路

1、先獲取元素盒子左右按鈕

2、鼠標經過顯示/隱藏左右側按鈕

3、動態(tài)生成小圓圈、添加自定義屬性

4、小圓圈點擊事件添加current類名

5、添加動畫事件animate等于-索引號*focusWidth

6、克隆第一張圖片到最后面

7、添加右側/左側按鈕點擊事件

8、設置定時器手動調用右側按鈕點擊事件

html代碼部分

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

linkrel="stylesheet"href="css/index.css"

scriptsrc="js/index.js"/script

/head

body

div

ahref="javascript:;"/a

ahref="javascript:;"

ahref=""imgsrc="images/focus.jpg"alt=""/a

/li

ahref=""imgsrc="images/focus1.jpg"alt=""/a

/li

ahref=""imgsrc="images/focus2.jpg"alt=""/a

/li

ahref=""imgsrc="images/focus3.jpg"alt=""/a

/li

/ul

/ol

/div

/body

/html

css樣式部分

padding:0;

margin:0;

li{

list-style:none;

img{

border:0;

vertical-align:top;

text-decoration:none;

.focus{

position:relative;

width:721px;

height:455px;

margin:100pxauto;

overflow:hidden;

.focusul{

position:absolute;

top:0;

left:0;

width:600%;

.focusulli{

float:left;

.arrow_r,

.arrow_l{

display:none;

position:absolute;

top:50%;

transform:translateY(-50%);

width:40px;

height:40px;

line-height:40px;

text-align:center;

font-size:24px;

background:rgba(0,0,0,.2);

color:#fff;

z-index:1;

.arrow_r{

right:0;

.circle{

position:absolute;

bottom:10px;

left:50px;

.circleli{

float:left;

width:8px;

height:8px;

border:2pxsolidrgba(255,255,255,.5);

border-radius:50%;

margin:03px;

cursor:pointer;

.current{

background-color:#fff;

}

javascript部分

window.addEventListener('load',function(){

//獲取元素

varfocus=document.querySelector('.focus');

vararrow_r=document.querySelector('.arrow_r');

vararrow_l=document.querySelector('.arrow_l');

varfocusWidth=focus.offsetWidth;

//鼠標經過focus盒子顯示/隱藏左右側按鈕暫停輪播

focus.addEventListener('mouseenter',function(){

arrow_r.style.display='block';

arrow_l.style.display='block';

clearInterval(timer);

timer=null;

focus.addEventListener('mouseleave',function(){

arrow_r.style.display='none';

arrow_l.style.display='none';

timer=setInterval(function(){

//調用點擊事件

arrow_r.click();

},2000);

//動態(tài)生成小圓圈

varul=focus.querySelector('ul');

varol=focus.querySelector('.circle');

for(vari=0;iul.children.length;i++){

varli=document.createElement('li');

li.setAttribute('index',i);

ol.appendChild(li);

//小圓圈點擊事件

li.addEventListener('click',function(){

for(vari=0;iol.children.length;i++){

ol.children[i].className='';

varindex=this.getAttribute('index');

num=index;

circle=index;

this.className='current';

animate(ul,-index*focusWidth);

ol.children[0].className='current';

//克隆第一張圖片放到最后一張

varfis=ul.children[0].cloneNode(true);

ul.appendChild(fis);

//右側按鈕點擊事件

varnum=0;

varcircle=0;

arrow_r.addEventListener('click',function(){

if(num===ul.children.length-1){

ul.style.left=0;

num=0;

num++;

animate(ul,-num*focusWidth);

circle++;

if(circle===ul.children.length-1){

circle=0;

for(vari=0;iol.children.length;i++){

ol.children[i].className='';

ol.children[circle].className='current';

//左側按鈕點擊事件

arrow_l.addEventListener('click',function(){

if(num==0){

num=ul.children.length-1;

ul.style.left=-num*focusWidth+'px';

num--;

animate(ul,-num*focusWidth);

circle--;

circle=circle0ol.children.length-1:circle;

//調用函數(shù)

circleChange();

//清除其余小圓圈的current類名

functioncircleChange(){

for(vari=0;iol.children.length;i++){

ol.children[i].className='';

//留下當前的小圓圈的current類名

ol.children[circle].className='current';

//動畫函數(shù)

functionanimate(obj,target,callback){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

varstep=(target-obj.offsetLeft)/10;

step=step0Math.ceil(step):Math.floor(step);

if(obj.offsetLeft==target){

clearInterval(obj.t