banner图滚动的两种方式

本文最后更新于：1 年前

利用CSS动画效果制作循环滚动的动画

设置图片宽度

以1920px的图片为例，首先要用一个div将滚动的banner图包起来，比如像下面这样：

1
2
3
<div id="banner">
    <img src="../img/banner.jpg" />
</div>

接下来对图片宽度和高度进行调整：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css" >
	*{
		margin: 0;
		padding: 0;
	}
	#banner{
		width: 100%;  /*宽度为浏览器的100%*/
		height: 500px;  /*原则上,高度=图片高度*/
		overflow:hidden;
		position: relative;
	}
	#banner img{
		width: 1920px; /*宽度为图片的实际宽度*/
		height: 100%; /*高度充满父容器*/
                
		/*使用绝对定位,让图片在父容器中绝对居中*/
		position: absolute;
		left: 50%;
		margin-left: -960px;
	}
</style>

使用动画实现滚动功能

下面是使用动画实现滚动的示意图：

动画滚动

具体实现方法如下：

1
2
3
4
5
6
7
8
<div id="banner">
    <div id="banner_in">
        <img src="../img/banner1.png" /><!--为了去掉图片之间的缝隙-->
        <img src="../img/banner2.png" /><!--为了去掉图片之间的缝隙-->
        <img src="../img/banner3.png" /><!--为了去掉图片之间的缝隙-->
        <img src="../img/banner1.png" />
    </div>
</div>

注意：上面代码中，每个img标签后面都加了一个注释，原因是为了去掉图片之间的缝隙，把所有的img标签写在同一行也可以达到效果。

下面是CSS代码：

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
<style type="text/css">
*{
    margin: 0px;
    padding: 0px;
}
#banner{
    width: 100%;
    height: 500px;
    overflow: hidden;
}
#banner_in{
    width: 7680px;
    height: 500px;
    position: relative;
    -webkit-animation: banner 8s ease infinite;
}

@-webkit-keyframes banner{
    0%{
        left: 0px;
    }
    10%{
        left: 0px;
    }
    30%{
        left: -1920px;
    }
    40%{
        left: -1920px;
    }
    70%{
        left: -3840px;
    }
    80%{
        left: -3840px;
    }
    100%{
        left: -5760px;
    }
}
</style>

至此，一个使用动画功能做出来的banner滚动就实现了，如果要暂停滚动可以利用鼠标hover事件设置动画的状态属性，以达到暂停banner滚动的目的。

利用CSS和JavaScript实现banner滚动和点击切换

​ 上面利用CSS使banner滚动的方法虽然比较简单，但是如果想看其中一张banner的时候，只能等他慢慢滚动显示出来，不能直接切换，但是如果用CSS+JS的方法就可以直接跳转到想看的banner了。

先上HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
<div id="banner">
　　<div id="inside">
      <img src="img/banner1.png" id="img1" /><img src="img/banner2.png" id="img2" /><img src="img/banner3.png" id="img3" /><img src="img/banner4.png" id="img4" /><img src="img/banner1.png" id="img5" />
   </div>
<!--切换banner按钮-->
    <ul id="bannerNum">
      <li onclick="changeBanner(1)">1</li>
      <li onclick="changeBanner(2)">2</li>
      <li onclick="changeBanner(3)">3</li>
      <li onclick="changeBanner(4)">4</li>
    </ul>
</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
<style type="text/css">
  *{
    padding: 0px;
    margin: 0px;
  }
  #banner{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }
  #banner #inside{
    width: 9600px;
    position: relative;
    left: 50%;
    margin-left: -960px;
    transition: all 1s ease;
  }
  #banner img{
    width: 1920px;
  }
  #bannerNum{
    padding: 0px;
    list-style: none;
    overflow: hidden;
    width: 160px;
    position: absolute;
    bottom: 30px;
    right: 50px;
  }
  #bannerNum li{
    width: 30px;
    height: 30px;
    background-color: white;
    text-align: center;
    line-height: 30px;
    margin: 0px 5px;
    float: left;
    cursor: pointer;
  }
</style>

实现滚动和切换

接下来用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
<script>
　　var n = 1;
　　var inside;
　　window.onload = function(){
　　inside = document.getElementById("inside");

　　var interval = setInterval(function(){
　　　　inside.style.transition = "all 1s ease";
　　　　n++;
　　　　switch (n){
　　　　case 1:
　　　　inside.style.transition = "none";
　　　　inside.style.marginLeft = (-960)+"px";
　　　　break;
　　　　case 2:
　　　　inside.style.marginLeft = (-960-1920)+"px";
　　　　break;
　　　　case 3:
　　　　inside.style.marginLeft = (-960-1920*2)+"px";
　　　　break;
　　　　case 4:
　　　　inside.style.marginLeft = (-960-1920*3)+"px";
　　　　break;
　　　　case 5:
　　　　inside.style.marginLeft = (-960-1920*4)+"px";
　　　　n = 0;
　　　　break;
　　　　default:
　　　　break;
　　　　}
　　　　},2000);
　　}

　　function changeBanner(num){
　　　　inside.style.transition = "none";
　　　　switch (num){
　　　　case 1:
　　　　inside.style.marginLeft = (-960)+"px";
　　　　break;
　　　　case 2:
　　　　inside.style.marginLeft = (-960-1920)+"px";
　　　　break;
　　　　case 3:
　　　　inside.style.marginLeft = (-960-1920*2)+"px";
　　　　break;
　　　　case 4:
　　　　inside.style.marginLeft = (-960-1920*3)+"px";
　　　　break;
　　　　default:
　　　　break;
　　　　}

　　   n = num-1;
　　}
</script>

下面是我用div代替图片做的一个简单demo：

在线查看：滚动效果

css
CSS web

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！