javascript轮播技术

最新推荐文章于 2019-08-10 14:30:41 发布

错_对

最新推荐文章于 2019-08-10 14:30:41 发布

阅读量2.3k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Free_Program_1314/article/details/46351125

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现左右自动循环轮播效果

<!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>