今天來(lái)分享一下鼠標(biāo)點(diǎn)擊按鈕，圖片進(jìn)行切換+圖片自動(dòng)切換+點(diǎn)擊左右按鈕圖片進(jìn)行切換的三種效果的組合代碼。
最后的效果如下：
Html代碼部分：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>圖片輪播效果制作_趙一鳴隨筆博客</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/style.js"></script> </head> <body> <div class="banner"> <ul class="pic"> <li> <a href="#"><img src="images/1.jpg" alt="美女" width="350" height="495"></a> </li> <li> <a href="#"><img src="images/2.jpg" alt="美女" width="350" height="495"></a> </li> <li> <a href="#"><img src="images/3.jpg" alt="美女" width="350" height="495"></a> </li> <li> <a href="#"><img src="images/4.jpg" alt="美女" width="350" height="495"></a> </li> <li> <a href="#"><img src="images/5.jpg" alt="美女" width="350" height="495"></a> </li> </ul> <ul class="anniu"> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="lr"> <li class="pre"><a href="#"> < </a></li> <li class="next"><a href="#"> > </a></li> </ul> </div> </body></html>
Css代碼部分：
*{margin:0px;padding:0px}li{list-style:none}a{text-decoration:none}img{border:0px}.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}.banner .pic{width:9999px;height:495px}.banner .pic li{width:350px;height:495px;float:left}.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline;cursor:pointer;border-radius:100%}.banner .anniu li.on{background:red}.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}.banner .lr a{color:white}.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}.banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}Javascript代碼部分：
$(function(){ //鼠標(biāo)滑過(guò)banner，左右按鈕進(jìn)行顯示和隱藏 $(".banner").hover(function(){ $(".lr").show(); },function(){ $(".lr").hide(); }); //點(diǎn)擊下面的小按鈕，圖片進(jìn)行左右切換效果 $(".anniu li").click(function(){ $(this).addClass("on").siblings().removeClass("on"); var num=$(this).index(); $(".pic").animate({marginLeft:-350*num},"slow"); }); //圖片自動(dòng)輪播效果 var a=0; var automatic=setInterval(function(){ a++; a=a%5; $(".pic").animate({marginLeft:-350*a},"slow"); $(".anniu li").eq(a).addClass("on").siblings().removeClass("on"); },6000); //點(diǎn)擊左右按鈕，圖片進(jìn)行切換效果 $(".pre").click(function(){ a--; a=(a+5)%5; $(".pic").animate({marginLeft:-350*a},"slow"); $(".anniu li").eq(a).addClass("on").siblings().removeClass("on"); }); $(".next").click(function(){ a++; a=a%5; $(".pic").animate({marginLeft:-350*a},"slow"); $(".anniu li").eq(a).addClass("on").siblings().removeClass("on"); });});新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
