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. node.js 学习

    http://www.cnblogs.com/haogj/category/612022.html

  2. tomcat重启脚本

    #!/bin/bashPATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/binexport JAVA_HOME=/opt/jd ...

  3. hdoj 5139Formula

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5139 展开后的:1!*2!*3!*..*n! 后面就好办了- -

  4. android 打包失败

    如果在打包时提示: proguard returned with error code 1   并且在控制台中输出:'java'不是内部或外部程序或批处理文件 那么就说明你的环境变量出问题了,之前用的 ...

  5. Git命令使用总结

    Git 教學(1):Git的基本使用 Git 教學(2):Git Branch 的操作與基本工作流程 Git 情境劇:告訴你使用 Git 時什麼情況該下什麼指令 如何安裝 Git Mac : 安裝 H ...

  6. 关于C语言的问卷调查（作业三）

    1.你对自己的未来有什么规划?做了哪些准备? 答:我对我未来的规划就是希望能够学有所用,将来可以从事有关IT方面的,跟自己的专业对口.为此现在我需要多看一些和这个专业有关的书籍,自学一些知识,多些一些 ...

  7. vim自动补全功能

    1.首先下载一个插件:ctags 输入:sudo apt-get install ctags 2.Ctrl+n进行单词的自动补全

  8. 3D几何变换

    3D点:非齐次坐标x(x,y,z) (x表示向量矢量) 齐次坐标:x~=(x~,y~,z~,w~)=w~(x,y,z,1)=w~x~         增广矢量:x—=(x,y,z,1) w~=0时,齐 ...

  9. Go语言的传值与传引用

    Go语言里的传值与传引用大致与C语言中一致,但有2个特例,map和channel默认传引用,也就是说可以直接修改传入的参数,其他的情况如果不用指针的话,传入的都是参数的副本,在函数中修改不会改变调用者 ...

  10. Python的平凡之路（17）

    一.认识jQuery       jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设 ...