个人中心
gpt4 book ai didi

js实现幻灯片轮播图

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

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

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

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

1.html 。

选取了五张图片 放入div中，然后是左右箭头，以及按钮，代码如下 。

?
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
<!DOCTYPE html>
< html lang = "en" >
< head >
  < meta charset = "UTF-8" >
  < title >轮播图</ title >
  < link href = "../css/轮播图.css" rel = "stylesheet" >
</ head >
< body >
< div id = "box" >
  < img src = "../image/car-1.jpg" >
  < img src = "../image/car-2.jpg" >
  < img src = "../image/car-3.jpg" >
  < img src = "../image/car-4.jpg" >
  < img src = "../image/car-5.jpg" >
  < div class = "arrow" >
  < a class = "left" href = "javacript:void(0);" ><</ a >
  < a class = "right" href = "javacript:void(0);" >></ a >
  </ div >
  < ul class = "btn" >
  < li class = "on" slideIndex = "1" >1</ li >
  < li slideIndex = "2" >2</ li >
  < li slideIndex = "3" >3</ li >
  < li slideIndex = "4" >4</ li >
  < li slideIndex = "5" >5</ li >
  </ ul >
</ div >
< script src = "../js/轮播图.js" >
  </ script >
</ body >
</ html >

2.css给div设置居中 。

将所有图片隐藏，设置箭头和小圆点的样式 代码如下 。

?
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
*{
  margin : 0 ;
  padding : 0 ;
  text-decoration : none ;
  list-style : none ;
}
#box{
  width : 800px ;
  height : 500px ;
  margin : 50px auto 0px ;
  position : relative ;
}
#box img{
  width : 800px ;
  height : 500px ;
  display : none ;
  animation:fade 3 s;
}
#box .arrow{
  width : 800px ;
  height : 80px ;
  position : absolute ;
  top : 50% ;
  margin-top : -40px ;
}
#box .arrow . left ,. right {
  display : inline- block ;
  line-height : 80px ;
  width : 50px ;
  height : 80px ;
 
}
#box .arrow . left :hover{
  background :rgba( 0 , 0 , 0 , 0.8 );
}
#box .arrow . right :hover{
  background :rgba( 0 , 0 , 0 , 0.8 );
}
#box .arrow . right {
  text-align : right ;
  position : absolute ;
  right : 0 ;
}
#box .arrow a{
  font-size : 50px ;
  color : #ffffff ;
}
#box .btn{
  position : absolute ;
  bottom : 10px ;
  left : 50% ;
  margin-left : -98.47px ;
  text-align : center ;
}
#box .btn li{
  text-align : center ;
  margin : 0 5px ;
  padding : 10px ;
  float : left ;
  background : white ;
  border-radius: 20% ;
  cursor : pointer ;
 
  transition: background 2 s ease;
}
#box .btn .on{
  background : #000 ;
  color : white ;
}
@keyframes fade{
  from{
  opacity:. 4 ;
  }
  to{
  opacity: 1 ;
  }
}

3.js部分 。

js设定让当前图片显示display：block，其他图片隐藏display：none； 。

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
59
60
window.onload= function () {
  var left=document.getElementsByClassName( "left" )[0];
  var right=document.getElementsByClassName( "right" )[0];
  var btn=document.getElementsByClassName( "btn" )[0].getElementsByTagName( "li" );
  var box=document.getElementById( "box" );
  var slideIndex=1;
  var index=1;
  var timer;
  //图片切换函数
  showSlides(slideIndex);
  function showSlides(n) {
  var slides=document.getElementById( "box" ).getElementsByTagName( "img" );
  for ( var i=0;i<slides.length;i++){
   slides[i].style.display= "none" ;
   btn[i].className= "" ;
  }
  slides[slideIndex-1].style.display= "block" ;
   btn[slideIndex-1].className= "on"
  }
  //箭头切换
  left.onclick= function () {
  if (slideIndex>1) {
   slideIndex--;
   showSlides(slideIndex);
  } else {
   slideIndex=5;
   showSlides(slideIndex);
  }
  }
   right.onclick= function () {
   if (slideIndex<5) {
    slideIndex++;
    showSlides(slideIndex);
   } else {
    slideIndex=1;
    showSlides(slideIndex);
   }
   }
   //btn切换
  for ( var i=0;i<btn.length;i++){
  btn[i].onclick= function () {
   var myslideIndex= this .getAttribute( 'slideIndex' );
   // var myindex=parseInt(this.getAttribute("index"));
   slideIndex=myslideIndex;
   showSlides(slideIndex);
  }
  }
  //自动播放
  function play() {
  timer=setInterval( function () {
   right.onclick();
  },4000);
  }
  function stop() {
  clearInterval(timer);
  }
box.onmouseout=play;
  box.onmouseover=stop;
  play();
}

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

原文链接：https://blog.csdn.net/weixin_45596380/article/details/105929563 。

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

26 4 0
文章推荐： vue项目接口管理,所有接口都在apis文件夹中统一管理操作
文章推荐： vue实现把接口单独存放在一个文件方式
文章推荐： 查找Vue中下标的操作(some和findindex)
文章推荐： 修改Vue打包后的默认文件名操作
qq735679552
个人简介

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

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