改变top使用轮播图

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #autoPly ol{
            position: absolute;
            bottom: 0;
            right:0;
            z-index: 2;

        }
        .number{
            background-color: #FFB132;
            color: red;
        }
        .order  li {
            display: inline-block;
            margin: 10px;
            background-color: aliceblue;
            color: black;
            padding: 0 5px;
            cursor: pointer;
        }
        #autoPly{
            position: relative;
            padding: 0;
            margin: 0;
            width: 400px;
            height: 100px;
            overflow: hidden;
            position: relative;
        }
        #pic{
            position: absolute;
            top: 0;
        }
        #pic li{
            height:100px;//必须要对li的高度进行声明
            list-style-type: none;
        }
        #pic  img{
            width: 400px;
            height: 100px;
            padding: 0;
            margin: 0;
        }

    </style>
</head>
<body>
<div id="autoPly">
    <ol class="order">
        <li class="number" style="background-color: red">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>

    </ol>
    <ul id="pic">
        <li><a href="#"><img src="images/wp_ss_20160503_0001.png"></a></li>
        <li><a href="#"><img src="images/wp_ss_20160503_0002.png"></a></li>
        <li><a href="#"><img src="images/wp_ss_20160503_0003.png"></a></li>
        <li><a href="#"><img src="images/wp_ss_20160503_0004.png"></a></li>
    </ul>
</div>
<script src="jquery-1.12.0.min.js"></script>
<script>
    window.onload=function (){
        var pic=document.getElementById("pic");
        var order=document.getElementsByClassName("order");
        var orderLi=$(".order li");//选取li标签
        var now=0;
            for(i=0;i<orderLi.length;i++){//for 遍历，给每个li元素添加行为
                orderLi[i].index=i;
                orderLi[i].onclick = function () {
                    now=this.index;
                    tab();//点击时调用tab（），函数，实现位置改变
                }
            }
            function tab(){//轮播图图片切换时的代码
                for(i=0;i<orderLi.length;i++){//首先遍历，先将所有颜色改变
                    orderLi[i].style="background-color:aliceblue";
                }
　　　　　　　　//再单独改变你要点击的那个style值

                orderLi[now].style="background-color:red";//为什么要用this，而不是orderLi[i]
                pic.style.top=(-100)*now+"px";//改变位置
            }
            function next(){
                now++;
                if(now==orderLi.length){
                    now=0;
                }
                tab();
            }

            setInterval(next,2000);//设定时间间隔，每隔两秒调用next，
    }
</script>

</body>
</html>

笔记：

轮播图中的两种行为：1，自动轮播：设定setinterval函数，每隔一段时间调用，改变位置，只需要改变位置即可，这里是在2s后的间隔后调用的函数now++；

2，点击下面相应的数字序号后，会调到相应的图片，这里也是通过改变now来完成的

3，tab（）函数仅仅完成的是一个图片的切换过程

posted @ 2017-03-15 10:03  张宁宁  阅读(269)  评论(0)  编辑  收藏  举报