js图片轮播效果实现代码

最新推荐文章于 2024-08-12 16:04:13 发布
最新推荐文章于 2024-08-12 16:04:13 发布
阅读量1.7w 收藏 64
点赞数 9
分类专栏： Web Design 文章标签： javascript css
原文链接：http://www.jb51.net/article/74736.htm
版权
这篇文章主要介绍了js图片轮播效果实现代码，文章对每一步进行了详细阐述，标注注意事项，为顺利实现js图片轮播效果做好铺垫，对轮播效果感兴趣的朋友可以参考一下

首先给大家看一看js图片轮播效果，如下图

 

具体思路：

一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index
二、添加定时器，每隔2秒钟index递增一次、调用一次切换图片函数
提示:
1、 index不能一直无限制的递增下去，需做判断
2、调用切换图片函数时需将递增之后的index作为参数传过去
三、定义图片切换函数
提示:
  1.遍历所有放数字索引的li，将每个li上的类去掉。
  2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。
  3. 根据传递过来的index值计算放图片的ul的top值
  4. 改变index的值，让其等于传递过来的参数值
注意：放图片的ul的top值=-index*单张图片的高度（所有图片必须等高）
四、鼠标划过整个容器时，图片停止切换，离开继续
提示:
1.  鼠标滑过整个容器时清除定时器
2.  鼠标离开时继续执行定时器，切换至下一张图片
五、遍历所有放数字的li，且给他们添加索引、鼠标滑过时切换至对应的图片。
        鼠标滑过时调用图片切换函数，将滑过的li的索引传过去。
具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
< html lang = "en" >
< head >
  < meta charset = "UTF-8" >
  < title >Document</ title >
  < style >
  *{margin:0;
  padding:0;
  list-style:none;}
  .wrap{height:170px;
  width:490px;
  margin:60px auto;
  overflow: hidden;
  position: relative;
  margin:100px auto;}
  .wrap ul{position:absolute;}
  .wrap ul li{height:170px;}
  .wrap ol{position:absolute;
  right:5px;
  bottom:10px;}
  .wrap ol li{height:20px; width: 20px;
  background:#ccc;
  border:solid 1px #666;
  margin-left:5px;
  color:#000;
  float:left;
  line-height:center;
  text-align:center;
  cursor:pointer;}
  .wrap ol .on{background:#E97305;
  color:#fff;}
  </ style >
  < script type = "text/javascript" >
  window.onload=function(){
  var wrap=document.getElementById('wrap'),
  pic=document.getElementById('pic').getElementsByTagName("li"),
  list=document.getElementById('list').getElementsByTagName('li'),
  index=0,
  timer=null;
  // 定义并调用自动播放函数
  timer = setInterval(autoPlay, 2000);
  // 鼠标划过整个容器时停止自动播放
  wrap.onmouseover = function () {
  clearInterval(timer);
  }
  // 鼠标离开整个容器时继续播放至下一张
  wrap.onmouseout = function () {
  timer = setInterval(autoPlay, 2000);
  }
  // 遍历所有数字导航实现划过切换至对应的图片
  for (var i = 0; i < list.length ; i++) {
  list[i] .onmouseover = function () {
  clearInterval(timer);
  index = this .innerText - 1;
  changePic(index);
  };
  };
  function autoPlay () {
  if (++index >= pic.length) index = 0;
  changePic(index);
  }
  // 定义图片切换函数
  function changePic (curIndex) {
  for (var i = 0; i < pic.length ; ++i) {
  pic[i] .style.display = "none" ;
  list[i] .className = "" ;
  }
  pic[curIndex] .style.display = "block" ;
  list[curIndex] .className = "on" ;
  }
  };
  </script>
</ head >
< body >
  < div class = "wrap" id = 'wrap' >
  < ul id = "pic" >
  < li >< img src = "1.jpg" alt = "" ></ li >
  < li >< img src = "2.jpg" alt = "" ></ li >
  < li >< img src = "3.jpg" alt = "" ></ li >
  < li >< img src = "4.jpg" alt = "" ></ li >
  < li >< img src = "5.jpg" alt = "" ></ li >
  </ ul >
  < ol id = "list" >
  < li class = "on" >1</ li >
  < li >2</ li >
  < li >3</ li >
  < li >4</ li >
  < li >5</ li >
  </ ol >
  </ div >
</ body >
</ html >

以上就是本文的全部内容，为大家分享了js图片轮播效果实现代码，希望大家喜欢，根据自己的喜好更换图片，制作属于自己的图片轮播效果。

原文链接：http://www.jb51.net/article/74736.htm

ashui811
关注
专栏目录
纯js代码实现轮播图
03-13
纯js代码实现轮播图
js轮播图实现
qq_53843555的博客
05-29 5374
使用js实现轮播图
原生js实现轮播图
最新发布
qq_37432625的博客
08-12 142
前提：给定图片个数（默认是5），图片以 swiper1.jpg 类似这种命名。图片和.html文件在同一个文件夹下。bug：有bug，切换的时候的效果有点问题。功能：基础轮播图功能，拖拽切换图片。
轮播图的实现代码
weixin_45273903的博客
01-22 4575
<!DOCTYPE html> <html> <head> <title>轮播图的实现</title> <style> * { padding: 0; margin: 0; } .lunbo { width: 600px; height: 500px...
js实现图片轮播图效果
Rockandrollman的博客
01-09 191
使用css加js加html实现一个简单的轮播图效果。js实现图片轮播图效果。
原生js图片轮播效果实现代码
01-19
现在很多javascript的插件都可以实现图片轮播的功能，这篇文章，主要是通过这个domo来解析javascript图片轮播的原理。 老规矩，先上代码。至于代码中的图片，随便找三张即可，最核心的还是理解其思想。 html： &...
JavaScript实现简单图片轮播效果
10-19
JavaScript实现简单图片轮播效果的知识点主要包括以下方面： 1. 图片轮播基本原理：图片轮播是一种常见的网页交互效果，主要用于展示多张图片。一般通过定时器或手动触发事件来改变显示图片的位置，从而实现图片的...
用JS实现图片轮播效果代码（一）
12-28
一.实现原理 （1）将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏； （2）轮播图分为手动轮播和自动轮播； 手动轮播的重点是每次点击图片下方的小圆圈，获得它的索引号，并让与之对应索引号的图片显示，并且此时的小圆圈为高亮显示； 自动轮播：利用定时器setInterval()，来每隔一定的时间来播放一次图片。 （3）所有的基础知识：dom操作，定时器，事件运用。 二.轮播图页面布局： <!-- 总的父容器 --> <!-- 包含图片的容器 --> <div clas
轮播图源代码
06-17
用JavaScript做的轮播图，最新的思路，比较适合小白观看
css+jquery实现简单轮播图效果html代码
04-16
css+jquery实现最简单轮播图效果html代码
JavaScript代码实现简单的轮播图效果
Web_Struggle的博客
10-05 1713
JavaScript中的轮播图在许多网站中能够经常看到，如淘宝京东首页等。轮播图还是比较简单的，只要理解动画原理以及定时器函数 setTimeout()和clearTimeout() setInterval()和clearInterval() 这四个函数都是属于window对象的。Window是可以省略的。 使用格式： SetTimeout(函数，时间); SetInterva
使用JS来实现轮播图的效果
weixin_64965154的博客
05-25 7617
第一步我们先获取三个元素，toggle()是一个方法调用，我是把左边和右边的写在一个方法，显示更加美观，，然后呢我们执行右侧按钮业务，还是先获取右侧按钮，然后定义一个信息量i=0。3，最后讲一个功能，这里我们依旧是在定时器上面声明一个变量，因为我们定时器也是有一直在懂，所以我们来这块设定一个点击事件。但是当我们轮播图到了最后一个，需要往返第一个，这时候我们需要判断，如果到了素组下标为8的时候，我们就得返回第一个。第一个是鼠标经过停止事件，第二个是开始事件，这样呢我们一个完整的轮播图就做出来了。
js实现轮播图
qq_65528486的博客
08-09 1637
具有以下功能：1.自动图片轮播 2.鼠标移入当前页面暂停，移出继续播放 3.底下小按钮切换图片。
JS代码实现图片轮播
xiaomu_a的博客
04-06 1144
核心思想：轮播图，其实就是想要网页显示不同图片，只需要切换图片的SRC就可以了。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"...
JavaScript图片轮播代码
咔 簌的博客
03-04 507
图片材料如上 图片轮播 body,div,ul,li{ margin:0; padding:0; } ul{ list-style: none; } body{ text-align: center; } #box{ position: relative; width: 490px; height: 170px; background: #fff
js简单实现轮播图效果
qq_45907365的博客
03-29 967
这里将会用js简单实现轮播图的效果。
js实现轮播图完整代码
05-12
以下是一个简单的JS实现轮播图的完整代码： HTML代码： ```html <div class="slider"> <div class="slider-wrapper"> <img src="img/slide1.jpg" alt="Slide 1"> <img src="img/slide2.jpg" alt="Slide 2"> <img src="img/slide3.jpg" alt="Slide 3"> </div> <div class="slider-controls"> <span class="slider-control active"></span> <span class="slider-control"></span> <span class="slider-control"></span> </div> </div> ``` CSS代码： ```css .slider { position: relative; } .slider-wrapper { width: 100%; overflow: hidden; } .slider-wrapper img { width: 100%; display: none; } .slider-wrapper img.active { display: block; } .slider-controls { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .slider-control { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .slider-control.active { background-color: #333; } ``` JS代码： ```javascript // 获取轮播图容器和轮播图图片 const slider = document.querySelector('.slider'); const sliderWrapper = slider.querySelector('.slider-wrapper'); const sliderImgs = sliderWrapper.querySelectorAll('img'); // 获取轮播图控制器 const sliderControls = slider.querySelector('.slider-controls'); const sliderControlItems = sliderControls.querySelectorAll('.slider-control'); // 定义当前轮播图索引 let currentSlide = 0; // 切换轮播图函数 function changeSlide(index) { // 隐藏当前轮播图 sliderImgs[currentSlide].classList.remove('active'); sliderControlItems[currentSlide].classList.remove('active'); // 显示指定索引的轮播图 sliderImgs[index].classList.add('active'); sliderControlItems[index].classList.add('active'); // 更新当前轮播图索引 currentSlide = index; } // 定时切换轮播图 setInterval(() => { let nextSlide = currentSlide + 1; if (nextSlide >= sliderImgs.length) { nextSlide = 0; } changeSlide(nextSlide); }, 3000); // 点击控制器切换轮播图 sliderControls.addEventListener('click', (event) => { if (event.target.classList.contains('slider-control')) { const index = Array.from(sliderControlItems).indexOf(event.target); if (index !== currentSlide) { changeSlide(index); } } }); ``` 以上代码实现了一个简单的轮播图，可根据需要进行修改和扩展。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值