HTML代码：

<!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>采用margin-top/left移动</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width,user-scalable=no" /><title></title>

<meta name="description" content="" />

<meta name="keywords" content="" />

<script src="jquery.min.js"></script>

<link rel="stylesheet" href="css1.css" />

</head>

<body>

<div class="z-box">

    <ul class="u-box">

        <li><img src="1.jpg" /></li>

        <li><img src="2.jpg" /></li>

        <li><img src="3.jpg" /></li>

        <li><img src="4.jpg" /></li>

        <li><img src="5.jpg" /></li>

        <li><img src="6.jpg" /></li>

    </ul>

    <span class="z-prev"></span>

    <span class="z-next"></span>

    <ul class="n-box">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

    </ul>

</div>

<script src="js1.js"></script>

</body>

</html>

JS代码：

//

$(function(){

    //播放效果

    var timer=null;

    var index=0;

    //移动函数

    $(".n-box li").eq(index).css("fontSize","30px");

    function sMove(direction){

        if(parseInt(direction)>0){

            $(".u-box").stop(true,true).animate({marginTop:"0px"},300);

            //添加小按钮样式

            if(index<=0){

                index=$(".n-box li").length-1;

            }else{

                index--;

            }

        }else{

            //添加小按钮样式

            if(index>=$(".u-box li").length-1){

                index=0;

            }else{

                index++;

            }

            $(".u-box").stop(true,true).animate({marginTop:direction},300,function(){

                $(".u-box").css("marginTop","0px");

                $(".u-box").append($(".u-box li").eq(0));

            });

        }

        $(".n-box li").eq(index).css("fontSize","30px").siblings().css("fontSize","14px");

    }

    //自动轮播

    function autoPlay(direction){

        timer=setInterval(function(){

            sMove(direction);

        },2000);

    };

    //开启自动轮播

    autoPlay("-300px");

    //按钮

    $(".z-prev").click(function(){

        $(".u-box").css("marginTop","-300px");

        //alert("1"); 不是很明白

        $(".u-box li").eq($(".u-box li").length-1).insertBefore($(".u-box li").eq(0));

        //alert("1");

        sMove("300px");

    });

    $(".z-next").click(function(){

        sMove("-300px");

    });

    //鼠标移入

    $(".z-prev").mouseover(function(){

        //console.log("停止播放！");

        clearInterval(timer);

    });

    $(".z-prev").mouseout(function(){

        //console.log("开启自动播放！");

        autoPlay("-300px");

    });

    $(".z-next").mouseover(function(){

        //console.log("停止播放！");

        clearInterval(timer);

    });

    $(".z-next").mouseout(function(){

        //console.log("开启自动播放！");

        autoPlay("-300px");

    });

    //小按钮点击事件

    function smallButtonclick(){

        $(".n-box li").each(function(){

            $(this).click(function(){

                if(index>$(this).index()){

                    //console.log("$(this).index()="+$(this).index()+"/"+"index="+index);

                    var j=index-$(this).index();

                    for(var i=0;i<j;i++){

                            $(".u-box").css("marginTop","-300px");

                            $(".u-box li").eq($(".u-box li").length-1).insertBefore($(".u-box li").eq(0));

                            sMove("300px");

                    }

                }else{

                    var j=$(this).index()-index;

                    for(var i=0;i<j;i++){

                        sMove("-300px");

                    }

                }

            });

        });

    }

    //小按钮移入

    function onSmallButton(){

        $(".n-box").mouseover(function(){

            clearInterval(timer);

        });

        $(".n-box").mouseout(function(){

            autoPlay("-300px");

        });

    }

    onSmallButton();

    smallButtonclick();

});

CSS代码：

@charset "utf-8";

*{

    margin:0px;

    padding:0px;

}

list{

    list-style:none;

}

.z-box{

    width:600px;

    height:300px;

    position:relative;

    margin:0px auto;

    overflow:hidden;

}

.u-box{

    width:600px;

    height:900px;

    /*position:absolute;*/

    left:0px;

    z-index:;

}

.u-box li{

    float:left;

    list-style:none;

    margin-top:0px;

}

.z-prev{

    display:block;

    width:20px;

    height:20px;

    position:absolute;

    top:45%;

    left:10px;

    box-shadow:0px 0px 5px yellow;

    z-index:;

    cursor:pointer;

}

.z-next{

    display:block;

    width:20px;

    height:20px;

    position:absolute;

    top:45%;

    right:10px;

    box-shadow:0px 0px 5px yellow;

    z-index:;

    cursor:pointer;

}

.n-box{

    width:100%;

    height:40px;

    line-height:40px;

    text-align:center;

    position:absolute;

    z-index:;

    bottom:20px;

}

.n-box li{

    display:inline;

    box-shadow:0px 0px 5px white;

    padding:2px 8px;

    cursor:pointer;

}

纯属个人练习效果  效果都是凑出来 望批评指教！

轮播效果(margin-left/top)移动的更多相关文章

  1. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  2. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  3. JS--图片轮播效果

    搞了很长时间才弄清楚图片轮播效果的原理,理解各个事件发生的原因,浪费了这么长的时间,只怪自己的知识太过于薄弱.现将代码写下,供大家参看,如有不妥之处还望指出,大家一起学习. 功能: 1.点击左右两边的 ...

  4. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  5. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  6. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  7. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  8. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  9. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...

  10. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

随机推荐

  1. Can't connect to MySQL server on '127.0.0.1' (111)

    [root@localhost ~]# service mysqld statusmysqld 已停 (1)查看MySQL 服务是否已经开启: service mysqld  status (2)启动 ...

  2. MySQL5.5绿色版1067

    mysql的绿色安装版,按照很多文章进行配置,会出现 配置文件里面添加了 [client] default-character-set=utf8 [mysqld] default-character- ...

  3. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  4. 白皮 Chapter 1

    6.29 今天主要做了一些1.5中的小结和练习,果然换语言思路也要跟着变么…各种不爽啊不爽… scanf各种忘记&,还有各种忘记return 0… average temperature su ...

  5. 4、jvm内存回收——器

    内存回收---->垃圾回收---->GC GC 三基础,一个综合G1 串行:单线程,回收暂停其他 并行:多线程,回收暂停其他 并发:多线程,回收不暂停?! 成功好说,失败Serial Ol ...

  6. storyboard简单认识

    ## storyboard文件的认识 - 作用:描述软件界面 - 程序启动的简单过程 - 程序一启动,就会加载`Main.storyboard`文件 - 会创建箭头所指的控制器,并且显示控制器所管理的 ...

  7. MindManager使用说明

    MindManager是一款很好实现思维导图的软件,唯一有些遗憾的是它并不是免费的,而且价格还不菲. 初识MindManager 正确安装好MindManager之后,打开软件,会发现MindMana ...

  8. Asp.net MVC 数据注解与验证

    数据注解特性定义在名称空间System.ComponentModel.DataAnnotations中(有些特性定义在其他名称空间中),它们提供了服务器端验证的功能,当在模型的属性上使用这些特性时,框 ...

  9. 详解Android中AsyncTask的使用

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask. Handler模式需要为每一个任务创建一个新的线程,任务完成后通过Handler实例向UI线程发送消息,完成界面的更 ...

  10. EXCEL里面的数字显示为文本 不用科学计数法显示

    1. 在输入这一串数字前加撇号“'”(英文状态下的单引号)即可.2. 先将这一列设置为“文本”格式,然后直接输入这一串数字即可.   已经输入好了数字,那估计你这些数字的后三位都已经全变成“0”了,用 ...