今天用js+css来做一个能够左右滑动的图片浏览效果。

　　首先写一个结构，包括需要浏览的两张图，以及能够点击来滑动图片的两个按钮。

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

         <script type="text/javascript" src="http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js"></script>

         <title>css+javascript图片滑动浏览</title>

         <link rel="icon" href="favicon.ico" type="images/x-icon" />

         <style type="text/css">

         </style>

         <script type="text/javascript">

         </script>

     </head>

     <body>

         <div class="card">

             <div class="img">

                 <img class="img1" src="resource/images/banner.jpg" alt="妈咪快集合，心贝新风向"/>

                 <img class="img2" src="resource/images/banner3.jpg" alt="一切为了孩子，为了孩子的一切"/>

             </div>

             <div class="btn">

                 <a class="btn1"></a>

                 <a class="btn2"></a>

             </div>

         </div>

     </body>

 </html>　　

　　

　　接下来，将图片父元素框的长宽设置为图片的长宽，并且将图片设置为绝对定位，这样就可以将图片层叠在一起，并且可以在之后通过js来移动它。(将图片绝对定位时，不要忘了将其父元素框设置为相对定位)　　

 <style type="text/css">

     * {margin: 0; padding: 0;}

     .card {width: 526px; height: 216px; margin: 100px auto;}

     .card .img {position: relative;}
     .card .img img {position: absolute;}
 </style>

　　

　　这样，就获取了层叠在一起的两张图片，不难发现，现在呈现在外的就是后定位的图片，即图片2(当然可以用"z-index"属性来设置其层叠的位置)。

　　接下来，把需要点击控制的两个点加到图片的左下角。　

 <style type="text/css">

     * {margin: 0; padding: 0;}

     .card {width: 526px; height: 216px; margin: 100px auto; position: relative;}

     .card .img {position: relative;}

     .card .img img {position: absolute;}

     .btn {position: absolute; left: 10px; bottom: 5px;}

     .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}

 </style>

　　其中的图片"pagination.png"是的，两种颜色分别代表未被点击和被点击两种状态。我们通过前面说过的CSS Sprites(CSS精灵)技术，来标记按钮的两种状态。

　　效果：

　　

　　接下来就是js代码来控制图片的显示了。

　　可以通过图片的"display:none"设置，来控制图片的显示与关闭，来达到切换图片的效果。

 <script type="text/javascript">

     $(function(){

         $(".btn1").click(function(){

             $(".img2").css("display","none");

             $(".img1").css("display","block");

             $(".btn1").css("background-position","0 -12px");

             $(".btn2").css("background-position","0 0");

         });

         $(".btn2").click(function(){

             $(".img1").css("display","none");

             $(".img2").css("display","block");

             $(".btn2").css("background-position","0 -12px");

             $(".btn1").css("background-position","0 0");

         });

     });

 </script>

　　这样当点击两个按钮的时候，就可以看到随着点击图片的切换

　　

　　不过，简单的切换并不是此文的目的，需要的是点击后通过图片的滑入滑出来切换图片的展示。

　　接下来，通过jquery的animate()方法来控制图片滑动的动作，并通过固定在图片父框外的图片与父框内的图片的切换过程来实现滑动效果。

　　下面一步步来：

　　第一步：把图片1紧贴着图片父框的右边框固定（计算好偏移量）。为了看清楚，先给父框加上边框：

 <style type="text/css">

     * {margin: 0; padding: 0;}

     .card {width: 526px; height: 216px; margin: 100px auto; position: relative; border: 1px solid;}

     .card .img {position: relative;}

     .card .img img {position: absolute;}

     .card .img .img1 {left: 527px;}

     .btn {position: absolute; left: 10px; bottom: 5px;}

     .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}

 </style>

　　

　　第二步：通过点击按钮控制将框内的图片向左移动，同时紧贴右框的图片向框内移动，再反之操作来展现图片的左右滑动的特效。

 <script type="text/javascript">

     $(function(){

         $(".btn1").click(function(){

             $(".img2").animate({left: "-527px"},"slow");

             $(".img1").animate({left: ""},"slow");

             $(".btn1").css("background-position","0 -12px");

             $(".btn2").css("background-position","0 0");

         });

         $(".btn2").click(function(){

             $(".img2").animate({left: ""},"slow");

             $(".img1").animate({left: "527px"},"slow");

             $(".btn2").css("background-position","0 -12px");

             $(".btn1").css("background-position","0 0");

         });

     });

 </script>

　　效果：

　　

　　

　　黑框内就是需要展示的图

　　第三步：给元素框设置"overflow:hidden"将框外的部分给剪切掉　

 <style type="text/css">

     * {margin: 0; padding: 0;}

     .card {width: 526px; height: 216px; margin: 100px auto; position: relative; border: 1px solid; overflow: hidden;}

     .card .img {position: relative;}

     .card .img img {position: absolute;}

     .card .img .img1 {left: 527px;}

     .btn {position: absolute; left: 10px; bottom: 5px;}

     .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}

 </style>

　　

　　这样，当点击小圆纽的时候，图片切换就会有左右滑动，图片推图片的效果了。

　　　

　最后附上完整代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

         <script type="text/javascript" src="http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js"></script>

         <title>css+javascript图片滑动浏览</title>

         <link rel="icon" href="favicon.ico" type="images/x-icon" />

         <style type="text/css">

             * {margin: 0; padding: 0;}

             .card {width: 527px; height: 216px; margin: 100px auto; position: relative; border: 1px solid; overflow: hidden;}

             .card .img {position: relative;}

             .card .img img {position: absolute;}

             .card .img .img1 {left: 527px;}

             .btn {position: absolute; left: 10px; bottom: 5px;}

             .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url("resource/images/pagination.png");}

         </style>

         <script type="text/javascript">

             $(function(){

                 $(".btn1").click(function(){

                     $(".img2").animate({left: "-527px"},"slow");

                     $(".img1").animate({left: ""},"slow");

                     $(".btn1").css("background-position","0 -12px");

                     $(".btn2").css("background-position","0 0");

                 });

                 $(".btn2").click(function(){

                     $(".img2").animate({left: ""},"slow");

                     $(".img1").animate({left: "527px"},"slow");

                     $(".btn2").css("background-position","0 -12px");

                     $(".btn1").css("background-position","0 0");

                 });

             });

         </script>

     </head>

     <body>

         <div class="card">

             <div class="img">

                 <img class="img1" src="resource/images/banner.jpg" alt="妈咪快集合，心贝新风向"/>

                 <img class="img2" src="resource/images/banner3.jpg" alt="一切为了孩子，为了孩子的一切"/>

             </div>

             <div class="btn">

                 <a class="btn1"></a>

                 <a class="btn2"></a>

             </div>

         </div>

     </body>

 </html>

　　

【javascript/css】Javascript+Css实现图片滑动浏览效果的更多相关文章

  1. 《JavaScript 实战》：JavaScript 图片滑动切换效果

    看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...

  2. 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  3. JS切割图片-滑动门效果

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  4. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  5. jquery图片滑动联播效果

    <head> <script src="../Scripts/jquery-1.10.2.js"></script> <meta char ...

  6. 使用 StoryBoard 实现左右按钮切换图片的浏览效果

    关键技能:使用故事板进行布局时,点击选中控件(组件)并按住 control 键向某个方向拖动,产生一条实线,然后弹出的窗口可以设置控件(组件)的布局约束条件:从而实现自动布局 AutoLayout 效 ...

  7. 《JavaScript 实战》：实现图片幻滑动展示效果

    滑动展示效果主要用在图片或信息的滑动展示,也可以设置一下做成简单的口风琴(Accordion)效果.这个其实就是以前写的图片滑动展示效果的改进版,那是我第一篇比较受关注的文章,是时候整理一下了. 有如 ...

  8. 【咸鱼教程】EUI多图片滑动组件ScrollView

    先看看实际效果 实现原理1.  ScrollView继承eui.Scroll2.  监听eui.Sroll的CHANGE_START和CHANGE_END事件,      根据鼠标滑动距离,来改变视口 ...

  9. Qt浅谈之二十六图片滑动效果

    一.简介 博客中发现有作者写的仿360的代码,觉得其中图片滑动的效果很有意思,特提取其中的代码.并加上类似mac的画面移动的动画效果. 二.详解 1.代码一:界面滑动(QWidget) (1)slid ...

随机推荐

  1. alpha七天冲刺计划-第一天

    alpha七天冲刺计划-第一天 一.团队会议: 内容:具体分配任务到个人,预估项目时间,确定UI样式. 合照: 二.团队成员任务认领: 李尤:界面UI设计. 彭迪彬:HTML+CSS部分实现. 任路乾 ...

  2. Linq特取操作之ElementAt,Single,Last,First源码分析

    Linq特取操作之ElementAt,Single,Last,First源码分析 一:linq的特取操作 First/FirstOrDefault, Last/LastOrDefault, Eleme ...

  3. sudo -s/sodo -i/su root

    sudo : 暂时切换到超级用户模式以执行超级用户权限,提示输入密码时该密码为当前用户的密码,而不是超级账户的密码.不过有时间限制,Ubuntu默认为一次时长15分钟.su : 切换到某某用户模式,提 ...

  4. Replication--镜像+复制

    场景:主服务器:Server1从服务器:Server2订阅服务器: Server3镜像DB: RepDB配置:1>配置SERVER3为分发服务器,在Server3上指定发布服务器SERVER1和 ...

  5. C语言编程学习：使用函数必须知道的3点注意事项

    C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...

  6. 用Docker自动构建纸壳CMS

    纸壳CMS可以运行在Docker上,接下来看看如何自动构建纸壳CMS的Docker Image.我们希望的是在代码提交到GitHub以后,容器镜像服务可以自动构建Docker Image,构建好以后, ...

  7. STM32开发（一）：简介及开发环境

    1. 背景 STM32是意法(ST)公司开发的基于ARM Cortex-M系列的一系列微控制器(MCU). 有两种库 标准外设库(StdPeriph_Driver.Standard Periphera ...

  8. 构建针对 iOS 和 Android 的原生扩展

    第一部分:音量控制入门 http://www.adobe.com/cn/devnet/air/articles/building-ane-ios-android-pt1.html 第二部分: 开发 A ...

  9. C语言程序设计

    从 大一下 开始写博客,记录自己的学习. 而作为一个强迫症(比如我)是不允许做事缺头少尾的. 想了想还是得大一所学的C语言也搬上来,虽然结构老师经常嘲讽 (也不算嘲讽,算是絮叨吧)我的C语言,但是我还 ...

  10. Maven的安装环境变量配置

    针对新手刚接触maven,并且不知道如何去搭建和使用maven,那么我来写一篇浅显易懂的初级篇教程吧. 不同的是,别人会先将概念再安装,我来帮大家先搭建好以后再去看概念,不然概念会变的很模糊. 安装 ...