js图片轮播效果实现代码

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量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
关注
  • 9
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
js实现图片轮番效果，原生代码
莫小遇
07-04 2618
我们在浏览网页的时候，会经常看到网页上有图片轮番效果，虽然网上有很多优秀的特效代码，但是作为菜鸟的我，依旧决定写一个自己的照片轮番，只为给自己增加一点点安全感。        分析下，思想很简单。图片轮番：（需要用到的方法） 1：隔一段时间自动循环展示图片。||{setInterval(),} 2：当鼠标进入到图层区域时，图片停止轮番。||{clearInterval(),} 3：当鼠标移
js实现轮播图效果
qq_42673485的博客
06-22 300
动画效果js部分: function animate(obj, target,callback) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.o
图片轮播php代码
01-04
图片轮播代码资源共享，希望给大家带来喜欢。
JS实现轮播图(超详细代码注释)
热门推荐
m0_56836274的博客
08-24 2万+
html，css,javasript实现轮播图,超详细代码注释。实现的功能有：自动轮播，鼠标放上去停止轮播，鼠标离开自动轮播，点击下方小圆圈实现图片切换，点击左右按钮实现切换
原生js实现轮播图的两种方式
最新发布
h395910638的博客
06-17 418
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
JS实现轮播图的三种简单方法。
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码）
qq_52799985的博客
08-09 9862
做一个简单的js图片轮播效果并不需要特别多的知识点，代码逐行讲解，小白必看。
使用JS来实现轮播图的效果
weixin_64965154的博客
05-25 7539
第一步我们先获取三个元素，toggle()是一个方法调用，我是把左边和右边的写在一个方法，显示更加美观，，然后呢我们执行右侧按钮业务，还是先获取右侧按钮，然后定义一个信息量i=0。3，最后讲一个功能，这里我们依旧是在定时器上面声明一个变量，因为我们定时器也是有一直在懂，所以我们来这块设定一个点击事件。但是当我们轮播图到了最后一个，需要往返第一个，这时候我们需要判断，如果到了素组下标为8的时候，我们就得返回第一个。第一个是鼠标经过停止事件，第二个是开始事件，这样呢我们一个完整的轮播图就做出来了。
原生js图片轮播效果实现代码
01-19
现在很多javascript的插件都可以实现图片轮播的功能，这篇文章，主要是通过这个domo来解析javascript图片轮播的原理。 老规矩，先上代码。至于代码中的图片，随便找三张即可，最核心的还是理解其思想。 html： &...
JavaScript实现简单图片轮播效果
10-19
主要介绍了JavaScript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript表单校验
mqingo的博客
11-11 956
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
js实现图片轮播图效果
Rockandrollman的博客
01-09 181
使用css加js加html实现一个简单的轮播图效果。js实现图片轮播图效果。
js轮播图 最简单代码
m0_54589634的博客
10-24 2万+
js轮播图 最简单代码 今天来分享一篇js最简单轮播图轮播图，用最简单的代码实现： 首先，建立一个HTML文件，插入img标签，这里我们定义图片id为pic 然后使用document.getElementByid()获取img标签的id，并且定一个一个变量obj储存对象 把轮播的图片设置数字.JPG(方便插入) 定义一个全局变量num，这里我们初始图片为0.JPG。num初始值可以设置为0 创建轮播函数，使用obj变量设置img标签插入的图片，随着num数值的变化切换图片，当切换到最后一张图片时，num重
JS实战轮播图详细代码
一步一个脚印，踏实努力，向着目标前进
06-12 4119
这个例子实现了一个简单的轮播图，通过CSS设置轮播图的样式、布局，通过JS实现轮播图的切换、导航等功能。可以根据实际需求进行修改和扩展。
【JavaScript】一个简单的小案例，关于如何实现轮播图(附完整代码)
zhangawei123的博客
05-28 729
函数首先检查`isPaused`变量的值，如果为`false`表示没有暂停，则将`currentPosition`减去一个图片的宽度。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。2.. 鼠标悬停/离开事件功能：通过使用`addEventListener()`方法，为轮播图容器添加了`mouseenter`和`mouseleave`事件监听器。当鼠标离开容器时，将`isPaused`变量设置为`false`，表示恢复自动轮播。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
js简单实现轮播图效果
qq_45907365的博客
03-29 930
这里将会用js简单实现轮播图的效果。
js实现自动轮播效果【两种方式】
qq_57218855的博客
09-02 4282
js图片动画效果

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值