你的位置:首页 > Java教程

[Java教程]鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果


今天来分享一下【鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码】。

最后的效果如下:

 

   

 

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(){     //鼠标滑过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");     });});

 

更多web前端开发免费代码,尽在我的博客园,欢迎持续关注!

本文链接;http://www.cnblogs.com/zymseo/articles/4777944.html