first push
This commit is contained in:
106
public/assets/index/js/banner.js
Normal file
106
public/assets/index/js/banner.js
Normal file
@@ -0,0 +1,106 @@
|
||||
//全屏滚动
|
||||
window.onload=function(){
|
||||
var n=0;
|
||||
var imgLength=$(".b-img img").length;
|
||||
var ctWidth=imgLength*100;
|
||||
var itemWidth=1/imgLength*100;
|
||||
$(".b-img").width(ctWidth+"%");
|
||||
$(".b-img img").width(itemWidth+"%");
|
||||
$(".banner").height($(".b-img img:eq(0)")[0].height+"px");
|
||||
|
||||
$(".b-list").width(imgLength*30);
|
||||
|
||||
$(".b-list").css('padding-top',$(".b-img img:eq(0)")[0].height-20);
|
||||
|
||||
if(imgLength>1)
|
||||
{
|
||||
for(var i=0;i<imgLength;i++)
|
||||
{
|
||||
var listSpan=$("<span></span>")
|
||||
$(".b-list").append(listSpan);
|
||||
}
|
||||
}
|
||||
$(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");
|
||||
$(".bar-right em").click(function(){
|
||||
if(n==imgLength-1)
|
||||
{
|
||||
var ctPosit=(n+1)*100;
|
||||
$(".banner").append($(".b-img").clone());
|
||||
$(".b-img:last").css("left","100%");
|
||||
$(".b-img:first").animate({"left":"-"+ctPosit+"%"},1000);
|
||||
$(".b-img:last").animate({"left":"0"},1000);
|
||||
var setTime0=setTimeout(function () {
|
||||
$(".banner .b-img:first").remove();
|
||||
}, 1000);
|
||||
n=0;
|
||||
$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
|
||||
}
|
||||
else
|
||||
{
|
||||
n++;
|
||||
var ctPosit=n*100;
|
||||
$(".b-img").animate({"left":"-"+ctPosit+"%"},1000);
|
||||
$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
|
||||
}
|
||||
})
|
||||
$(".bar-left em").click(function(){
|
||||
if(n==0)
|
||||
{
|
||||
var stPosit=imgLength*100;
|
||||
var etPosit=(imgLength-1)*100;
|
||||
$(".banner").prepend($(".b-img").clone());
|
||||
$(".b-img:first").css("left","-"+stPosit+"%");
|
||||
$(".b-img:last").animate({"left":"100%"},1000);
|
||||
$(".b-img:first").animate({"left":"-"+etPosit+"%"},1000);
|
||||
var setTime0=setTimeout(function () {
|
||||
$(".banner .b-img:last").remove();
|
||||
}, 1000);
|
||||
n=imgLength-1;
|
||||
$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
|
||||
}
|
||||
else
|
||||
{
|
||||
n--;
|
||||
var ctPosit=n*100;
|
||||
$(".b-img").animate({"left":"-"+ctPosit+"%"},1000);
|
||||
$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
|
||||
}
|
||||
})
|
||||
$(".b-list span").click(function(){
|
||||
var lsIndex=$(this).index();
|
||||
n=lsIndex;
|
||||
var ctPosit=n*100;
|
||||
$(".b-img").animate({"left":"-"+ctPosit+"%"},1000);
|
||||
$(this).addClass("spcss").siblings("span").removeClass("spcss");
|
||||
})
|
||||
function rollEnvent(){
|
||||
if(n==imgLength-1)
|
||||
{
|
||||
var ctPosit=(n+1)*100;
|
||||
$(".banner").append($(".b-img").clone());
|
||||
$(".b-img:last").css("left","100%");
|
||||
$(".b-img:first").animate({"left":"-"+ctPosit+"%"},1000);
|
||||
$(".b-img:last").animate({"left":"0"},1000);
|
||||
var setTime0=setTimeout(function () {
|
||||
$(".banner .b-img:first").remove();
|
||||
}, 1000);
|
||||
n=0;
|
||||
$(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");
|
||||
}
|
||||
else
|
||||
{
|
||||
n++;
|
||||
var ctPosit=n*100;
|
||||
$(".b-img").animate({"left":"-"+ctPosit+"%"},1000);
|
||||
$(".b-list span:eq("+n+")").addClass("spcss").siblings("span").removeClass("spcss");
|
||||
}
|
||||
}
|
||||
var slidesetInterval=setInterval(rollEnvent,4000);
|
||||
$(".banner").hover(function(){clearInterval(slidesetInterval);},function(){slidesetInterval=setInterval(rollEnvent,4000);});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user