cari

Rumah >hujung hadapan web >tutorial js >jquery melaksanakan karusel automatik berjadual kesan khas_jquery

jquery melaksanakan karusel automatik berjadual kesan khas_jquery

WBOY
WBOYasal
2016-05-16 15:26:361985semak imbas

Imej karusel ini ditulis berdasarkan artikel sebelum ini klik manual jQuery untuk mencapai kesan karusel imej , iaitu apa yang ditunjukkan kali ini ialah Program manual untuk kesan karusel klik dan kesan karusel automatik berjadual saya cadangkan rakan-rakan yang ingin belajar secara berterusan untuk membaca artikel saya sebelum ini dan kemudian membaca artikel ini~~~~

Mari kita lihat pada kesan karusel automatik berjadual terakhir dan kesan karusel klik manual:

Sebab animasi paparan di atas lebih pantas adalah kerana perisian tangkapan skrin saya adalah versi hijau, yang percuma~~~ Anda tahu, ia tersekat Kesan sebenar lebih perlahan daripada kelajuan ini, dan ia masih seragam, dan boleh digunakan secara komersial ~~~Jadi animasi paparan di atas hanya boleh digunakan sebagai rujukan untuk kesan yang telah siap.
1. 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>

Nah, program utama di atas tidak berbeza dengan artikel sebelum ini, dan tiada pengubahsuaian dilakukan~~~~~ Jika anda berminat, anda boleh lihat artikel pertama Fokus esei saya kali ini pada program Jquery
2. 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;
}

3. Program jQuery
Mula-mula, mari kita bincangkan tentang prinsip putaran automatik berjadual:
1. Pertama, anda mesti memulakan pemasa Andaikan bahawa masa pemasa ditetapkan kepada 2000ms, iaitu pemasa 2S menjalankan operasi
2. Operasi yang dilakukan oleh pemasa setiap 2S adalah untuk mensimulasikan mengklik butang nombor mengikut turutan, iaitu, mencetuskan acara klik untuk mengalihkan gambar ke kiri
Mari kita lihat pada jQuerykod 1 untuk mencapai kesan umum: 

 var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
  },2000); //2000为轮播的时间
Program di atas boleh mencapai kesan karusel gambar setiap 2S, tetapi karusel akan berhenti apabila ia mencapai gambar terakhir, kerana ia tidak menentukan sama ada iNow telah mencapai gambar terakhir, jadi kod

berikut ialah Dua : 

var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
Jadi program kod lengkap program jQuery adalah seperti berikut: 


$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})
Komen di atas sangat terperinci, terutamanya untuk kemudahan rakan-rakan yang ingin belajar, tetapi, sebenarnya, saya tidak mengulas secara terperinci ketika menulis program anda lihat ini, Program jQuery telah selesai, yang merupakan satu kesilapan besar, kerana kesan karusel automatik adalah betul, tetapi ralat berlaku apabila anda mengklik secara manual Saya membuat animasi Gif khas untuk menunjukkan kesan ralat:


Apabila anda melihat kesan di atas, anda akan tiba-tiba menyedari bahawa apabila gambar diputar secara automatik, walaupun anda mengklik butang, ia hanya akan menggemakan anda dan melompat ke butang yang anda klik, tetapi ia masih akan berputar selepas hanya menekan itu untuk seketika. Pesanan, tanpa mengira pesanan karusel yang perlu anda lakukan selepas mengklik butang,

Adapun alasannya

Ini kerana nilai indeks apabila mengklik secara manual tidak diberikan kepada indeks imej pemasa iNow, jadi iNow tidak boleh menyimpan nilai indeks butang yang anda klik, iaitu, ia tidak tahu butang yang anda klik Sekarang anda tahu sebabnya, maka berikut Ia perlu diubah suai.

Versi akhir program jQuery selepas pengubahsuaian ialah: 


$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   iNow=index;
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})
Di atas ialah keseluruhan kandungan artikel ini Lain kali, saya akan berkongsi dengan anda kod yang menghentikan imej daripada berputar apabila tetikus melayang di atas imej karusel, dan terus berputar selepas tetikus dialih keluar jangan pergi.

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：AngularJS melaksanakan pengesahan borang manual dan pengesahan borang automatik_AngularJSArtikel seterusnya：AngularJS melaksanakan pengesahan borang manual dan pengesahan borang automatik_AngularJS

Artikel berkaitan

Lihat lagi