jQuery制作全屏宽度固定高度轮播图(实例讲解)

2024-02-16 17:04:03 283

*{ margin:0; padding:0; } .cm-banner{ width:100%; height:300px; overflow:hidden; cursor:pointer; position:relative; } .cm-banner-in{ width:1100px; height:300px; position:absolute; top:0; left:50%; margin-left:-550px; } #cm_banner_listli{ display:none; position:absolute; top:0; left:0; } .cm-banner-num{ width:100%; position:absolute; bottom:0; text-align:center; z-index:2;/*如果没有在这里设置层次小圆点的点击效果无法触发*/ } .cm-banner-numli{ width:10px; margin:10px3px; height:10px; background-color:#fff; border-radius:5px; -webkit-border-radius:5px; display:inline-block; opacity:0.7; } .cm-banner-num.active{ background-color:#3982de; } .cm-banner-arrow{ position:absolute; top:50%; margin-top:-22px; opacity:0.5; display:none; } #cm_prev{ left:0; } #cm_next{ right:0; }

$(function(){ //鼠标移入显示箭头按钮 $('.cm-banner').hover(function(){ $('.cm-banner-arrow').show(); clearInterval(cm_timer); },function(){ $('.cm-banner-arrow').hide(); cm_timer=setInterval(function(){ i++; if(i>cm_length-1){ i=0; } $('#cm_banner_listli').eq(i).fadeIn(800).siblings().fadeOut(800); cm_toggle(i); },2500); }); //鼠标移入箭头按钮高亮 $('.cm-banner-arrow').hover(function(){ $(this).css('opacity','1'); },function(){ $(this).css('opacity','0.5'); }); //初始化必要变量 vari=0; varcm_length=$('#cm_banner_listli').length; varcm_toggle=function(point){ $('#cm_banner_numli').eq(point).addClass('active').siblings().removeClass('active'); }; //动态添加小圆点 for(j=0;j'); } //给第一个小圆点添加样式 $('#cm_banner_numli').first().addClass('active'); //给第一张图片添加样式 $('#cm_banner_listli').first().css('display','block'); //鼠标点击左箭头切换 $('#cm_prev').click(function(){ i--; if(i<0){ i=cm_length-1; } $('#cm_banner_listli').eq(i).fadeIn(800).siblings().fadeOut(800); cm_toggle(i); }); //鼠标点击右箭头切换 $('#cm_next').click(function(){ i++; if(i>cm_length-1){ i=0; } $('#cm_banner_listli').eq(i).fadeIn(800).siblings().fadeOut(800); cm_toggle(i); }); //鼠标点击圆点切换 $('#cm_banner_numli').click(function(){ varcm_index=$(this).index(); $('#cm_banner_listli').eq(cm_index).fadeIn(800).siblings().fadeOut(800); i=cm_index; cm_toggle(cm_index); }); //自动播放 cm_timer=setInterval(function(){ i++; if(i>cm_length-1){ i=0; } $('#cm_banner_listli').eq(i).fadeIn(800).siblings().fadeOut(800); cm_toggle(i); },2500); });

jQuery制作全屏宽度固定高度轮播图(实例讲解)

热门推荐

随机推荐