Analisis komprehensif kemahiran kesan karusel imej Bootstrap_javascript

1. Analisis struktur

Imej karusel terutamanya terdiri daripada tiga bahagian:

　☑ Karusel gambar

　☑ Kaunter untuk gambar karusel

　☑ Pengawal untuk gambar karusel

Langkah pertama: Reka bentuk bekas untuk imej karusel. Gunakan gaya karusel dalam rangka kerja Bootstrap dan tentukan nilai ID untuk bekas ini, supaya atribut data boleh digunakan untuk mengisytiharkan pencetus kemudian.

Salin kod Kod adalah seperti berikut:

Langkah 2: Reka bentuk kaunter imej karusel. Tambah kalkulator gambar karusel di dalam bekas div.carousel, menggunakan gaya penunjuk karusel. Fungsi utamanya ialah untuk memaparkan susunan main balik gambar semasa (jika terdapat beberapa gambar, letakkan beberapa li's). senarai berurutan:

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li></ol>
</div>

Langkah 3: Reka bentuk kawasan main balik imej karusel. Dalam keseluruhan kesan imej karusel, kawasan main balik adalah kawasan paling kritikal Kawasan ini digunakan terutamanya untuk meletakkan imej yang perlu diputar. Kawasan ini dikawal menggunakan gaya karusel-dalaman, dan juga diletakkan di dalam bekas karusel, dan setiap imej karusel diletakkan melalui bekas item:

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy" alt=""></a>
 </div>
 </div>
</div>　

Langkah 4: Tetapkan perihalan imej karusel juga mempunyai tajuk dan perihalan tersendiri untuk setiap imej. Malah, Carousel dalam rangka kerja Bootstrap juga memberikan kesan yang sama. Cuma tambah kod yang sepadan di bahagian bawah imej dalam item.

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

Langkah 5: Reka bentuk pengawal imej karusel. Banyak kali karusel juga mempunyai pengawal ke hadapan dan ke belakang. Ini dicapai dalam Karusel melalui gaya kawalan karusel yang digabungkan dengan kiri dan kanan. Antaranya, kiri bermaksud bermain ke hadapan dan kanan bermaksud bermain ke belakang. Ia juga diletakkan di dalam bekas karusel:

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 …
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="" >
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a> 
</div>

2. Main balik imej karusel sentuhan Deklaratif (tiada JS diperlukan)

<div id="slidershow" class="carousel slide" data-ride="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active" data-target="#slidershow" data-slide-to="0"></li>
 <li data-target="#slidershow" data-slide-to="1"></li>
 <li data-target="#slidershow" data-slide-to="2"></li>
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="Analisis komprehensif kemahiran kesan karusel imej Bootstrap_javascript" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="Analisis komprehensif kemahiran kesan karusel imej Bootstrap_javascript" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="Analisis komprehensif kemahiran kesan karusel imej Bootstrap_javascript" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题3</h3>
 <p>描述内容3...</p>
 </div>
 </div>
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

Pendekatan deklaratif dicapai dengan mentakrifkan atribut data, yang boleh mengawal kedudukan karusel dengan mudah. Ia terutamanya termasuk jenis berikut:
　1. atribut data-ride: ambil nilai karusel dan takrifkannya pada karusel.
2. Atribut sasaran data: Nilai ialah nama ID atau pengecam gaya lain yang ditakrifkan oleh karusel Seperti yang ditunjukkan dalam contoh sebelumnya, nilainya ialah "#slidershow", dan ia ditakrifkan pada setiap li kaunter karusel.
3. atribut slaid data: Nilai termasuk prev, next, prev bermaksud menatal ke belakang, dan seterusnya bermaksud menatal ke hadapan. Nilai atribut ini juga ditakrifkan pada pautan pengawal karusel dan nilai href pengawal ditetapkan kepada bekas 4. Nama ID karusel atau pengecam gaya lain.
4. atribut data-slide-to: digunakan untuk lulus subskrip bingkai tertentu, seperti data-slide-to="2", yang boleh melompat terus ke bingkai yang ditentukan (subskrip bermula dari 0), definisi yang sama pada setiap li kaunter karusel.
Perlu diingatkan di sini bahawa anda boleh menambah gaya slaid pada lapisan #slidershow dan menggunakan gambar dan kesan penukaran gambar untuk mendapatkan perasaan yang lancar.

<div id="slidershow" class="carousel slide" data-ride="carousel">
 ...
</div>

Selain data-ride="carousel", data-slide dan data-slide-to, komponen karusel juga menyokong tiga atribut tersuai lain:

Kod berikut melaksanakan "karousel tanpa gelung berterusan" dan "selang masa karusel ialah 1 saat".

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
 ......
</div>

3. Karusel imej kaedah pencetus JavaScript
HTML:

<div id="slidershow" class="carousel slide">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active" data-target="#slidershow" data-slide-to="0">1</li>
 <li data-target="#slidershow" data-slide-to="1">2</li>
 <li data-target="#slidershow" data-slide-to="2">3</li>
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题3</h3>
 <p>描述内容3...</p>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#slidershow" role="button">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#slidershow" role="button">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

JS:

 $(function(){
 $("#slidershow").carousel({
 interval:2000
 });
 $("#slidershow a.left").click(function(){
 $(".carousel").carousel("prev");
 });
 $("#slidershow a.right").click(function(){
 $(".carousel").carousel("next");
 });
 });

Parameter khusus boleh ditetapkan dalam kaedah karusel(), seperti:

Apabila menggunakannya, anda boleh menghantar parameter yang berkaitan apabila memulakan pemalam, seperti:

$("#slidershow").carousel({
 interval: 3000
});

Pemalam karusel dalam rangka kerja Bootstrap juga menyediakan pengguna dengan beberapa kaedah panggilan khas Penerangan ringkas adalah seperti berikut:

.carousel("cycle"): gelung main balik dari kiri ke kanan; .carousel("jeda"): Hentikan main balik gelung; .carousel("nombor"): Gelung ke bingkai yang ditentukan, subskrip bermula dari 0, serupa dengan tatasusunan
.carousel("prev"): Kembali ke bingkai sebelumnya; .carousel("next")：Bingkai seterusnya

Di atas adalah pengenalan terperinci kepada karusel imej javascript. Saya harap artikel ini dapat membantu semua orang dalam mempelajari pengaturcaraan javascript.