鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果

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

最后的效果如下:

 

   

 

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

 

转载于:https://www.cnblogs.com/zymseo/p/4777944.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值