Melaksanakan kesan karusel karusel automatik berdasarkan jQuery

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>

Salin selepas log masuk

Struktur HTML

Pemalam karusel jQuery menggunakan

sebagai elemen pembalut di dalamnya ialah senarai tidak tersusun untuk meletakkan imej, dan dua

<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>

Salin selepas log masuk

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
}

Salin selepas log masuk

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

<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"  //延迟时间
}'>

Salin selepas log masuk

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>

Salin selepas log masuk

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

Label berkaitan：

jquery图片轮播特效 jquery的轮播特效 jquery轮播特效 jQuery轮播特效代码 jQuery实现轮播效

sumber：php.cn

Artikel sebelumnya：Ringkasan contoh kaedah memuatkan skrip secara dinamik dalam kemahiran js_javascript Artikel seterusnya：Kesan garis masa Jquery (tiga jenis berbeza)_jquery

Kenyataan Laman Web ini

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 terbaru oleh pengarang