Carta karusel responsif pembangunan responsif H5

Karusel

Karusel responsif

Imej karusel adalah hebat ciri paparan halaman. Tetapi jika anda ingin menggunakan Js dan jq, lebih menyusahkan Kami telah belajar menggunakan pemalam bootstrap untuk membuat imej karusel dengan mudah menggunakan gaya terbina dalam.

Mula-mula kami mencipta kandungan dan penunjuk carta rakaman

<ol>
<li></li>
<li></li>
<li></li>
</ol>

rrree

Bahagian kandungan

<div>
        <div >
            <img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一张">
        </div>
        <div>
            <img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二张">
        </div>
        <div >
            <img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg"  alt="第三章">
        </div>
    </div>

Navigasi karusel

Seterusnya kami Tulis untuk tiga bahagian

<a  href="#"></a>
<a  href="#"></a>

Penggunaan

Melalui atribut data: Kedudukan karusel boleh dikawal dengan mudah menggunakan atribut data.

Slaid data atribut menerima kata kunci sebelum atau seterusnya, yang digunakan untuk menukar kedudukan slaid berbanding kedudukan semasa. Gunakan data-slide-to untuk menghantar indeks slaid mentah ke karusel, data-slide-to="2" akan mengalihkan peluncur ke indeks tertentu, mengira dari 0.

atribut data-ride="carousel" digunakan untuk menandakan karusel untuk memulakan animasi apabila halaman dimuatkan.

Ini melengkapkan carta karusel kami

<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active" style="background: #E2DACF">
            <img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一张">
        </div>
        <div class="item" style="background: #000000">
            <img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二张">
        </div>
        <div class="item" style="background: #FEDF85">
            <img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg"  alt="第三章">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel"
       data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel"
       data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
</div>

Kesukaran bab ini

Cara menggunakan bootstrap untuk melengkapkan carta karusel
Pengenalan dan konfigurasi JS

Meneruskan pembelajaran

fail baharu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 <title>PHP中文网</title>
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
 #myCarousel{
 margin: 50px 0 0 0;
 }
 .logo{
 padding: 0;
 }
 .daohang{
 margin-top: 0;
 }
 .carousel-inner img{
 margin: 0 auto;
 }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <a href="#" class="navbar-brand logo" ><img src="https://img.php.cn/upload/course/000/000/004
     /5819475ea4910787.png" height="50" alt="PHP中文网"></a>
 <button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX