图片滑动

最新推荐文章于 2021-12-11 21:52:25 发布

恩洛

最新推荐文章于 2021-12-11 21:52:25 发布

阅读量257

点赞数 1

分类专栏： jQuery

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clear:after{
            content: '';
            display: block;
            clear: both;
        }
        .outer{
            width: 1240px ;
            margin: 0 auto;
        }
        .outer>*{
            float: left;
        }
        .outer a{
            width: 30px;
            height: 40px;
            background-color: #ff4a00;
            color: #fff;
            line-height: 40px;
            text-align: center;
            margin-top: 163.5px;
        }
        .box{
            position: relative;
            width: 1140px;
            height: 365px;
            overflow: hidden;
        }
        .box ul{
            position: absolute;
            left: 0;
            top:0;
            width: 1995px;
            list-style: none;
        }
        .box ul li{
            float: left;
            width: 250px;
            height: 365px;
            margin: 0 5px;
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
<div class="outer outer1 clear">
    <a href="javascript:void (0);" class="prev">prev</a>
    <div class="box">
        <ul class="clear">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <a href="javascript:void (0);" class="next">next</a>
</div>
<div class="outer outer2 clear">
    <a href="javascript:void (0);" class="prev">prev</a>
    <div class="box">
        <ul class="clear">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <a href="javascript:void (0);" class="next">next</a>
</div>

<script>
     //生成插件
    $.fn.extend({
        imgSlide:function (par) {
            //计算ul宽度
            var that = this;
            var liWidth = $(that).find('.box ul li').outerWidth(true);
            var liCount = $(that).find('.box ul li').length;
            $(that).find('.box ul').css('width', liWidth * liCount);
            var def = {showCount:4,durartion:500,step:2};
            if(par){
                for(var key in def){
                    def[key] = par[key];
                }
            }
            /*var showCount = 4;//显示li的个数
             var duration = 500;//每滑动一个li 的时间
             var step = 2;*/
            //计算box的宽度
            $(that).find('.box').css('width', liWidth * def.showCount);
            $(that).css('width', (liWidth * def.showCount) + 100);
            var count = 0;
            $(that).find('.next').click(function () {
                console.log(111);
                count += def.step;
                if (count >= (liCount - def.showCount + 1)) {
                    count = 0;
                }
                $(that).find('.box ul').animate({left: -(count * liWidth) + 'px'}, def.duration);
            });
            $(that).find('.prev').click(function () {
                count -= def.step;
                if (count <= -1) {
                    count = liCount - def.showCount;
                }
                $(that).find('.box ul').animate({left: -(count * liWidth) + 'px'}, def.duration);
            });
        }
    });
       $('.outer1').imgSlide();
       $('.outer2').imgSlide({showCount:5,durartion:1000,step:1});
</script>
</body>
</html>