suchen

Heim  >  Artikel  >  Web-Frontend  >  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 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
WBOYOriginal
2016-05-16 15:41:052204Durchsuche

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>

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}

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");
   });
});
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Benutzerdefinierte JS-Tab-Funktion und Verwendungsbeispiel, Analyse_Javascript-KenntnisseNächster Artikel：Benutzerdefinierte JS-Tab-Funktion und Verwendungsbeispiel, Analyse_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen