<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Alipay Banner - 合肥網站建設www.an56.net</title> <style type="text/css"> .bn-alp { width:100%; height:400px; position:relative; } .bn-alp ul,.bn-alp li { margin:0; padding:0; list-style:none; } .bn-alp .box { height:100%; position:relative; } .bn-alp .box li { width:100%; height:400px; background-position:50% 50%; background-size:cover; position:absolute; top:0; left:0; z-index:10; } .bn-alp .box li.on { z-index:99; } .bn-alp .box li img.bg { display:none; } .bn-alp .box li a.b { display:block; width:100%; height:100%; } .bn-alp .i { bottom:5px; left:50%; margin-left:-50px; text-align:center; position:absolute; z-index:100;} .bn-alp .i i { display:inline-block; margin-right:10px; width:16px; height:16px; background:url(images/ico-bn-alp.png) no-repeat -16px 0; cursor:pointer; } .bn-alp .i i.on { background-position:0 0; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var bn_alp;// 定義動畫變量 var Time = 3000;// 自動播放間隔時間 毫秒 var num = 1000;// 切換圖片間隔的時間 毫秒 var page = 0;// 定義變量 var len = $( ".bn-alp .box li" ).length;// 獲取圖片的數量 $( ".bn-alp .box li" ).each(function() { $(this).css( "opacity", 0 ); $(this).css( "background-image","url(" + $(this).find('img.bg').attr('src') + ")"); $( ".bn-alp .i" ).append('<i></i>'); }); // 設置全部的圖片透明度為0 $( ".bn-alp .box li:first" ).css( "opacity", 1 ); // 設置默認第一張圖片的透明度為1 $( ".bn-alp .i i" ).eq(0).addClass("on"); function fun()// 封裝 { $( ".bn-alp .i i" ).eq(page).addClass("on").siblings('i').removeClass( "on" ); // 切換小點 $( ".bn-alp .box li" ).eq(page).addClass("on").animate({"opacity":1},num).siblings('li').removeClass( "on" ).animate({"opacity":0},num);// 切換圖片 } function run()// 封裝 { if( !$(".bn-alp .box li" ).is( ":animated" ))// 判斷li是否在動畫 { if( page == len - 1 )// 當圖片切換到了最后一張的時候 { page = 0; // 把page設置成0 又重新開始播放動畫 fun(); } else {// 繼續執行下一張 page++; fun(); } } } $(".bn-alp .i i").click( function()// 點擊小點 { if( !$( ".bn-alp .box li" ).is( ":animated" ) )// 判斷li是否在動畫 { var index = $( ".bn-alp .i i" ).index( this );// 獲取點擊小點的位置 page = index;// 同步於page fun(); } }); $( ".bn-alp" ).hover(function()// 鼠標放上去圖片的時候清除動畫 { clearInterval( bn_alp ); },function()// 鼠標移開圖片的時候又開始執行動畫 { bn_alp = setInterval( run, Time ); }).trigger( "mouseleave" ); }); </script> </head> <body> <div class="bn-alp"> <ul class="box"> <li class="on"> <a href="" class="b"><img src="https://i.alipayobjects.com/e/201210/1SqQ3MovmW.jpg" class="bg" /></a> </li> <li> <img src="https://i.alipayobjects.com/e/201210/1SqdO0g4BA.jpg" class="bg" /> </li> <li> <img src="https://i.alipayobjects.com/e/201210/1SqZEKwRls.jpg" class="bg" /> </li> <li> <img src="https://i.alipayobjects.com/e/201210/1SppXBk7PB.jpg" class="bg" /> </li> </ul> <div class="i"></div> </div> </body> </html>
images/ico-bn-alp.png
