今天用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. linux 管道与重定向

    命令行shell数据流有如下定义: 通过管道和重定向可以控制CLI的数据流

  2. sersync服务搭建

    前言: 一.为什么要用Rsync+sersync架构? 1.sersync是基于Inotify开发的,类似于Inotify-tools的工具 2.sersync可以记录下被监听目录中发生变化的(包括增 ...

  3. 学习做爬虫-vs2017

    最近新装了vs2017,安装过程发生了很大的变化,操作变的更加容易了. 下载vs安装程序进行安装.更新界面如图所示,我选择了安装免费个人版(这个是已安装的更新界面,和安装界面差不多) 如图所示,这样的 ...

  4. Windowsform datagridview选中向父窗口传值

    Datagridview mouseclick事件 private void dataGridView1_MouseClick(object sender, MouseEventArgs e) { i ...

  5. Ocelot

    Ocelot——初识基于.Net Core的API网关 Ocelot API网关的实现剖析 微服务网关Ocelot API网关Ocelot 使用Polly 处理部分失败问题 谈谈微服务中的 API 网 ...

  6. oracle-01427

    Oracle / PLSQL: ORA-01427 Learn the cause and how to resolve the ORA-01427 error message in Oracle. ...

  7. 二，php的错误处理

    php处理错误的三种方式: 简单的die()语句: 自定义错误和错误触发器:错误日志: 1,简单的die()语句 if(!file_exists("aaa.txt")){ die( ...

  8. ArchLinux pacman 提高俩倍下载速度方法

    pacman能够调用外部下载工具来代替默认的wget来给pacman提速 比如将/etc/pacman.conf中 XferCommand = /usr/bin/wget –passive-ftp - ...

  9. jquery 实现省市二级联动

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  10. SPOJ 1811 Longest Common Substring(求两个串的最长公共子串 || 或者n个串)

    http://www.spoj.com/problems/LCS/ 题目:求两个串的最长公共子串 参考:https://www.cnblogs.com/autoint/p/10345276.html: ...