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. 使用 Eclipse PhoneGap 构建 Android 应用程序入门

    Eclipse 是一种支持多种技术的开源集成开发环境 (IDE),但本文重点介绍 Java 支持,这也是 Android 应用程序的“母语”.Android 是 Google 发布的开源移动操作系统. ...

  2. 数据中心第三方服务、金融IT外包服务、社保医疗信息化解决方案，这三类业务是什么关系，区别在哪？

    这个话题很大,牵扯很多,试着回答一下,算是胡扯了. 三类业务的关系,都是IT外包,至于外包的内容很杂.DC的外包,多半是基建和建维,一般不牵扯到软件开发,网站建设类的.金融IT外包就复杂多了,信息系统 ...

  3. typeof(self) 的作用

    block对于其变量都会形成strong reference,对于self也会形成strong reference ,而如果self本身对block也是 strong reference 的话,就会形 ...

  4. Java深度历险（五）——Java泛型

      作者 成富 发布于 2011年3月3日 | 注意:QCon全球软件开发大会(北京)2016年4月21-23日,了解更多详情!17 讨论 分享到:微博微信FacebookTwitter有道云笔记邮件 ...

  5. python学习——将while循环改成函数

    笨办法学python第33节 这一节主要学习内容是while循环,记录内容为将while改成函数,首先源代码如下: i = 0 numbers = [] while i < 6: print & ...

  6. MicroERP数据初始化SQL脚本

    --use MicroERP insert into tbUserGroup(GroupName,Remark) values('管理员组','具备所有权限')insert into tbUser(L ...

  7. 遍历所有表，取每个表的MAXID更新到ID控制表

    ) Declare @TID int DECLARE Temp_Cursor1 Cursor--定义游标 FOR SELECT Name FROM Sys_Entity OPEN Temp_Curso ...

  8. wpf初步-grid布局-连连看棋盘

    private void Window_Loaded_1(object sender, RoutedEventArgs e) { //Button btn1 = new Button(); //btn ...

  9. AsyncTask异步交互和httpurlconnection结合使用

    //网络请求数据 package com.baidu.myutils; import java.io.BufferedReader; import java.io.InputStreamReader; ...

  10. 文本过滤工具之AWK

    一.AWK简介 AWK三大文本处理工具之一,是一个非常强大的文本处理工具.它不仅是 Linux 中也是任何环境中现有的功能最强大的数据处理引擎之一.这种编程及数据操作语言(其名称来自于它的创始人 Al ...