Analisis komprehensif kemahiran kesan karusel imej Bootstrap

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>

Salin selepas log masuk

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="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
 </div>
 </div>
</div>

Salin selepas log masuk

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="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3>图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

Salin selepas log masuk

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>

Salin selepas log masuk

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 style="height: 300px;width: 800px"></a>
 <div class="carousel-caption">
 <h3>图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img style="height: 300px;width: 800px"></a>
 <div class="carousel-caption">
 <h3>图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img style="height: 300px;width: 800px"></a>
 <div class="carousel-caption">
 <h3>图片标题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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 <div class="carousel-caption">
 <h3>图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
 <div class="carousel-caption">
 <h3>图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
 <div class="carousel-caption">
 <h3>图片标题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>

Salin selepas log masuk

JS:

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

Salin selepas log masuk

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

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

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

Salin selepas log masuk

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.

Analisis komprehensif kemahiran kesan karusel imej Bootstrap_javascript