js Mausklick-Taste zum Wechseln von Bildern – automatische Bildumschaltung – Klicken Sie auf die linke und rechte Taste, um Spezialeffekte zu wechseln. Code_Javascript-Fähigkeiten-js-Tutorial-php.cn

js Mausklick-Taste zum Wechseln von Bildern – automatische Bildumschaltung – Klicken Sie auf die linke und rechte Taste, um Spezialeffekte zu wechseln. Code_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:41:05

Original

2226 Leute haben es durchsucht

Heute werde ich den Kombinationscode der drei Effekte des Klickens auf die Schaltfläche mit der Maus, des Bildwechsels, des automatischen Bildwechsels und des Klickens auf die linke und rechte Schaltfläche zum Wechseln von Bildern teilen.

Der Endeffekt ist wie folgt:

HTML-Codeteil:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus&reg;">
 <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="js Mausklick-Taste zum Wechseln von Bildern – automatische Bildumschaltung – Klicken Sie auf die linke und rechte Taste, um Spezialeffekte zu wechseln. Code_Javascript-Fähigkeiten"    style="max-width:90%"  style="max-width:90%"></a>
       </li>
       <li>
          <a href="#"><img src="images/2.jpg" alt="js Mausklick-Taste zum Wechseln von Bildern – automatische Bildumschaltung – Klicken Sie auf die linke und rechte Taste, um Spezialeffekte zu wechseln. Code_Javascript-Fähigkeiten"    style="max-width:90%"  style="max-width:90%"></a>
       </li>
       <li>
          <a href="#"><img src="images/3.jpg" alt="js Mausklick-Taste zum Wechseln von Bildern – automatische Bildumschaltung – Klicken Sie auf die linke und rechte Taste, um Spezialeffekte zu wechseln. Code_Javascript-Fähigkeiten"    style="max-width:90%"  style="max-width:90%"></a>
       </li>
       <li>
          <a href="#"><img src="images/4.jpg" alt="js Mausklick-Taste zum Wechseln von Bildern – automatische Bildumschaltung – Klicken Sie auf die linke und rechte Taste, um Spezialeffekte zu wechseln. Code_Javascript-Fähigkeiten"    style="max-width:90%"  style="max-width:90%"></a>
       </li>
       <li>
          <a href="#"><img src="images/5.jpg" alt="js Mausklick-Taste zum Wechseln von Bildern – automatische Bildumschaltung – Klicken Sie auf die linke und rechte Taste, um Spezialeffekte zu wechseln. Code_Javascript-Fähigkeiten"    style="max-width:90%"  style="max-width:90%"></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>

Nach dem Login kopieren

CSS-Codeteil:

*{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}

Nach dem Login kopieren

Javascript-Codeteil:

$(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");
   });
});

Nach dem Login kopieren