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. react参考项目001

    https://github.com/chen2009277025/webpack-ant-design-demo https://github.com/cobish/cobish.github.io ...

  2. Go语言开发环境配置

    一.我为什么要学习go语言 当今已经是移动和云计算时代,Go出现在了工业向云计算转型的时刻,简单.高效.内 置并发原语和现代的标准库让Go语言尤其适合云端软件开发(毕竟它就是为此而设计的).到2014 ...

  3. tomcat mysql 内存溢出的问题

    原因是mysql的密码有问题 解决办法: 具体操作步骤: 关闭 mysql: # service mysqld stop 然后: # mysqld_safe --skip-grant-tables 启 ...

  4. VScode调试Python

    第一步,确保装上了PYTHON扩展 然后打开文件夹(这个东西必须打开文件夹才能进行调试,不能打开一个文件就调试) 打开文件夹后,那里显示没有配置,这时需要你按下F5 弹出选择环境,点击Python 它 ...

  5. C++小项目：directx11图形程序（八）：particleSysclass

    粒子系统类,粒子系统是游戏里细小元素的控制系统,虽然感觉上它对游戏的影响不大,但是其实有了它能给游戏增色不少.粒子系统控制着细小元素的生死,运动,纹理.对它的编写让我知道,游戏里的这一片从天空飘落的雪 ...

  6. php 概率算法(转)

    例:function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 for ...

  7. Y+的查看及FLUENT壁面函数的选择

    y+的查看 其实,我们关心的应该是壁面y+值.那么我们看云图的话,是可以直接看到的,但是个人感觉,如果case大的话,也不是很方便.此外,你要是看云图的话,要用filled的方式,而且把node va ...

  8. placeholder 不支持IE修复

    <script type="text/javascript"> var JPlaceHolder = { //检测 _check : function(){ retur ...

  9. linux 两个文件合并

    可以使用cat命令,有两种实现的方式,一种将两个文件合并的到一个新的文件,另一种将一个文件追加到另一个文件的末尾. 方法一:使用cat命令从文件中读入两个文件,然后将重定向到一个新的文件.这种方法可以 ...

  10. greendao 3.1.0在android studio中配置

    1 项目根build.gradle classpath 'org.greenrobot:greendao-gradle-plugin:3.1.0' 2 app中build.gradle apply p ...