改变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编辑  收藏  举报