个人中心
gpt4 book ai didi

js实现简单的轮播图效果

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 33 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js实现简单的轮播图效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了js实现简单的轮播图效果的具体代码，供大家参考，具体内容如下 。

js实现简单的轮播图效果

代码:

?
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
<!DOCTYPE html>
< html >
 
< head >
  < meta charset = "utf-8" />
  < title ></ title >
  < link rel = "stylesheet" type = "text/css" href = "css/style.css" />
  < style >
  * {
  margin: 0;
  padding: 0;
  }
 
  .box {
  width: 100%;
  height: 500px;
  border: 1px solid;
  }
  </ style >
  < script src = "./js/new_file.js" ></ script >
</ head >
 
< body >
  < div class = "box_1" >
  < div class = "c-banner" >
  < div class = "banner" >
  < ul id = "banner" >
   < li >< img src = "img/su_ning1.png" ></ li >
   < li >< img src = "img/su_ning2.png" ></ li >
   < li >< img src = "img/su_ning3.png" ></ li >
   < li >< img src = "img/su_ning4.png" ></ li >
   < li >< img src = "img/su_ning5.png" ></ li >
   < li >< img src = "img/su_ning6.png" ></ li >
   < li >< img src = "img/su_ning7.png" ></ li >
   < li >< img src = "img/su_ning8.png" ></ li >
  </ ul >
  </ div >
  < div class = "nexImg" id = "nexImg" >
  < img src = "img/nexImg.png" />
  </ div >
  < div class = "preImg" id = "preImg" >
  < img src = "img/preImg.png" />
  </ div >
  < div class = "jumpBtn" >
  < ul id = "jumpBtn" >
   < li ></ li >
   < li ></ li >
   < li ></ li >
   < li ></ li >
   < li ></ li >
   < li ></ li >
   < li ></ li >
  </ ul >
  </ div >
  </ div >
</ body >
 
</ html >

js

?
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
window.onload = function () {
  //banner 自动播放
  var oBanner = document.getElementById( 'banner' );
  var aLi = oBanner.getElementsByTagName( 'li' );
  var oJumpBtn = document.getElementById( 'jumpBtn' );
  var aBtn = oJumpBtn.getElementsByTagName( 'li' );
  var oPreImg = document.getElementById( 'preImg' );
  var oNexImg = document.getElementById( 'nexImg' );
  var iNow = 0;
  var timer = null ;
  for ( var i = 0; i < aBtn.length; i++) {
  aBtn[i].index = i;
  aBtn[i].onclick = function () {
  iNow = this .index;
  tab();
  };
  }
 
  function tab() {
  for ( var i = 0; i < aBtn.length; i++) {
  aBtn[i].style.background = '#ccc' ;
  aLi[i].style.opacity = 0;
  }
  aBtn[iNow].style.background = '#CF0F32' ;
  aLi[iNow].style.opacity = 1;
  }
 
  function tick() {
  iNow++;
  if (iNow == aBtn.length) {
  iNow = 0;
  }
  tab();
  }
 
  timer = setInterval(tick, 2000);
 
  oPreImg.onclick = function () {
  iNow--;
  if (iNow < 0) {
  iNow = aBtn.length - 1;
  }
  tab();
  };
  oNexImg.onclick = tick;
 
  oBanner.onmouseover = function () {
  clearInterval(timer);
  };
  oBanner.onmouseout = function () {
  timer = setInterval(tick, 2000);
  };
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/weixin_52630341/article/details/111053240 。

最后此篇关于js实现简单的轮播图效果的文章就讲到这里了,如果你想了解更多关于js实现简单的轮播图效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

33 4 0
文章推荐： SEO常用的12个搜索引擎指令
文章推荐： C++中new和delete的介绍
文章推荐： 20个值得收藏的SEO小技巧
文章推荐： jquery实现淡入淡出轮播图效果
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com