简单实现jQuery轮播效果

2023-09-26 06:39:08 52

vartimer; $(function(){ //设置图片向左移 imgshow(); //点击暂停按钮事件 $(".pause").click(function(){ clearInterval(timer); }); //点击播放按钮事件 $(".play").click(function(){ imgshow(); }); //点击左按钮 $(".prev").click(function(){ imganimation("left"); }); //点击右按钮 $(".next").click(function(){ imganimation("right"); }); functionimganimation(res){ //图片向左走的轮播 if(res=="right"){ //animate()动画第一个li向左移动20% $(".lilist:first").animate({ "marginLeft":"-20%" },700,"linear",function(){ //这个li回到原来的位置 $(this).css("marginLeft","0px"); //将它追加到ul的最后的位置 $(this).appendTo($(".ullist")); }); //设置小框的图片轮播，原理与大框图片轮播一致 $(".s_lilist:first").animate({ "marginLeft":"-20%" },650,"linear",function(){ $(this).css("marginLeft","0px"); $(this).appendTo($(".s_ullist")); }); }else{ //图片向右走，与向左的原理相同 $(".lilist:first").animate({ "marginLeft":"20%" },700,"linear",function(){ $(this).css("marginLeft","0px"); $(".lilist:last").prependTo($(".ullist")); }); $(".s_lilist:first").animate({ "marginLeft":"20%" },650,"linear",function(){ $(this).css("marginLeft","0px"); $(".s_lilist:last").prependTo($(".s_ullist")); }); }; }; //默认图片自动向左走 functionimgshow(){ timer=setInterval(function(){ imganimation("right"); },2000); }; });

*{ margin:0; padding:0; } .divbg{ width:100%; height:350px; /*overflow:hidden;*/ position:relative; } .mb{ width:30%; height:350px; background:rgba(0,0,0,0.3); position:absolute; } .mb:first-child{ left:0px; } .mb:nth-child(2){ right:0px; } .ullist{ width:200%; height:350px; margin-left:-50%; } .lilist{ width:20%; height:350px; list-style:none; float:left; } .imglist{ width:100%; height:100%; } .divblock{ width:20%; height:70%; border:4pxsolidrgba(255,255,255,0.32); position:absolute; z-index:5; left:46%; top:15%; overflow:hidden; } .s_mb{ width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; z-index:10; } .s_ullist{ width:500%; height:100%; margin-left:-200%; } .s_lilist{ width:20%; height:100%; list-style:none; float:left; } .s_imglist{ height:100%; width:100%; } .s_mbimg{ margin-left:16%; margin-top:65%; cursor:pointer; }

简单实现jQuery轮播效果

热门推荐

随机推荐