今天用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. hdu1561之树形dp

    The more, The Better Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  2. 利用PhotoShop对大图像进行等分切片

    图文介绍利用PhotoShop等分切图 1.调用切片工具,右键选择划分切片 2.指定水平划分.垂直划分的等分数量,点击确定 3.在文件菜单中选择存储为... 4.配置图像质量参数.点击存储.指定存储位 ...

  3. Foxman, 基于微核架构的 Mock 解决方案

    本文来自 网易云社区 . Foxman ⇗ 是一个使用 Node.js 开发的命令行工具,定位是一个可扩展的 Mock Server,帮助前端开发者轻松.独立.高效地进行前端开发和完成后续的联调工作. ...

  4. Django_Restframwork_APIVIEW视图_源码分析

    Django _VIEW视图_源码分析

  5. 40. 组合总和 II leetcode JAVA

    题目: 给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使 ...

  6. “全栈2019”Java第六十八章：外部类访问内部类成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. “全栈2019”Java第十章：关键字

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. vm虚拟机安装，配置与使用

    百度网盘下载地址: 链接: https://pan.baidu.com/s/1cNn458wUyKNOcAxQ8vEPQg密码: 8vrw 创建虚拟机: 1.创建一个虚拟机: 2.选择标准模式: 3. ...

  9. [ActionScript 3.0] 翻牌效果，运用语法rotationY，PerspectiveProjection

    package { import com.tweener.transitions.Tweener; import flash.display.Bitmap; import flash.display. ...

  10. [转] 以普通用户启动的Vim如何保存需要root权限的文件

    [转] 以普通用户启动的Vim如何保存需要root权限的文件 在Linux上工作的朋友很可能遇到过这样一种情况,当你用Vim编辑完一个文件时,运行:wq保存退出,突然蹦出一个错误: E45: 'rea ...