suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erklärung der Verwendung von jquery zum Erstellen von Karussellbildern auf dem PC

Ausführliche Erklärung der Verwendung von jquery zum Erstellen von Karussellbildern auf dem PC

php中世界最好的语言
php中世界最好的语言Original
2018-03-23 10:46:182259Durchsuche

Dieses Mal erkläre ich Ihnen ausführlich, wie Sie mit jquery ein PC-seitiges Karusselldiagramm erstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von jquery zum Erstellen eines PC-seitigen Karusselldiagramms? ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.

Ich war in letzter Zeit nicht sehr beschäftigt mit anderen Projekten. Ich wurde beauftragt, eine neue Seite für das offizielle Website-Projekt des Unternehmens zu erstellen (ich war noch nie an dem offiziellen Website-Projekt des Unternehmens beteiligt). Ort, an dem Karussellbilder verwendet werden. Es wäre schön, das Plug-in swiper.js zu implementieren, aber ich habe festgestellt, dass swiper.js zuvor nicht im offiziellen Website-Projekt eingeführt wurde Als ich darüber nachdachte, habe ich es nicht eingeführt, um zu vermeiden, dass eine weitere Netzwerkanforderung hinzugefügt werden muss. Da jQuery im Projekt verwendet wurde, verwenden Sie einfach jQuery, um ein Karussellbild zu schreiben.

Nehmen Sie nun den Karussellbildcode heraus, den Sie separat geschrieben haben, erstellen Sie eine kleine Demo und schreiben Sie sie hier, um sie aufzuzeichnen (die Bilder des Karussellbilds in der Demo wurden zufällig online gefunden)

Erzielte Effekte:

1. Automatisches Karussell (Karussell-Zeitintervall wird im JS-Code angepasst)

2. Klicken Sie auf die linke und rechte Schaltfläche, um eine manuelle Umschaltung zu erreichen

3. Der kleine Punkt unten zeigt den aktiven Status entsprechend der Position des umgeschalteten Bildes an

4. Die Maus bewegt sich durch den Karussellbereich, stoppt das Karussell und verlässt den Karussellbereich, um das zu starten Karussell

Die Ergebnisse des Codeverzeichnisses lauten wie folgt:

1. index.html

Hinweis: Hier Das eigentliche Karussell auf der Seite zeigt den Benutzern jedoch 5 verschiedene Bilder, um den Karusselleffekt zu gewährleisten erstes Bild, daher gibt es 7 Bilder in der Demostruktur, und die Größe jedes Bildes muss gleich sein (die Breite und Höhe betragen hier 720 * 350 Pixel). 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>PC-jquery版轮播图</title>
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body>
<p class="layout">
 <h2 style="text-align: center;">PC-jquery版轮播图</h2>
 <p class="slide" id="slide">
  <p id="outer" class="outer">
   <ul id="inner" class="inner">
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img src="images/slide-5.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img src="images/slide-1.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-2</p><img src="images/slide-2.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-3</p><img src="images/slide-3.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-4</p><img src="images/slide-4.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img src="images/slide-5.jpg"></a></li>
    <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img src="images/slide-1.jpg"></a></li>
   </ul>　　　　　　　<!--底部小圆点-->
   <ol class="dot" id="dot">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ol>
  </p>
　　　　 <!--左右两侧的点击切换按钮-->
  <p class="arrow-box">
   <p class="arrow arrow-l" id="arrow_l">‹</p>
   <p class="arrow arrow-r" id="arrow_r">›</p>
  </p>
 </p>
</p>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

2. style.css

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.layout {
 width: 1000px;
 margin: 30px auto;
}
ul,ol,li {
 list-style: none;
}
.slide {
 position: relative;
 width: 900px;
 margin:auto;
}
.slide .outer {
 position: relative;
 margin: 30px auto;
 width: 720px;
 height: 400px;
 overflow: hidden;
}
.slide .outer .inner {
 width: 5040px;
 height: 350px;
 position: absolute;
 left: -720px;
 top: 0;
}
.slide .outer .inner li {
 float: left;
 height: 350px;
}
.slide .outer .inner li a {
 display: block;
 position: relative;
 width: 100%;
 height: 100%;
}
.slide .outer .inner li a p {
 position: absolute;
 left: 0;
 bottom: 0;
 color: #fff;
 font-size: 18px;
 width: 720px;
 height: 80px;
 line-height: 80px;
 padding-left: 50px;
 background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.slide .outer .dot {
 margin-top: 365px;
 text-align: center;
}
.slide .outer .dot li {
 height: 6px;
 width: 6px;
 border-radius: 3px;
 background-color: #d2cbcb;
 display: inline-block;
 margin: 0 3px;
}
.slide .outer .dot li.active {
 background-color: #6e5ca5;
}
.slide .arrow-box {
 position: absolute;
 width: 900px;
 height: 60px;
 top: 150px;
 left: 0;
}
.slide .arrow-box .arrow {
 width: 60px;
 height: 60px;
 line-height: 60px;
 text-align: center;
 border-radius: 30px;
 background-color: #dde2e6;
 font-size: 60px;
 color: #999;
 cursor: pointer;
}
.slide .arrow-box .arrow.arrow-l {
 float: left;
}
.slide .arrow-box .arrow.arrow-r {
 float: right;
}

3. index.js

Hinweis: js-Code , jede Variable wurde mit Anmerkungen versehen. Um zu verhindern, dass die Animation durch schnelle Mehrfachklicks stoppt, wird hier bei jedem Bildwechsel stop(false,true) aufgerufen. Bitte beachten Sie jedoch, dass Sie beim Scrollen nach links nach dem Scrollen zum letzten Bild beim erneuten Wechsel nicht stop(false,true) verwenden, sondern sofort das erste Bild (eigentlich das dritte Bild in der Dom-Struktur) suchen ), ähnlich ist es beim Scrollen nach rechts, nachdem zum ersten Bild gescrollt wurde, nicht erforderlich, beim erneuten Umschalten anzuhalten (falsch, wahr), sondern sofort das letzte Bild zu lokalisieren (eigentlich eine Domstruktur im vorletzten Bild). ). 

var interval = 3000;    //轮播间隔时间
var arrowL = $('#arrow_l');   //左侧箭头
var arrowR = $('#arrow_r');   //右侧箭头
var slideBox = $('#slide');   //轮播图区域
var innerBox = $('#inner');   //内层大盒子
var img = innerBox.children('li'); //每个图片
var dot = $('#dot');    //小圆点盒子
var imgW = $(img[0]).outerWidth(); //每个li标签的宽度
var imgCount = 5;     //总图片个数（不同图片的个数）（实际dom上是有7张）
var i = 0;       //初始化为第0张图片
timer = null;      //定时器
//自动轮播
timer = setInterval(function () {
 i++;
 innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
 dot.find('li').removeClass('active').eq(i-1).addClass('active')
 if(i > imgCount){
  innerBox.animate({'left':-1*imgW+'px'},0);
  dot.find('li').removeClass('active').eq(0).addClass('active')
  i = 1;
 }
},interval)
//点击右侧箭头，播放下一张
arrowR.click(function () {
 i++;
 innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
 dot.find('li').removeClass('active').eq(i-1).addClass('active')
 if(i > imgCount){
  innerBox.animate({'left':-1*imgW+'px'},0);
  dot.find('li').removeClass('active').eq(0).addClass('active')
  i = 1;
 }
})
//点击左侧箭头，播放上一张
arrowL.click(function () {
 i--;
 innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
 dot.find('li').removeClass('active').eq(i-1).addClass('active')
 if(i < 1){
  innerBox.animate({&#39;left&#39;:-imgCount*imgW+&#39;px&#39;},0);
  dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(imgCount-1).addClass(&#39;active&#39;)
  i = imgCount;
 }
})
//鼠标经过轮播图区域时，清除定时器，停止自动轮播
slideBox.mouseenter(function () {
 clearInterval(timer);
})
//鼠标离开轮播图区域时，重新启动自动轮播
slideBox.mouseleave(function () {
 timer = setInterval(function () {
  i++;
  innerBox.stop(false, true).animate({&#39;left&#39;:-i*imgW+&#39;px&#39;},300)
  dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(i-1).addClass(&#39;active&#39;)
  if(i > imgCount){
   innerBox.animate({'left':-1*imgW+'px'},0);
   dot.find('li').removeClass('active').eq(0).addClass('active')
   i = 1;
  }
 },interval)
})

4. Rendering-Anzeige

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

js dynamisches Operationsformular

Verwenden Sie den Namen, um den Auswahlwert zu erhalten

Verwendung des Mehrdatei-Downloadpakets des WeChat-Applets

So verwenden Sie den Prototyp des Object-Objekts in JS

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Verwendung von jquery zum Erstellen von Karussellbildern auf dem PC. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Detaillierte grafische Erklärung der Verwendung von Slot-Scope in VueNächster Artikel：Detaillierte grafische Erklärung der Verwendung von Slot-Scope in Vue

In Verbindung stehende Artikel

Mehr sehen