鼠標點擊按鈕圖片切換+自動切換+左右按鈕點擊切換效果

2024-04-27 15:01:04

字體：大中小

來源：轉載

供稿：網友

今天來分享一下【鼠標點擊按鈕，圖片進行切換+圖片自動切換+點擊左右按鈕圖片進行切換的三種效果的組合代碼】。

最后的效果如下：

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="Descr 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="><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(){         //鼠標滑過banner，左右按鈕進行顯示和隱藏         $(".banner").hover(function(){                   $(".lr").show();         },function(){                   $(".lr").hide();         });         //點擊下面的小按鈕，圖片進行左右切換效果         $(".anniu li").click(function(){                   $(this).addClass("on").siblings().removeClass("on");                   var num=$(this).index();                   $(".pic").animate({marginLeft:-350*num},"slow");         });         //圖片自動輪播效果         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);         //點擊左右按鈕，圖片進行切換效果         $(".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");         });});