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-sass 的正确姿势

    SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

  2. Struts2 Result 类型和对应的用法详解

  3. 大米网赚项目介绍，官方唯一客服QQ:712994168

    大米平台项目来源   QQ:712994168 大米软件本质上是一个高质量网赚项目收集和发布平台,该平台的所有项目都是经过专业的测试团队实测有效的项目和教程,只要去做绝对可以赚钱.平台里面的项目类型包 ...

  4. 深入理解git，从研究git目录开始

    转发学习的啦. 似乎很少有人在读某个git快速教程的时候会说:“这个关于git的快速教程太酷了!读完了用起git来超级舒服,并且我一点也不怕自己会破坏什么东西.” 对git的初学者来说,刚接触git时 ...

  5. LeetCode 3 Longest Substring Without Repeating Characters 区间,想法 难度:1

    https://leetcode.com/problems/longest-substring-without-repeating-characters/ 思路:从某点结束所能取到的最早开头是到目前出 ...

  6. c语言基础数据类型及命名规范

    1. 常量是程序运行期间不能被改变的量; 变量代表一个存储区域,存储区域内存储的内容就是变量的值, 变量的值可以在程序运行期间改变  (变量就像一个杯子, 用来存放水, 杯子里的水即变量的值是可以改变 ...

  7. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  8. MYSQL低权限读文件

    技巧:Reading files in MySQL with file_priv = no. 当用户无权限调用load_file()函数的时候可以用以下方式读取文件内容: 1.建立test(不分配fi ...

  9. 一、Python 简介

    There should be one -- and preferably only one -- obvious way to do it. 一种解释型,面向对象的.带有动态语义的高级程序设计语言. ...

  10. java目录与classpath

    目录结构 描述 jdk bin            编译器和工具 demo             演示 docs              HTML格式的类库文档 include         ...