移动端html滑动菜单,移动端仿购物网站可滑动导航栏（适用于移动端）

$(document).ready(function() {

offserHeight = $(window).width();

Liheight = offserHeight / 5;

var Dwidth = offserHeight + Liheight * 4;

$(".friendlj div").css({

'width': Dwidth + 'px'

});

$(".friendlj div ul").css({

'width': offserHeight + 'px'

});

$(".friendlj div ul").css({

'margin-left': -offserHeight / 2 + 'px'

});

$(".friendlj div ul li").css("width", Liheight + 'px');

$(".bjk").css({

'width': Liheight + 'px',

'margin-left': -Liheight / 2 + 'px'

});

Uleft = $(".friendlj div ul").offset().left;

// console.log(Uleft);

timer = setInterval(TimeChangeD, 1000);

$(".Taxis ul li").click(function() {

clearInterval(timer);

var Nval = $(this).attr('index');

var ChangeLI = Liheight * (Nval - 1);

$(".friendlj").stop().animate({

scrollLeft: ChangeLI + 'px'

}, 1000);

$("#showCot" + Nval).show().siblings().hide();

});

$(".friendlj div ul").on("touchmove", function(e) {

clearInterval(timer);

$(".friendlj").attr("pdrun", "1");

$(".friendlj").scroll(function() {

if ($(".friendlj").attr("pdrun")) {

var scrollLeftValue = $(".friendlj").scrollLeft();

// console.log(scrollLeftValue);

var pdLigs = Math.ceil(scrollLeftValue / Liheight);

// console.log(pdLigs);

$(".friendlj").stop().animate({

scrollLeft: pdLigs * Liheight + 'px'

}, 500);

var nowpdLigs = pdLigs + 1;

$("#showCot" + nowpdLigs).show().siblings().hide();

}

$(".friendlj").removeAttr('pdrun');

})

})

})

function p(s) {

return s < 10 ? '0' + s : s;

}

//获取当前时间

function TimeChangeD() {

var myDate = new Date();

var h = myDate.getHours();

var m = myDate.getMinutes();

var nowDate = p(h) + ':' + p(m);

var ArrMax = [];

// console.log(nowDate);

$(".Taxis ul li").each(function() {

var DValue = $(this).html();

if (nowDate > DValue) {

var Idex = $(this).attr('index');

ArrMax.push(Idex);

// console.log(ChangeLI);

}

});

var maxval = -1;

for (var i = 0; i < ArrMax.length; i++) {

if (ArrMax[i] > maxval) {

maxval = ArrMax[i];

}

}

var ChangeLI = Liheight * (maxval - 1);

// console.log(ChangeLI);

$(".friendlj").stop().animate({

scrollLeft: ChangeLI + 'px'

});

$("#showCot" + maxval).show().siblings().hide();

// console.log(maxval);

}