suchen

Heim  >  Artikel  >  Web-Frontend  >  Einfacher Karusselleffekt, implementiert von Jquery [mit Beispielen]_jquery

Einfacher Karusselleffekt, implementiert von Jquery [mit Beispielen]_jquery

WBOY
WBOYOriginal
2016-05-16 15:04:491057Durchsuche

Einfacher Karusselleffekt implementiert von Jquery [mit Beispielen] 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/baner.js"></script>
</head>
<body>
  <div class="main">
    <a href=""><img src="img/baner-1.jpg" alt=""></a>
    <a href=""><img src="img/baner-2.jpg" alt=""></a>
    <a href=""><img src="img/baner-3.jpg" alt=""></a>
    <a href=""><img src="img/baner-4.jpg" alt=""></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>
</html>
/*************初始化************/
*{margin:0;padding: 0;border: none;list-style: none}
/*********轮播左右居中*************/
.main{
  width: 1024px;
  height: 320px;
  margin: 0 auto;
  position: relative;
}
.main a{
  position: absolute;
}
.main a img{
  width: 100%;
  height: 320px;

}
/***********左边小图标************/
.main ul li.selected{
  background: #f97157;
}
.main ul{
  position: absolute;
  z-index: 999;
  top: 120px;
  left: 20px;
}
.main ul li{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #909090;
  cursor: pointer;
  text-align: center;
}
/**
 * Created by Administrator on 16-3-12.
 */
/***********定义全局变量和定时器*************/
var t=null;

var n=0;/**动态变化**/
var count;
/************************/
$(function(){
  count=$(".main a").length;/*给动态变化的n备用*/
  /**让不是轮播中的第一个隐藏**/
  $(".main a:not(:first-child)").hide();
  /*点击当前li当前li对应的图片显示出来*/
  $(".main ul li").click(function(){
    var index=$(this).text()-1;
    n=index;
    console.log(n);
    /*****让当前显示的图片0.5S内渐隐，并匹配下一个渐显示*****/
    $(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000);
    /*******聚焦，给当前li追加类，改变背景色*******/
    $(this).addClass("selected");
    /****同时移除当前li的所有兄弟的类名为selected，还原背景色*****/
    $(this).siblings().removeClass("selected");
  });
  /***定义定时器3秒执行一次****/
  t=setInterval("autoMove()",3000);
  /****当鼠标进入时候定时器停止，移除时候定时器开启****/
  $(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});
});
/***定义自动轮播函数****/
function autoMove(){
  if(n>=(count-1)){
    n=0;
  }else{
   ++n;
  }
  /*****给li执行匹配的事件*****/
  $(".main ul li").eq(n).trigger("click");
}

Der oben von Jquery implementierte einfache Karusselleffekt [mit Beispielen] ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und ich hoffe, dass Sie Script Home unterstützen.

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：Javascript implementiert einfache Rechnereffekte [empfohlen]_Javascript-KenntnisseNächster Artikel：Javascript implementiert einfache Rechnereffekte [empfohlen]_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen