首页 > 代码库 > 【javascript/css】Javascript+Css实现图片滑动浏览效果
【javascript/css】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="http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js"></script> 6 <title>css+javascript图片滑动浏览</title> 7 <link rel="icon" href="http://www.mamicode.com/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="http://www.mamicode.com/resource/images/banner.jpg" alt="妈咪快集合，心贝新风向"/>22 <img class="img2" src="http://www.mamicode.com/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;}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="http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js"></script> 6 <title>css+javascript图片滑动浏览</title> 7 <link rel="icon" href="http://www.mamicode.com/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="http://www.mamicode.com/resource/images/banner.jpg" alt="妈咪快集合，心贝新风向"/>41 <img class="img2" src="http://www.mamicode.com/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>
【javascript/css】Javascript+Css实现图片滑动浏览效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。