【javascriptcss】Javascript+Css实现图⽚滑动浏览效果
今天⽤js+css来做⼀个能够左右滑动的图⽚浏览效果。
⾸先写⼀个结构，包括需要浏览的两张图，以及能够点击来滑动图⽚的两个按钮。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <script type="text/javascript" src="1qaz2wsx.xinbaby/resource/js/jquery-1.7.2.min.js"></script>
6 <title>css+javascript图⽚滑动浏览</title>
7 <link rel="icon" href="favicon.ico" type="images/x-icon" />
8
9 <style type="text/css">
10
11 </style>
12
13 <script type="text/javascript">
14
15 </script>
16 </head>
17
18 <body>
19 <div class="card">
20 <div class="img">
21 <img class="img1" src="resource/images/banner.jpg" alt="妈咪快集合，⼼贝新风向"/>
22 <img class="img2" src="resource/images/banner3.jpg" alt="⼀切为了孩⼦，为了孩⼦的⼀切"/>
23 </div>
24 <div class="btn">
25 <a class="btn1"></a>
26 <a class="btn2"></a>
27 </div>
28 </div>
29 </body>
30 </html>
接下来，将图⽚⽗元素框的长宽设置为图⽚的长宽，并且将图⽚设置为绝对定位，这样就可以将图⽚层叠在⼀起，并且可以在之后通过js来移动它。(将图⽚绝对定位时，不要忘了将其⽗元素框设置为相对定位)
1 <style type="text/css">
2 * {margin: 0; padding: 0;}
3 .card {width: 526px; height: 216px; margin: 100px auto;}
4 .card .img {position: relative;}
5 .card .img img {position: absolute;}
6 </style>
这样，就获取了层叠在⼀起的两张图⽚，不难发现，现在呈现在外的就是后定位的图⽚，即图⽚2(当然可以⽤"z-index"属性来设置其层叠的位置)。
接下来，把需要点击控制的两个点加到图⽚的左下⾓。
1 <style type="text/css">
2 * {margin: 0; padding: 0;}
3 .card {width: 526px; height: 216px; margin: 100px auto; position: relative;}
4 .card .img {position: relative;}
5 .card .img img {position: absolute;}
6 .btn {position: absolute; left: 10px; bottom: 5px;}
7 .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}
8 </style>
其中的图⽚"pagination.png"是的，两种颜⾊分别代表未被点击和被点击两种状态。我们通过前⾯说过的CSS Sprites(CSS精灵)技术，来标记按钮的两种状态。
效果：
接下来就是js代码来控制图⽚的显⽰了。
可以通过图⽚的"display:none"设置，来控制图⽚的显⽰与关闭，来达到切换图⽚的效果。
1 <script type="text/javascript">
2 $(function(){
3 $(".btn1").click(function(){
4 $(".img2").css("display","none");
5 $(".img1").css("display","block");
6 $(".btn1").css("background-position","0 -12px");
7 $(".btn2").css("background-position","0 0");
8 });
9 $(".btn2").click(function(){
10 $(".img1").css("display","none");
11 $(".img2").css("display","block");
12 $(".btn2").css("background-position","0 -12px");
13 $(".btn1").css("background-position","0 0");
14 });
15 });
16 </script>
这样当点击两个按钮的时候，就可以看到随着点击图⽚的切换
不过，简单的切换并不是此⽂的⽬的，需要的是点击后通过图⽚的滑⼊滑出来切换图⽚的展⽰。
接下来，通过jquery的animate()⽅法来控制图⽚滑动的动作，并通过固定在图⽚⽗框外的图⽚与⽗框内的图⽚的切换过程来实现滑动效果。
下⾯⼀步步来：
第⼀步：把图⽚1紧贴着图⽚⽗框的右边框固定（计算好偏移量）。为了看清楚，先给⽗框加上边框：
1 <style type="text/css">
2 * {margin: 0; padding: 0;}
3 .card {width: 526px; height: 216px; margin: 100px auto; position: relative; border: 1px solid;}
4 .card .img {position: relative;}
5 .card .img img {position: absolute;}
6 .card .img .img1 {left: 527px;}
7 .btn {position: absolute; left: 10px; bottom: 5px;}
8 .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}
9 </style>
第⼆步：通过点击按钮控制将框内的图⽚向左移动，同时紧贴右框的图⽚向框内移动，再反之操作来展现图⽚的左右滑动的特效。
1 <script type="text/javascript">
2 $(function(){
3 $(".btn1").click(function(){
4 $(".img2").animate({left: "-527px"},"slow");
5 $(".img1").animate({left: ""},"slow");
6 $(".btn1").css("background-position","0 -12px");
7 $(".btn2").css("background-position","0 0");
8 });
9 $(".btn2").click(function(){
10 $(".img2").animate({left: ""},"slow");
11 $(".img1").animate({left: "527px"},"slow");
12 $(".btn2").css("background-position","0 -12px");
13 $(".btn1").css("background-position","0 0");
14 });
15 });
16 </script>
效果：
⿊框内就是需要展⽰的图
第三步：给元素框设置"overflow:hidden"将框外的部分给剪切掉
1 <style type="text/css">
2 * {margin: 0; padding: 0;}
3 .card {width: 526px; height: 216px; margin: 100px auto; position: relative; border: 1px solid; overflow: hidden;}
4 .card .img {position: relative;}
5 .card .img img {position: absolute;}
6 .card .img .img1 {left: 527px;}
html滚动效果代码7 .btn {position: absolute; left: 10px; bottom: 5px;}
8 .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}
9 </style>
这样，当点击⼩圆纽的时候，图⽚切换就会有左右滑动，图⽚推图⽚的效果了。
最后附上完整代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <script type="text/javascript" src="1qaz2wsx.xinbaby/resource/js/jquery-1.7.2.min.js"></script>
6 <title>css+javascript图⽚滑动浏览</title>
7 <link rel="icon" href="favicon.ico" type="images/x-icon" />
8
9 <style type="text/css">
10 * {margin: 0; padding: 0;}
11 .card {width: 527px; height: 216px; margin: 100px auto; position: relative; border: 1px solid; overflow: hidden;}
12 .card .img {position: relative;}
13 .card .img img {position: absolute;}
14 .card .img .img1 {left: 527px;}
15 .btn {position: absolute; left: 10px; bottom: 5px;}
16 .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}
17 </style>
18
19 <script type="text/javascript">
20 $(function(){
21 $(".btn1").click(function(){
22 $(".img2").animate({left: "-527px"},"slow");
23 $(".img1").animate({left: ""},"slow");
24 $(".btn1").css("background-position","0 -12px");
25 $(".btn2").css("background-position","0 0");
26 });
27 $(".btn2").click(function(){
28 $(".img2").animate({left: ""},"slow");
29 $(".img1").animate({left: "527px"},"slow");
30 $(".btn2").css("background-position","0 -12px");
31 $(".btn1").css("background-position","0 0");
32 });
33 });
34 </script>
35 </head>
36
37 <body>
38 <div class="card">
39 <div class="img">
40 <img class="img1" src="resource/images/banner.jpg" alt="妈咪快集合，⼼贝新风向"/>
41 <img class="img2" src="resource/images/banner3.jpg" alt="⼀切为了孩⼦，为了孩⼦的⼀切"/>
42 </div>
43 <div class="btn">
44 <a class="btn1"></a>
45 <a class="btn2"></a>
46 </div>
47 </div>
48 </body>
49 </html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论