<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link href="yangshi/css.css" rel="stylesheet" type="text/css" />

    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>

    <script  type="text/javascript">

        $(function () {

            var timer; //定时器

            var curno = 1;

            var length = $(".lunbo ul li").length; //有几张图片

            $(".lunbo ul").css("width", length * 137 + "px");

            $(".topimg").hover(function () {

                //鼠标移上去执行的内容

                clearInterval(timer);

            }, function () {

                //鼠标移走时执行的内容

                timer = setInterval(scroll, 3000);

            }).trigger("mouseover"); //trigger("mouseover")窗体加载的时候就触发一次mouseover事件

            $(".lunbo").hover(function () {

                //鼠标移上去执行的内容

                clearInterval(timer);

            }, function () {

                //鼠标移走时执行的内容

                timer = setInterval(scroll, 3000);

            })

              $(".lunbo .bl").click(function () {

                    if (curno == 0) {

                    }

                    else {

                        curno--;

                    }

                    $(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);

                    var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");

                    $(".topimg img").attr("src", src); //上面图片显示

                    if (curno == 0) {

                        $('.lunbo ul').stop(true, false).animate({ left: "0px" }, 1000);

                    }

                    else if (curno > 2 && curno + 2 < length) {

                        $(".lunbo ul").css("margin-left", 0);

                        var nowLeft = -(curno - 2) * "137" + "px";

                        $('.lunbo ul').stop(true, false).animate({ left: nowLeft }, 1000);

                    }

                })

               $(".lunbo .br").click(function () {

                    if (curno == 0) {

                    }

                    else {

                        curno++;

                    }

                    $(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);

                    var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");

                    $(".topimg img").attr("src", src); //上面图片显示

                    if (curno == 0) {

                        $('.lunbo ul').stop(true, false).animate({ left: "0px" }, 1000);

                    }

                    else if (curno > 2 && curno + 2 < length) {

                        $(".lunbo ul").css("margin-left", 0);

                        var nowLeft = -(curno - 2) * "137" + "px";

                        $('.lunbo ul').stop(true, false).animate({ left: nowLeft }, 1000);

                    }

                })

            function scroll() {

                //轮播图高亮显示

                $(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);

                var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");

                $(".topimg img").attr("src", src); //上面图片显示

                if (curno == 0) {

                    $('.lunbo ul').stop(true, false).animate({ left: "0px" }, 1000);

                }

                else if (curno > 2 && curno + 2 < length) {

                    $(".lunbo ul").css("margin-left", 0);

                    var nowLeft = -(curno - 2) * "137" + "px";

                    $('.lunbo ul').stop(true, false).animate({ left: nowLeft }, 1000);

                }

                curno++;

                if (curno == length) {

                    curno = 0;

                }

            }

        })

    </script>

</head>

<body>

<div class="topimg"><img src="data:image/1.jpg" /></div>

<div class="lunbo">

    <div class="thumb">

        <div class="b bl"></div>

        <div class="li">

            <ul>

                <li><img src="data:image/1.jpg" /></li>

                <li><img src="data:image/2.jpg" /></li>

                <li><img src="data:image/3.jpg" /></li>

                <li><img src="data:image/4.jpg" /></li>

                <li><img src="data:image/5.jpg" /></li>

                <li><img src="data:image/6.jpg" /></li>

                <li><img src="data:image/7.jpg" /></li>

            </ul>

        </div>

        <div class="b br"></div>

    </div>

</div>

</body>

</html>

　　

jqeury之平移轮播的更多相关文章

  1. javascript写无缝平移的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js各种特效轮播图，选项卡，放大镜，窗口拖拽，楼层跳转

    // 透明度轮播图 // img:轮播图片 // dot:轮播点 // lbtn:左箭头 // rbtn:右箭头 // banner:轮播盒子 // active:轮播点选中效果类名 // time: ...

  3. 用JQ去实现一个轮播效果

    前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...

  4. CSS动画之旋转魔方轮播

    很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

  5. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  6. 踩石行动：ViewPager无限轮播的坑

    2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

  7. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  8. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  9. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

随机推荐

  1. [转]EntityFramework走马观花之CRUD（中）

    学习Entity Framework技术期间查阅的优秀文章,出于以后方便查阅的缘故,转载至Blog,可查阅原文:http://blog.csdn.net/bitfan/article/details/ ...

  2. ubuntu14.04安装eclipse

    1.安装jdk7.x,参考上篇<Linux14.04安装JDK> 2下载eclipse.tar 3.sudo tar -zxvf eclipse-x-x-.tar.gz mv eclips ...

  3. 链表操作，空间复杂度要求为O(1)

    对于O(1)的空间复杂度要求,不能对链表进行复制等操作,双指针法对处理该类问题比较有效. 同时由于链表头结点的特殊性,可以考虑引入一个空的头结点来辅助操作.

  4. iOS 提交代码出现提示弹出框显示 “A commit message is required to perform this operation.Enter a commit message and try again.“

    需要你写一下你确认提交的信息,就是你这次提交上去修改了什么功能,简单描述一下

  5. Swift语言实战晋级-第9章 游戏实战-跑酷熊猫-1

    学习目标 一.进一步学习Swift的游戏制作 二.掌握SKNode,SKSpriteNode的运用 三.了解SpriteKit的物理系统 四.掌握动作(SKAction)的运用 在这一章,我们要通过制 ...

  6. PostgreSQL Replication之第十二章 与Postgres-XC一起工作（3）

    12.3 配置一个简单的集群 在本章中,我们要建立一个由三个数据节点组成的集群.一个协调节点,以及管理集群的全局事务管理节点.对于每个组件,我们必须创建一个目录: hs@vm:~/data$ ls - ...

  7. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  8. ShowMessage和MessageDlg消息对话框（VCL）

    ShowMessage一个简单的消息提示: 例如:ShowMessage("xxxx"); MessageDlg(constAnsiString Msg, TMsgDlgType ...

  9. "数学口袋精灵"bug的发现及单元测试

    1.项目内容: 团队项目:二次开发 至此,我们有了初步的与人合作经验,接下来投入到更大的团队中去. 也具备了一定的个人能力,能将自己的代码进行测试.接下来尝试在别人已有的基础上进行开发. 上一界51冯 ...

  10. Android中实现两次点击返回键退出本程序

    1,当用户使用我们的app的时候,有时候无意的或者不是有心的按下了我们的返回键,这时候为了更好的用体验,我们需要让用户再一次确定一下,以便判断用户的真实意图 代码如下: //该功能实现退出时提示的功能 ...