今天用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. TCP三次握手与防火墙规则

    一个(tct)socket连接需要在客户端与服务端开启一个隧道,客户端提供一个端口(new时可指定,也可不指定,随机),服务端的端口和地址一定要指定.在win下,服务端创建监听端口时,防火墙会提示阻止 ...

  2. 解决centOS 本地可以访问 外部主机不能访问的问题

    但是centos中的防火墙规则比较严密 用curl http://localhost:10000 可以看到内容,但是外部无法访问,原因是防火墙没有开启10000端口,需要将10000端口加入到信任规则 ...

  3. uwsgi启动提示：probably another instance of uWSGI is running on the same address (:8002). bind(): Address already in use [core/socket.c line 769]

    提示8002端口被占用,可以这样终止掉后再启动 sudo fuser -k 8002/tcp

  4. JAVA篇之环境安装(Windows)

    一.JAVA 安装两个重要概念 1.JRE::英文Java Development Kit ,记住英文,深入理解就去看相关文章. 2.JDK:英文 Java Runtime Environment,记 ...

  5. 格式化JavaScript代码

    javascript代码格式化工具 网上下载的js代码经常遇到代码已被压缩(注释.换行.缩进.空格.TAB等都被删除了),如果拿来学习.研究的话必定看到头晕.有些编辑器的“格 式化代码”功能可以解决这 ...

  6. c# Quartz.net的简单封装

    分享一个以前封装的Quartz.net类. 新建一个QuartzClass类库项目.nuget控制台输入 image.png 添加Quartz.net的引用. 我们新建一个JobBase.cs文件,里 ...

  7. 基于ZKEACMS的.Net Core多租户CMS建站系统

    多租户架构 多租户技术或称多重租赁技术,简称SaaS,是一种软件架构技术,是实现如何在多用户环境下共用相同的系统或程序组件,并且可确保各用户间数据的隔离性.简单讲:在一台服务器上运行单个应用实例,它为 ...

  8. sharepoint用户信息同步出错

    首先使用工具定位问题,然后权限不够授予权限 C:\Program Files\Microsoft Office Servers\15.0\Synchronization Service\UIShell

  9. nginx负载均衡配合keepalived服务案例实战

    本实验用4台 centos6 虚拟机,2台做负载均衡,2台做web服务器,都先装上nginx lb01:192.168.0.235  --主负载均衡器 lb02:192.168.0.236  --备负 ...

  10. 微信小程序之WebSocket

    本文版权归 OSChina jsongo0 所有,转载请标明出处,以示尊重! 原文:https://my.oschina.net/jsongo/blog/757871 为什么需要websocket?传 ...