Rumah >hujung hadapan web >tutorial js >Melaksanakan kesan karusel karusel automatik berdasarkan jQuery_jquery

Melaksanakan kesan karusel karusel automatik berdasarkan jQuery_jquery

WBOYasal: 2016-05-16 15:34:121681semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan kesan karusel karusel automatik dengan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah kod kesan karusel karusel automatik berdasarkan jQuery Proses pelaksanaannya sangat mudah.
Paparan operasi: -------------------Lihat kesan Muat turun kod sumber------------------

Tutorial ringkas
jquery.caroursel.js ialah pemalam karusel jQuery yang sangat praktikal yang boleh berputar secara automatik. Karusel ini menyusun gambar dan menolak gambar ke hadapan secara bergilir-gilir untuk paparan, membentuk kesan karusel.
Cara menggunakan
Pemalam karusel jQuery perlu mengimport fail jQuery, jquery.carousel.js.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.carousel.js"></script>

Struktur HTML

Pemalam karusel jQuery menggunakan dc6dce4a544fdca2df29d5ac0ea9906b sebagai elemen pembalut di dalamnya ialah senarai tidak tersusun untuk meletakkan imej, dan dua dc6dce4a544fdca2df29d5ac0ea9906b

<div class="caroursel rotator-demo">
 <ul class="rotator-list">
 <li class="rotator-item"><img src="image/1.jpg"></li>
 <li class="rotator-item"><img src="image/2.jpg"></li>
 <li class="rotator-item"><img src="image/3.jpg"></li>
 </ul>
 <div class="rotator-btn rotator-prev-btn"></div>
 <div class="rotator-btn rotator-next-btn"></div>
</div>

Bilangan gambar mestilah nombor ganjil, jika tidak akan terdapat beberapa keabnormalan pada paparan Ini adalah pepijat kecil pemalam ini.
Gaya CSS

Anda perlu menambah beberapa gaya CSS yang diperlukan di bawah untuk kesan karusel ini.

.rotator-main {
 position: relative;
 width: 900px;
 height: 400px
}
 
.rotator-main a, .rotator-main img { display: block; }
 
.rotator-main .rotator-list {
 width: 900px;
 height: 400px
}
 
.rotator-main .rotator-list .rotator-item {
 position: absolute;
 left: 0px;
 top: 0px
}
 
.rotator-main .rotator-btn {
 position: absolute;
 height: 100%;
 width: 100px;
 top: 0px;
 z-index: 10;
 opacity: 0;
}
 
.rotator-main .rotator-prev-btn {
 left: 0px;
 background: url("../image/btn_l.png") no-repeat center center;
 background-color: red
}
 
.rotator-main .rotator-next-btn {
 right: 0px;
 background: url("../image/btn_r.png") no-repeat center center;
 background-color: red
}

Mulakan pemalam

Selepas elemen DOM halaman dimuatkan, anda boleh memulakan pemalam karusel melalui kaedah berikut.
Caroursel.init($('.caroursel')) Jika anda perlu menyesuaikan beberapa parameter, anda boleh menetapkan atribut penetapan data dalam elemen dc6dce4a544fdca2df29d5ac0ea9906b

<div class="caroursel rotator-main"
  data-setting = '{
  "width":1000,   //旋转木马的宽度
  "height":270,   //旋转木马的高度
  "posterWidth":640, //当前显示的图片的宽度
  "posterHeight":270, //当前显示的图片的高度
  "scale":0.8,   //缩放值
  "algin":"middle",  //对齐方式
  "speed":"1000",  //动画速度
  "isAutoplay":"true", //自动播放
  "dealy":"1000"  //延迟时间
}'>

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Pelaksanaan jQuery kod kesan karusel karusel automatik yang dikongsi dengan anda adalah seperti berikut

<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>jQuery自动轮播旋转木马插件</title>
 <link rel="stylesheet" type="text/css" href="css/normalize.css" />
 <link rel="stylesheet" type="text/css" href="css/default.css">
 <link type="text/css" rel="stylesheet" href="css/carousel.css">
 <style type="text/css">
 .caroursel{margin:150px auto;}
 </style>
 <!--[if IE]>
 <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
 <![endif]-->
</head>
<body>
 <article class="htmleaf-container">
 <header class="htmleaf-header">
 <h1>jQuery自动轮播旋转木马插件</h1>
 
 </header>
 <div class = "caroursel poster-main" data-setting = '{
  "width":1000,
  "height":270,
  "posterWidth":640,
  "posterHeight":270,
  "scale":0.8,
  "dealy":"2000",
  "algin":"middle"
 }'>
  <ul class = "poster-list">
  <li class = "poster-item"><img src="image/1.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/2.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/3.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/4.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/5.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/6.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/1.jpg" width = "100%" height="100%"></li>
  </ul>
  <div class = "poster-btn poster-prev-btn"></div>
  <div class = "poster-btn poster-next-btn"></div>
 </div>
 
 </article>
 
 <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
 <script src="js/jquery.carousel.js"></script>
 <script>
 Caroursel.init($('.caroursel'))
 </script>
</body>
</html>

Saya berkongsi dengan anda kod kesan karusel automatik jQuery saya harap anda boleh menyukainya dan menerapkannya dalam amalan.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ringkasan contoh kaedah memuatkan skrip secara dinamik dalam kemahiran js_javascriptArtikel seterusnya：Ringkasan contoh kaedah memuatkan skrip secara dinamik dalam kemahiran js_javascript

Artikel berkaitan

Lihat lagi