javascript轮播技术

来源：互联网发布：淘宝店铺更改所在地编辑：程序博客网时间：2024/05/21 11:20
实现左右自动循环轮播效果
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div id="outer">    <div id="inner">        <ul id="image_list">            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>            <li><img src="1.jpg"/></li>        </ul>    </div></div><span id="prev">prev</span><span id="next">next</span><style type="text/css">    *{padding: 0px; margin:0px;}    body{padding: 100px;}    #outer{        position: relative;        width:760px;        height:160px;        border:4px solid #eee;        overflow: hidden;        padding: 5px;    }    #inner{        position:absolute;        width:5000px;    }    #inner ul li{        list-style-type: none;        float: left;        width:150px;        height:140px;        margin-left:3px;    }    #inner ul li img{        width:150px;        height:140px;    }    #next ,#prev{        background: #acacac;        border:1px solid #eeeeee;    }</style><script type="text/javascript" src="jquery-1.11.3.js"></script><script type="text/javascript">    //获取图片的数量    var li_count = $("#image_list").children("li").length;    var li_per = 5;    current_page = 1;    $("#next").click(function(){       var page = Math.ceil(li_count/li_per);       var li_width =  $("#outer").width();        if(current_page < page) {            $("#inner").animate( {"left":"-="+li_width},"slow");            current_page++;        } else {            $("#inner").animate( {"left":0},"fast");            current_page = 1;        }    });    $("#prev").click(function(){        var page = Math.ceil(li_count/li_per);        var li_width =  $("#outer").width();        if(current_page > 1) {            $("#inner").animate( {"left":"+="+li_width},"slow");            current_page--;        } else  {            $("#inner").animate( {"left":"-="+li_width*(page-1)},"fast");            current_page = page;        }    });</script></body></html>
0 0