<head>

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

        <meta charset="utf-8"/>

        <style type="text/css">

            body{

                margin: auto;

            }

            #div1{

                width:800px;

                height:600px;

                border:1px solid red;

            }

            #img1{

                width:800px;

                height:600px;

                position:absolute;

                left:1px;

            }

            #img2,#img3{

                width:800px;

                height:600px;

                position:absolute;

                left:-800px;

            }

            #div2{

                bottom:0px;

                position:relative;

                top:580px;

                left:700px;

            }

        </style>

        <script type="text/javascript">

            $(document).ready(function () {

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

                    var i = $(this).text();

                    if (i == ) {

                        $("#img1").animate({ 'left': '1px' });

                        $("#img2").css({ 'left': '-800px' });

                        $("#img3").css({ 'left': '-800px' });

                    } else if (i == ) {

                        $("#img2").animate({ 'left': '1px' });

                        $("#img1").css({ 'left': '-800px' });

                        $("#img3").css({ 'left': '-800px' });

                    } else if (i == ) {

                        $("#img3").animate({ 'left': '1px' });

                        $("#img2").css({ 'left': '-800px' });

                        $("#img1").css({ 'left': '-800px' });

                    }

                    else {

                        return;

                    }

                })

            })

        </script>

    </head>

    <body>

        <div id="div1">

            <a href="http://www.baidu.com/"><img id="img1" src="../images/1.jpg" /></a>

            <a href="http://www.sina.com.cn/"><img id="img2" src="../images/2.jpg" /></a>

            <a href="http://www.qq.com/"><img id="img3" src="../images/4.jpg" /></a>

            <div id="div2"><button></button><button></button><button></button></div>

        </div>

    </body>

jquery图片滑动联播效果的更多相关文章

  1. 19个非常有用的 jQuery 图片滑动插件和教程

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天 ...

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

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

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

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

  4. 【javascript/css】Javascript+Css实现图片滑动浏览效果

    今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...

  5. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

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

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

  7. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  8. JQuery图片滑动插件

    效果预览: (暂无) html代码: <div id="focus"> <ul> <li> <a href="#"&g ...

  9. jQuery图片滑动

    一个非常简单实用的jQuery插件 可以用在页面的顶部广告展示 http://slidesjs.com/ 一个需要注意的问题, 就是在手机等客户端(IOS8以上), 使用此插件时, 经常会触发插件的r ...

随机推荐

  1. 由一位坛友的布局想到的定位问题：absolute和relative

    坛友的问题和相关代码如下: 看看下面的代码.运行有问题.但是如果我把 style=”position:absolute; top:20px;left:10px改成 style=”float:left; ...

  2. Codeforces 603A Alternative Thinking

    题意:给你一个01串,必须替换一次,且替换的为子串.问换完后,最大01串长度. #include <bits/stdc++.h> typedef long long ll; using n ...

  3. 【转载】extern "C"的用法解析（原博主就是抄百度百科的，不如另外一篇好）

    [说明]文章转载自Rollen Holt 的文章 http://www.cnblogs.com/rollenholt/archive/2012/03/20/2409046.html --------- ...

  4. algorithm@ Divide two integers without using multiplication, division and mod operator. (Bit Operation)

    #include<bits/stdc++.h> using namespace std; int divide(int dividend, int divisor) { long long ...

  5. POJ3666-Making the Grade（左偏树 or DP）

    左偏树 炒鸡棒的论文<左偏树的特点及其应用> 虽然题目要求比论文多了一个条件,但是……只需要求非递减就可以AC……数据好弱…… 虽然还没想明白为什么,但是应该觉得应该是这样——求非递减用大 ...

  6. hdu 4115 (2—SAT)

    题意:两个人石头剪刀布,一个人的出法已确定,另一个人的出法有一定约束,某两次要相同或者不同,问你第二个人能否全部都不失败. 思路:根据Bob出的情况,我们可以确定每次Alice有两种方案. R与P,S ...

  7. LINUX下的简单线程池

    前言 任何一种设计方式的引入都会带来额外的开支,是否使用,取决于能带来多大的好处和能带来多大的坏处,好处与坏处包括程序的性能.代码的可读性.代码的可维护性.程序的开发效率等. 线程池适用场合:任务比较 ...

  8. zabbix 3.0 安装

    zabbix3.0安装注意: 1.PHP要5.4版本以上 2.防火墙关闭 3.selinux关闭 注:本操作系统为centos 6.5 X86   操作步骤 一.安装PHP 添加 epel 源 # r ...

  9. mac磁盘满解决方案

    背景 : 用mac电脑的人,估计都不习惯去关机吧.mac虽然可以不需要关闭电脑,但是久而久之由于应用软件占用产生缓存文件 or 产生虚拟内容交换文件 or 睡眠镜像文件 and so on. 会占用大 ...

  10. ajax请求，请求头是provisional are shown。请求未发送出去

    问题: ajax请求,请求没成功.ajax请求没有发送出去. 查看network,看到请求头处:Provisional headers are shown. 原因: 搜索了一下,网上说了几个原因. 1 ...