轮播图基本每个网站都会有，也有很多的JQuery插件可以用，这里是用JS代码写的。

案例：http://www.shopli.cn 首页三张图片的轮换就是这种写法

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Test</title>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    @*Css样式*@

    <style>

        * {

            margin: ;

            padding: ;

        }

        ul {

            height: 600px;

            position: relative;

        }

            ul li {

                float: left;

                list-style-type: none;

                height: %;

                background-position: % %;

                background-size: cover;

            }

        .one {

            background-image: url("/Content/1.jpg");

        }

        .two {

            background-image: url("/Content/2.jpg");

        }

        .three {

            background-image: url("/Content/3.jpg");

        }

        .four {

            background-image: url("/Content/4.png");

        }

        .dw {

            position: absolute;

            bottom: 5px;

            width: %;

            text-align: center;

        }

        ol {

            list-style: none;

            text-align: center;

        }

        ol li {

                display: inline-block;

                width: 22px;

                height: 4px;

                padding: 4px;

                overflow: hidden;

                text-indent: -999em;

                cursor: pointer;

                background-color: white;

            }

        .hasClass {

            background-color: red;

        }

    </style>

</head>

<body>

    <div style="position: relative; overflow: hidden; height: 600px;">

        @*有多少个li，ul的宽度就是 X00%*@

        <ul style="width:600%; margin-left:-100%;">

            @*第一张前面放最后一张，做轮播给人一种一直往一个方向的感觉*@
　　　　　　　　当显示这张图片时，ul就改变样式定位到第4张图片

            <li class="four" style="width:16.6667%"></li>   

            @*这里的li标签宽度是16.66667%怎么来的， 只有4张图片做轮播，前后各加一张就是6张，

            16.666667=100/6  如果是2张做轮播，一共4个li,   每个li的宽度就是25%*@

            @*这4张图片做轮播*@

            <li class="one" style="width:16.6667%"></li>

            <li class="two" style="width:16.6667%"></li>

            <li class="three" style="width:16.6667%"></li>

            <li class="four" style="width:16.6667%"></li>

            @*最后一张后面放第一张，做轮播给人一种一直往一个方向的感觉*@
               当显示这张图片时，ul改变样式定位到第1张图片

            <li class="one" style="width:16.6667%"></li>

        </ul>

        <nav class="dw">

            <ol >

                <li data-slide="" class="hasClass"></li>

                <li data-slide="" class=""></li>

                <li data-slide="" class=""></li>

                <li data-slide="" class=""></li>

            </ol>

        </nav>

    </div>

</body>

</html>

<script>

    var mm;

    function hh() {

        //ul li做向左移动

        $("ul").animate({ "left": "+=" + "-100%" }, , function () {

            var i;//得到第几张的值

            $("ol li").each(function () {

                if ($(this).attr("class") != "") {

                    i = $(this).attr("data-slide");

                }

            });

            //因为是做过一次动画才来找值，所有当i为3时，ul是的left是 -400%,也就是第5张图片

            i = parseInt(i) + ;

            //如果等于4 就重置下，               这里有4张做轮播就是4

             if (parseInt(i) == ) {

                i = ;

                $("ul").css("left", "0%");  //重新定位下，ul的left已经重置了，因为图片没变，所以给人一个方向的假象

            }

            $("ol li").attr("class", "");   //把所有的li的样式移除

            $("ol li:eq(" + parseInt(i) + ")").attr("class", "hasClass");    //下面的图标显示

        })

        mm = setTimeout("hh()", );   //每个4秒做一次动画

    }

    $(document).ready(function () {

        mm = setTimeout("hh()", );

        //点第几张就显示几张    左右也是一回事，这里没写

        $("ol").on("click", "li", function () {

            var jj = $(this).attr("data-slide"); //点的第几张

            $("ol li").attr("class", "");

            $("ol li:eq(" + parseInt(jj) + ")").attr("class", "hasClass");    //下面的图标显示

            clearTimeout(mm);

            $("ul").animate({ "left": "-" + parseInt(jj) + "00%" }, , function () {

                mm = setTimeout("hh()", );

            });  //重新定位下

        })

    })

</script>

轮播图--JS手写的更多相关文章

  1. jq轮播图插件—手写

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  2. 轮播图--js课程

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 轮播图js版&jQ版

    JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...

  4. 小米官网轮播图js+css3+html实现

    官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...

  5. 轮播图js编写

    //面向对象 function Left() { this.index = 0; this.lefthover = $('#left-content'); this.listenhover(); th ...

  6. 转：大气炫酷焦点轮播图js特效

    使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...

  7. banner轮播图js

    例子1: if(!$('.side_ul ul').is(":animated")){            var wli = $('.side_ul li').width()+ ...

  8. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  9. 简单介绍无限轮播图，js源代码

    无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html>   <head>     <meta charse ...

随机推荐

  1. HexColorPicker 让选色变得更简单[for Mac]

    开发iOS的筒子看过来,走过路过,一不小心就错过~ Xcode里的颜色选择器,不能让你随意制定十六进制的颜色,让选色变成了一种折磨,然而作为开发者和设计师又得经常要用到. 现在有了HexColorPi ...

  2. JavaScript设计模式之单例模式

    一.单例模式概念 单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个 ...

  3. @Index用法——javax.persistence.Index

    package com.springup.utiku.model; import java.io.Serializable; import javax.persistence.Entity; impo ...

  4. php把excel数值格式转成日期格式问题

    在excel中:40847对应2011-10-31,是日期的数值型表现形式. 在PHP中,echo date('Y-m-d H:i:s',40847);//结果1970-01-01 11:52:30 ...

  5. Routing

    假如有一个请求:localhost/home/index,那么路由需要做的事情如下: (1)确定Controller (2)确定Action (3)确定其他参数 (4)根据识别出来的数据,将请求传递给 ...

  6. 2015 偶数求和 AC 杭电

    偶数求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  7. Memcached-1.4.4启动参数——手动设置chunk大小的上限

    最近在看memcached的源代码,源码包是memcached-1.4.22,一开始看memcached.c的main函数的时候发现了和1.2.8的不同之处. 可能在1.4.22版本之前就已经添加了这 ...

  8. KEIL C51的XBYTE关键字

    The XBYTE macro allows you to access individual bytes in the external data memory of the 8051. You m ...

  9. 为什么同时需要IP地址和MAC地址

    每个以太网设备在出厂时都有一个唯一的MAC地址,为什么还需要为每台主机再分配一个IP地址?或者说每台主机都分配唯一的IP地址,为什么还要在网络设备(如网卡,集线器,路由器等)生产时内嵌一个唯一的MAC ...

  10. 14.1.2 InnoDB表最佳实践:

    14.1.2 Best Practices for InnoDB Tables InnoDB表最佳实践: 这个章节描述使用InnoDB表最佳实践: 1.指定一个主键用于每个表使用最多查询的列或者多列, ...