<!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. crsctl stat res -t 和 crsctl stat res -init -t

    11.2.0.2的grid infrastructure中crsctl stat res命令不再显示如ora.cssd.ora.ctssd.ora.diskmon等基础资源的信息.但是查看这些基础资源 ...

  2. CSS位置如何获取的

  3. G面经prepare: Set Intersection && Set Difference

    求两个sorted数组的intersection e.g. [1,2,3,4,5],[2,4,6] 结果是[2,4] difference 类似merge, 分小于等于大于三种情况,然后时间O(m+n ...

  4. UVa10025-The ? 1 ? 2 ? ... ? n = k problem

    分析:因为数字之间只有加减变换,所以-k和k是一样的,都可以当成整数来考虑,只要找到最小的n满足sum=n*(n+1)/2>=k:且sum和k同奇同偶即可,做法是用二分查找,然后在就近查找 因为 ...

  5. 每天一个java基础知识--static

    内存总体一共分为了 4个部分(stack segment.heap segment.code segment.data segment) 当我们在程序中,申明一个局部变量的时候,此变量就存放在了 st ...

  6. C++新手之培养良好的编程风格

    内功深厚的武林高手出招往往平淡无奇.同理,编程高手也不会用奇门怪招写程序.良好的编程风格是产生高质量程序的前提. 下面以C++为例,来给大家介绍. 一. 命名约定 有不少人编程时用拼音给函数或变量命名 ...

  7. HashMap和HashTable区别

    HashMap和HashTable区别 HashMap--->允许控制/线程安全 HashTable-->线程不安全

  8. Spring 中 Xml配置文件属性的说明

    Xml配置文件属性的说明: <bean id="TheAction" ⑴ class="net.xiaxin.spring.qs.UpperAction" ...

  9. 3D语音天气球（源码分享）——创建可旋转的3D球

    开篇废话: 在9月份时参加了一个网站的比赛,比赛的题目是需要使用第三方平台提供的服务做出创意的作品. 于是我选择使用语音服务,天气服务,Unity3D,Android来制作一个3D语音天气预报,我给它 ...

  10. 夺命雷公狗---Thinkphp----7之栏目配合Model的增删改查

    我们首先来写一个查: public function lists(){ $type = M('Type')->select(); $this -> assign('type',$type) ...