<!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. Android之Handler，举例说明如何更新UI

    方法一:(java习惯,在android不推荐使用) 刚刚开始接触android线程编程的时候,习惯好像java一样,试图用下面的代码解决问题 new Thread( new Runnable() { ...

  2. Java基础之在窗口中绘图——使用模型/视图体系结构在视图中绘图（Sketcher 1 drawing a 3D rectangle）

    控制台程序. 在模型中表示数据视图的类用来显示草图并处理用户的交互操作,所以这种类把显示方法和草图控制器合并在一起.不专用于某个视图的通用GUI创建和操作在SketcherFrame类中处理. 模型对 ...

  3. Android项目目录结构分析

    Android项目目录结构分析 1.HelloWorld项目的目录结构1.1.src文件夹1.2.gen文件夹1.3.Android 2.1文件夹1.4.assets 1.5.res文件夹1.6.An ...

  4. Swift游戏实战-跑酷熊猫 00 游戏预览

    这个系列我们将要一起来做一个这样的游戏

  5. Leetcode: Remove K Digits

    Given a non-negative integer num represented as a string, remove k digits from the number so that th ...

  6. Java相对路径读取文件

    不管你是新手还是老鸟,在程序中读取资源文件总会遇到一些找不到文件的问题,这与Java底层的实现有关,不能算bug,只要方法得当,问题还是可以解决的. 项目的文件夹结构: repathtest ├─sr ...

  7. [原创]java WEB学习笔记84：Hibernate学习之路-- -映射 一对一关系 ，基外键的方式实现

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. Java用native2ascii命令做unicode编码转换

    背景:在做Java开发的时候,常常会出现一些乱码,或者无法正确识别或读取的文件,比如常见的validator验证用的消息资源(properties)文件就需要进行Unicode重新编码.原因是java ...

  9. URAL 1139 City Blocks（数论）

    The blocks in the city of Fishburg are of square form. N avenues running south to north and Mstreets ...

  10. 杭电oj 1016 Prime Ring Problem

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...