Rumah > Artikel > hujung hadapan web > jQuery mengklik secara manual untuk mencapai kesan karusel imej_jquery

jQuery mengklik secara manual untuk mencapai kesan karusel imej_jquery

WBOYasal: 2016-05-16 15:26:371281semak imbas

Dalam artikel ini, saya menulis imej karusel untuk melatih kemahiran saya, mula-mula saya menulis imej karusel yang mengklik secara manual pada karusel Kemudian saya akan menulis imej karusel automatik dan imej atas tetikus untuk berhenti bergerak imej karusel.
Mari lihat kesan karusel klik manual terakhir:

1. Penjelasan prinsip

(1) Yang pertama ialah struktur imej karusel Saya menggunakan div paling luar yang besar untuk membalut dua div kecil mengandungi empat gambar, dan div kecil yang lain mengandungi empat butang nombor

(2) Tetapkan lebar div besar paling luar kepada lebar imej Apa-apa sahaja yang melebihi lebar div besar perlu disembunyikan, bagaimanapun, tetapkan lebar div kecil yang memegang imej kepada 2000px yang lebih besar akan memudahkan terapung kiri empat imej

(3) Apabila butang nombor diklik, dapatkan nilai indeks butang, supaya anda boleh tahu berapa lebar setiap gambar dialihkan ke kiri

Seperti yang dapat dilihat dari gambar di atas, keempat-empat gambar diletakkan dalam susun atur melintang Apabila butang nombor diklik, gambar akan dipaparkan dalam bingkai induk mengikut nilai indeks butang nombor Kerana Imej di luar bingkai induk akan disembunyikan~~~~~Jika anda masih tidak faham prinsip, saya hanya boleh muntah darah~~~~

2. Mari lihat program utama

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>轮播图①（手动点击轮播）</title>
  <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
  <div class="slideShow">
   <!--图片布局开始-->
   <ul>
    <li><a href="#"><img src="img/picture01.jpg" /></a></li>
    <li><a href="#"><img src="img/picture02.jpg" /></a></li>
    <li><a href="#"><img src="img/picture03.jpg" /></a></li>
    <li><a href="#"><img src="img/picture04.jpg" /></a></li>
   </ul>
   <!--图片布局结束-->
   
   <!--按钮布局开始-->
   <div class="showNav">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
   </div>
   <!--按钮布局结束-->
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/layout.js"></script>
 </body>
</html>

Saya telah menerangkan susun atur di atas dalam prinsip Jika anda berminat, anda boleh membaca sendiri prinsipnya~~~~

3. Gaya CSS

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px;  /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative;  /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
 float: left;  /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{  /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

Saya telah mencatat perkara penting dalam gaya di atas Saya percaya ia akan mudah difahami jika anda mempunyai pengetahuan asas Pada mulanya, saya terlupa untuk menulis kedudukan: dalam gaya .slideShow ul imej program jquery seterusnya tidak dapat bergerak Saya mengambil masa yang lama untuk mencari ralat ini Saya harap semua orang dapat memberi perhatian kepada tempat ini~~~~~~

4. program jQuery

$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮被点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   ul.animate({
    "left":-oneWidth*index, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
   })
  })
})

Adakah anda fikir ia sangat mudah? Anda boleh mencapai kesan karusel klik manual dalam beberapa perkataan sahaja. Perkara yang perlu anda perhatikan dalam program di atas ialah atribut kiri dialihkan ke kiri ialah nilai negatif~~~~~~~

Saya akan berkongsi dengan anda kesan karusel automatik dalam artikel seterusnya, saya harap anda tidak terlepas.

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：jquery melaksanakan karusel automatik berjadual kesan khas_jqueryArtikel seterusnya：jquery melaksanakan karusel automatik berjadual kesan khas_jquery

Artikel berkaitan

Lihat lagi