今天用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. XJOI 3363 树4/ Codeforces 739B Alyona and a tree(树上差分+路径倍增)

    D. Alyona and a tree time limit per test  2 seconds memory limit per test  256 megabytes input  stan ...

  2. 买了个vultr的vps，准备把博客转过去，顺便记录一点操作。

    1.shadow影子socks梯子已经搭好了,步骤: apt-get install python-pip pip install shadowsocks 任意目录创建配置文件json(ss可以在很多 ...

  3. MVC4 Filter (筛选器)

    Filter,在MVC中我们通常将Filter定义成Attribute特性 来供Controller 或者Action 方法调用. FilterAttribute 是所有Filter 的基类. 而 F ...

  4. [LeetCode 题解]：Swap Nodes in Pairs

    前言   [LeetCode 题解]系列传送门:  http://www.cnblogs.com/double-win/category/573499.html   1.题目描述 Given a li ...

  5. centos7 安装dnf包管理器和常用命令

    Installing DNF Currently the DNF package comes from the EPEL repository, so if your Linux system is ...

  6. 数独高阶技巧入门之六——ALS

    ​在这个系列的第一篇(链及其简单应用)以及第四篇(简单异数链)中已经简单介绍过ALS结构的定义,即n格中存在n+1个不同的候选数 (双值格可视为特殊的ALS结构) .根据数独规则,在组成ALS的候选数 ...

  7. 快速搭建windows服务器的可视化运维环境

    开发好的程序部署在服务器上,如何对服务器的基本指标进行监控呢?最近对一套工具进行了研究,可以快速搭建服务器监管环境,很是强大,最重要的是它还很酷炫. 原理:数据采集+时序数据库+可视化,下面记录一下搭 ...

  8. solr7.3集群搭建

    solr集群搭建 原博客:https://blog.csdn.net/gdsgdh308227363/article/details/81004706 注意,在搭建solr集群前,建议最好有一个sol ...

  9. 企业库连接形式简单例子记录 EnterpriseLibrary.Data

    结构图 webconfig 配置正确的连接字符串 <connectionStrings> <add name="DBConnection" connectionS ...

  10. android相对布局中控件的常用属性

    Android布局属性详解 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false android:layout_centerHorizontal 水平居中 andr ...