图片静态的左右滑动

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/this_tall_people/article/details/79701157

1. html结构要求

    <div id="preclick"><span class="leftarrow"></span></div>
    <div class="contantime">
        <div id="ordercontent">存放滑动的元素,可以使多个相同的class,也可以是li</div>
    </div>
    <div id="nextclick"><span class="rightarrow"></span></div>

1.css

//外层的设置overflow属性
.contantime{
width:95%;
overflow:hidden;
position: relative;
height:0.65rem;
  margin:0 auto;
}
//设置position为绝对定位
#ordercontent{
  height:0.65rem;
  position:absolute;
  left:0px;
}
//左右箭头
#nextclick{
float:right;
width: 25px;
height: 25px;
display:none;
background: rgba(39,81,214,0.2);
color:#333;position: absolute;
right: 0.2%;
top: 40%;
}

.leftarrow{
  width: 15px;
  height: 15px;
    /* padding-left: 11px; */
    position: relative;
    top: 20%;
    left: 27%;
    border-top: 2px solid #2751D6;
    border-left: 2px solid #2751D6;
    transform: rotate(-45deg);
}

2.js 代码

var $slider = $('#ordercontent');
        var $slider_child_l = $('#ordercontent .time_state_box').length;
        var $slider_width = $('#ordercontent .time_state_box').width();
$slider.width($slider_child_l * $slider_width);
        //如果超过时间轴显示的范围----50条数据
        if(data.data.length >=51){
            if(difftime <=(50-13)){
               slider_count = slider_child_l- 50;
               $('#ordercontent').css('left',-($slider_child_l * $slider_width-50 * $slider_width))
            } else {
                slider_count = 13;
               $('#ordercontent').css('left',-13 * $slider_width)

            }
            $('#nextclick').css('display','block');
            $('#preclick').css('display','block');

            $('#nextclick').off('click').on('click',function(){
                console.log($slider_child_l);
                if (flag || slider_count >= $slider_child_l - 50) {
                                    return false;
                                }

                                slider_count++;
                                $slider.animate({left: '-=' + $slider_width + 'px'}, 'fast');
                                slider_pic();

            })
              $('#preclick').off('click').on('click',function(){

                if (slider_count <= 0) {
                                    return false;
                                }
                                flag =false;
                                slider_count--;
                                $slider.animate({left: '+=' + $slider_width + 'px'}, 'fast');
                                slider_pic();
              })

                function slider_pic() {
                    if (slider_count >= $slider_child_l - 50) {
                        $('#nextclick').css({cursor: 'auto'});
                    }
                    else if (slider_count > 0 && slider_count <= $slider_child_l - 50) {
                        $('#preclick').css({cursor: 'pointer'});      
                        $('#nextclick').css({cursor: 'pointer'});        
                    }
                    else if (slider_count <= 0) {
                        $('#preclick').css({cursor: 'auto'});
                    }
                }


                }
展开阅读全文

没有更多推荐了,返回首页