原生 js 实现各种轮播图效果

Love The Way You Lie 2022-05-28 10:23 340阅读 0赞

js 轮播图是利用 window 对象的 setInterval（）方法，clearInterval（）方法，setTimeout（）方法

以及clearTimeout（）方法实现图片轮播的效果；

（参考：

setInterval（code ，time） : code 是要执行的代码，通常是个函数，time是时间，单位毫秒ms, 这个方法的作用是

  1.                                           每间隔 time ms执行一下 code 部分，没有次数限制；

clearInterval （id ） ： 停止 id=setInterval（code, time）设置的定时器,

setTimeout( code , time ) : code是要执行的代码，通常是个函数，time 是时间，单位毫秒ms,这个方法的作用是 

  1.                                          倒计时 time ,然后执行一次code 部分，只执行一次；

clearTimeout( id ) ： 停止 id=setTimeout（code，time ）设置的定时器；

）

下面我们利用setInterval 实现一个最简单的轮播图效果：

请随意准备三张图片，分别为 lb0.jgp lb1.jpg lb2.jpg

实现代码：

<!doctype html>

< html>

< head>

< meta charset= “utf-8” >

< title >第一种轮播图 基础类型轮播图 </ title >

< style type = “text/css” >

.container {

margin : 0 auto;

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

img {

width : 100 % ;

height : 100 % ;

}

< / style >

</ head>

< body>

< div class= “container” >

< img src= “lb0.jpg” alt= “轮播图” id= “lun” >

</ div >

< script >

window. onload = function (){

//获取 img

var obj = document. getElementById ( “lun” );

var num = 0 ; //定义变量 num = 0 ;

function lunbo (){ //换图的函数

// 第一种换图方式

// if(num<2){

// num++

// }else{

// num=1;

// }

//第二种换图方式

num ++ ;

num = num % 3

//改变图片的src 指向下一张图片

obj . src = “lb” + num + “.jpg” ;

}

var abc = setInterval ( lunbo , 3000 ); //每隔三秒执行一下换图函数

}

< / script >

</ body>

</ html>

-—————————————————————————————————————————————————————————————-

上面实现了最简单的轮播图，下面我们开始给轮播图添加 左右的控制按钮，也就是可以根据我们的控制切换图片显示：

70

<!doctype html>

< html>

< head>

< meta charset= “utf-8” >

< title >第一种轮播图 基础类型轮播图 </ title >

< style type = “text/css” >

.container {

margin : 0 auto;

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

img {

width : 100 % ;

height : 100 % ;

}

span {

display :block;

width : 25 px ;

height : 50 px ;

background-color : rgba ( 0 , 0 , 0 , 0.4 );

border : 1 px solid #fff ;

color : #fff ;

line-height : 50 px ;

text-align :center;

position :relative;

cursor :pointer;

}

.container #left {

left : 20 px ;

top : -175 px ;

}

.container #right {

left : 255 px ;

top : -225 px ;

}

< / style >

</ head>

< body>

< div class= “container” >

< img src= “lb0.jpg” alt= “轮播图” id= “lun” >

< span id= “left” >< </ span >

< span id= “right” >> </ span >

</ div >

< script >

window. onload = function (){

//获取 img

var obj = document. getElementById ( “lun” );

//获取 left

var left = document. getElementById ( “left” );

//获取 right

var right = document. getElementById ( “right” );

//定义变量 num = 0 ;

var num = 0 ;

function lunbo (){ //换图的函数

++ num ;

num = num % 3

//改变图片的src 指向下一张图片

obj . src = “lb” + num + “.jpg” ;

}

var abc = setInterval ( lunbo , 3000 ); //每隔三秒执行一下换图函数

//绑定点击左 span 处理函数

left . onclick = function (){

-- num ;

if ( num < 0 ){

num = 2 ;

obj . src = “lb” + num + “.jpg” ;

} else {

obj . src = “lb” + num + “.jpg” ;

}

}

//绑定点击右 span 处理函数

right . onclick = function (){

++ num ;

num = num % 3

obj . src = “lb” + num + “.jpg” ;

}

}

< / script >

</ body>

</ html>

-———————————————————————————————————————————————————————————————-

我们在上面的例子中实现了左右点击切换图片的效果，但是，在切换的同时，setInterval(code,3000) 仍旧在执行，带来不好的

体验效果，我们将上面的例子改善一下，添加一个功能，当鼠标移动到图片上的时候，停止图片轮播，当鼠标移出图片的时候，

轮播又继续进行：

<!doctype html>

< html>

< head>

< meta charset= “utf-8” >

< title >第一种轮播图 基础类型轮播图 </ title >

< style type = “text/css” >

#container {

margin : 0 auto;

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

img {

width : 100 % ;

height : 100 % ;

}

span {

display :block;

width : 25 px ;

height : 50 px ;

background-color : rgba ( 0 , 0 , 0 , 0.4 );

border : 1 px solid #fff ;

color : #fff ;

line-height : 50 px ;

text-align :center;

position :relative;

cursor :pointer;

}

#container #left {

left : 20 px ;

top : -175 px ;

}

#container #right {

left : 255 px ;

top : -225 px ;

}

< / style >

</ head>

< body>

< div id= “container” >

< img src= “lb0.jpg” alt= “轮播图” id= “lun” >

< span id= “left” >< </ span >

< span id= “right” >> </ span >

</ div >

< script >

window. onload = function (){

//获取 img

var obj = document. getElementById ( “lun” );

//获取div container

var con = document. getElementById ( “container” );

//获取 left

var left = document. getElementById ( “left” );

//获取 right

var right = document. getElementById ( “right” );

//定义变量 num = 0 ;

var num = 0 ;

function lunbo (){ //换图的函数

++ num ;

num = num % 3

//改变图片的src 指向下一张图片

obj . src = “lb” + num + “.jpg” ;

}

var abc = setInterval ( lunbo , 3000 ); //每隔三秒执行一下换图函数

//绑定点击左 span 处理函数

left . onclick = function (){

-- num ;

if ( num < 0 ){

num = 2 ;

obj . src = “lb” + num + “.jpg” ;

} else {

obj . src = “lb” + num + “.jpg” ;

}

}

//绑定点击右 span 处理函数

right . onclick = function (){

++ num ;

num = num % 3

obj . src = “lb” + num + “.jpg” ;

}

//添加 onmouseover 事件，暂停停止轮播

con . onmouseover = function (){

clearInterval ( abc );

}

//添加 onmouseout 事件，继续轮播

con . onmouseout = function (){

abc = setInterval ( lunbo , 3000 );

}

}

< / script >

</ body>

</ html>

-———————————————————————————————————————————————————————————————

上面的例子基本就是一个完成的轮播图了，但是有的小伙伴又发现，有的轮播图的底部有一些小圆圈，里面标识着每个图片，

轮播到的图片的圆圈会有样式的变化，好吧，我们继续在上面的基础上改造我们的轮播图；

70 1

<!doctype html>

< html>

< head>

< meta charset= “utf-8” >

< title >第一种轮播图 基础类型轮播图 </ title >

< style type = “text/css” >

#container {

margin : 0 auto;

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

img {

width : 100 % ;

height : 100 % ;

}

span {

display :block;

width : 25 px ;

height : 50 px ;

background-color : rgba ( 0 , 0 , 0 , 0.4 );

border : 1 px solid #fff ;

color : #fff ;

line-height : 50 px ;

text-align :center;

position :relative;

cursor :pointer;

}

#container #left {

left : 20 px ;

top : -175 px ;

}

#container #right {

left : 255 px ;

top : -225 px ;

}

#locate {

position :relative;

top : -180 px ;

padding-left : 100 px ;

}

#locate li {

display :inline-block;

width : 25 px ;

height : 25 px ;

border : 1 px solid red;

text-align :center;

line-height : 25 px ;

color : #fff ;

}

< / style >

</ head>

< body>

< div id= “container” >

< img src= “lb0.jpg” alt= “轮播图” id= “lun” >

< span id= “left” >< </ span >

< span id= “right” >> </ span >

< ul id= “locate” >

< li >1 </ li >

< li >2 </ li >

< li >3 </ li >

</ ul >

</ div >

< script >

window. onload = function (){

//获取 img

var obj = document. getElementById ( “lun” );

//获取div container

var con = document. getElementById ( “container” );

//获取 left

var left = document. getElementById ( “left” );

//获取 right

var right = document. getElementById ( “right” );

//获取locate

var locate = document. getElementById ( “locate” );

//获取locate 下的 li 集合

var li = locate . getElementsByTagName ( “li” );

//定义变量 num = 0 ;

var num = 0 ;

//设置默认的第一个li显示绿色

li [ 0 ].style.color = “green” ;

function lunbo (){ //换图的函数

++ num ;

num = num % 3

//改变图片的src 指向下一张图片

obj . src = “lb” + num + “.jpg” ;

//通过for x循环清除li的所有样式

for ( var temp = 0 ; temp < 3 ; temp ++ ){

li [ temp ].style.color = “#fff” ;

}

//给本张图片对应的li 添加样式

li [ num ].style.color = “green” ;

}

var abc = setInterval ( lunbo , 3000 ); //每隔三秒执行一下换图函数

//绑定点击左 span 处理函数

left . onclick = function (){

-- num ;

if ( num < 0 ){

num = 2 ;

obj . src = “lb” + num + “.jpg” ;

//通过for x循环清除li的所有样式

for ( var temp = 0 ; temp < 3 ; temp ++ ){

li [ temp ].style.color = “#fff” ;

}

//给本张图片对应的li 添加样式

li [ num ].style.color = “green” ;

} else {

obj . src = “lb” + num + “.jpg” ;

//通过for x循环清除li的所有样式

for ( var temp = 0 ; temp < 3 ; temp ++ ){

li [ temp ].style.color = “#fff” ;

}

//给本张图片对应的li 添加样式

li [ num ].style.color = “green” ;

}

}

//绑定点击右 span 处理函数

right . onclick = function (){

++ num ;

num = num % 3

obj . src = “lb” + num + “.jpg” ;

//通过for x循环清除li的所有样式

for ( var temp = 0 ; temp < 3 ; temp ++ ){

li [ temp ].style.color = “#fff” ;

}

//给本张图片对应的li 添加样式

li [ num ].style.color = “green” ;

}

//添加 onmouseover 事件，暂停停止轮播

con . onmouseover = function (){

clearInterval ( abc );

}

//添加 onmouseout 事件，继续轮播

con . onmouseout = function (){

abc = setInterval ( lunbo , 3000 );

}

}

< / script >

</ body>

</ html>

-——————————————————————————————————————————————————————————————

我们又完善了一下上面的例子，然后又有小伙伴要说，那些个

  • 1
    • 可不可以点击啊，然后跳转到特定的图片，

    那是当然可以的，我们继续完善一下；

    <!doctype html>

    < html>

    < head>

    < meta charset= “utf-8” >

    < title >第一种轮播图 基础类型轮播图 </ title >

    < style type = “text/css” >

    #container {

    margin : 0 auto;

    width : 300 px ;

    height : 300 px ;

    border : 1 px solid red;

    }

    img {

    width : 100 % ;

    height : 100 % ;

    }

    span {

    display :block;

    width : 25 px ;

    height : 50 px ;

    background-color : rgba ( 0 , 0 , 0 , 0.4 );

    border : 1 px solid #fff ;

    color : #fff ;

    line-height : 50 px ;

    text-align :center;

    position :relative;

    cursor :pointer;

    }

    #container #left {

    left : 20 px ;

    top : -175 px ;

    }

    #container #right {

    left : 255 px ;

    top : -225 px ;

    }

    #locate {

    position :relative;

    top : -180 px ;

    padding-left : 100 px ;

    }

    #locate li {

    display :inline-block;

    width : 25 px ;

    height : 25 px ;

    border : 1 px solid red;

    text-align :center;

    line-height : 25 px ;

    color : #fff ;

    cursor :pointer;

    }

    < / style >

    </ head>

    < body>

    < div id= “container” >

    < img src= “lb0.jpg” alt= “轮播图” id= “lun” >

    < span id= “left” >< </ span >

    < span id= “right” >> </ span >

    < ul id= “locate” >

    < li >1 </ li >

    < li >2 </ li >

    < li >3 </ li >

    </ ul >

    </ div >

    < script >

    window. onload = function (){

    //获取 img

    var obj = document. getElementById ( “lun” );

    //获取div container

    var con = document. getElementById ( “container” );

    //获取 left

    var left = document. getElementById ( “left” );

    //获取 right

    var right = document. getElementById ( “right” );

    //获取locate

    var locate = document. getElementById ( “locate” );

    //获取locate 下的 li 集合

    var li = locate . getElementsByTagName ( “li” );

    //定义变量 num = 0 ;

    var num = 0 ;

    //设置默认的第一个li显示绿色

    li [ 0 ].style.color = “green” ;

    function lunbo (){ //换图的函数

    ++ num ;

    num = num % 3

    //改变图片的src 指向下一张图片

    obj . src = “lb” + num + “.jpg” ;

    //通过for x循环清除li的所有样式

    for ( var temp = 0 ; temp < 3 ; temp ++ ){

    li [ temp ].style.color = “#fff” ;

    }

    //给本张图片对应的li 添加样式

    li [ num ].style.color = “green” ;

    }

    var abc = setInterval ( lunbo , 3000 ); //每隔三秒执行一下换图函数

    //绑定点击左 span 处理函数

    left . onclick = function (){

    -- num ;

    if ( num < 0 ){

    num = 2 ;

    obj . src = “lb” + num + “.jpg” ;

    //通过for x循环清除li的所有样式

    for ( var temp = 0 ; temp < 3 ; temp ++ ){

    li [ temp ].style.color = “#fff” ;

    }

    //给本张图片对应的li 添加样式

    li [ num ].style.color = “green” ;

    } else {

    obj . src = “lb” + num + “.jpg” ;

    //通过for x循环清除li的所有样式

    for ( var temp = 0 ; temp < 3 ; temp ++ ){

    li [ temp ].style.color = “#fff” ;

    }

    //给本张图片对应的li 添加样式

    li [ num ].style.color = “green” ;

    }

    }

    //绑定点击右 span 处理函数

    right . onclick = function (){

    ++ num ;

    num = num % 3

    obj . src = “lb” + num + “.jpg” ;

    //通过for x循环清除li的所有样式

    for ( var temp = 0 ; temp < 3 ; temp ++ ){

    li [ temp ].style.color = “#fff” ;

    }

    //给本张图片对应的li 添加样式

    li [ num ].style.color = “green” ;

    }

    //添加 onmouseover 事件，暂停停止轮播

    con . onmouseover = function (){

    clearInterval ( abc );

    }

    //添加 onmouseout 事件，继续轮播

    con . onmouseout = function (){

    abc = setInterval ( lunbo , 3000 );

    }

    //给 li 绑定点击事件

    for ( var i = 0 ; i < li .length; i ++ ){

    li [ i ].value = i ;

    li [ i ]. onclick = function (){

    num = this .value;

    obj . src = “lb” + num + “.jpg” ;

    //通过for x循环清除li的所有样式

    for ( var temp = 0 ; temp < 3 ; temp ++ ){

    li [ temp ].style.color = “#fff” ;

    }

    //给本张图片对应的li 添加样式

    li [ num ].style.color = “green” ;

    }

    }

    }

    < / script >

    </ body>

    </ html>

    至此，我已经想不来常用的还有哪些功能可以添加了，但是轮播图就结束了么，不是的，下一次，我们来看看：

    无缝滚动轮播图是怎么样实现的；

    休息一下~

    发表评论

    表情：
    评论列表 （有 0 条评论，340人围观）

    还没有评论，来说两句吧...

    相关阅读

      相关 原生js实现轮播图

              很多很多网站经常会用到一个特效，那就是轮播图，对于日新月异的前端技术来说其实就是一个框架一个接口的事，但轮播的原理是什么？用最原始的javascript来写又是

      心已赠人心已赠人/ 0 赞/ 360 阅读

      相关 原生js实现轮播图

      轮播图基本上是前端所必须面临的一个功能。而且在网上可以找到各种各样的插件或者写法。 但是我个人觉得还是写一下比较好。这里用到的是原生JS、CSS3相结合的写法。 对IE 8

      我就是我我就是我/ 0 赞/ 430 阅读

      相关 轮播图 原生js实现

      原生js实现轮播图 　很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。 　[

      你的名字你的名字/ 0 赞/ 462 阅读