Rekod penuh peta fokus jQuery menukar proses pengeluaran pemalam mudah

Halaman utama selalunya memerlukan kesan penukaran imej fokus, dan projek baru-baru ini juga memerlukannya, jadi saya mencari dalam talian dan menemui pemalam separuh siap, saya mengubah suainya sendiri.

Terdapat dua folder jquery.jslide.js dan jquery.jslides.js di bawah folder js Yang pertama telah saya tulis semula, dan yang kedua ialah fail pengarang asal. Gambar di bawah ialah rendering:

1. Kesan statik

<div class="slide_wrap">
 <ul id="slides2" class="slide">
  <li style="background:url('images/01.jpg') no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick1</a></li>
  <li style="background:url('images/02.jpg') no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick2</a></li>
  <li style="background:url('images/03.jpg') no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick3</a></li>
  <li style="background:url('images/04.jpg') no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick4</a></li>
 </ul>
</div>

Salin selepas log masuk

1. Penukaran imej fokus skrin lebar kini lebih popular Pada masa lalu, label menggunakan img untuk memaparkan imej kini perlu digantikan dengan latar belakang sebagai imej latar belakang, supaya bar skrol mendatar tidak akan muncul.

2. Tetapkan slaid_wrap pada permukaan paling luar untuk mengehadkan kedudukan mutlak imej di dalam

Saya pada asalnya menambahkan kelas dalam 3.ul apabila pemalam dimulakan Sekarang saya telah menambahkannya terlebih dahulu Kesan paparan adalah lebih baik daripada menambahkannya kemudian >

.slide_wrap {width:100%;height:400px;position:relative}
.slide_wrap .slide { display:block; width:100%; height:400px; list-style:none; padding:0; margin:0; position:relative;}
.slide_wrap .slide li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute;}
.slide_wrap .slide li a { display:block; width:100%; height:100%; text-indent:-9999px;}
.slide_wrap .pagination { display:block; list-style:none; position:absolute; left:50%; top:340px; z-index:9900;padding:5px 15px 5px 0; margin:0}
.slide_wrap .pagination li { display:block; list-style:none; width:10px; height:10px; float:left;margin-left:15px; border-radius:5px; background:#FFF }
.slide_wrap .pagination li a { display:block; width:100%; height:100%; padding:0; margin:0; text-indent:-9999px;outline:0}
.slide_wrap .pagination li.current { background:#0092CE}

Salin selepas log masuk

1. Atribut ketinggian dalam slaid_wrap dan slaid boleh diubah suai mengikut situasi sebenar

2. Penomboran ialah gaya butang dalam gambar Ia digunakan untuk mengawal gambar mana yang dipaparkan. Ia juga merupakan kedudukan mutlak kiri dan atas yang boleh diubah suai mengikut situasi sebenar

3. Setiap warna dalam gaya juga boleh disesuaikan mengikut kesan yang diingini

4. Gaya di atas agak bertele-tele Ia boleh dipermudahkan dengan sewajarnya apabila dibenamkan dalam projek anda sendiri

2. Kaedah panggilan

<script type="text/javascript">
 $('#slides2').jslide();
</script>

Salin selepas log masuk

1. Tetapkan ul sebagai pemalam imej fokus

2. Setiap operasi berikut akan berkisar pada ul

3. Format biasa pemalam jQuery

;(function (factory) {
 'use strict';
 // Register as an AMD module, compatible with script loaders like RequireJS.
 if (typeof define === 'function' && define.amd) {
  define(['jquery'], factory);
 }
 else {
  factory(jQuery);
 }
}(function ($, undefined) {
 'use strict';

　　 //中间插件代码

 $.fn.jslide = function (method) {
  return _init.apply(this, arguments);
 };
}));

Salin selepas log masuk

1. Titik koma pertama adalah untuk mengelakkan ralat sintaks daripada digabungkan dengan kod lain pada satu baris apabila dimampatkan bersama. Contohnya, var i=0(function(kilang){......}(..);

2. 'gunakan ketat' menghidupkan mod ketat, supaya jurubahasa Javascript boleh menggunakan sintaks "ketat" untuk menghuraikan kod untuk membantu pembangun mencari ralat

3. Jika modul requirejs digunakan untuk memuatkan rangka kerja, define(['jquery'], factory) adalah untuk menjadikan plug-in menyokong spesifikasi AMD

4. Fungsi ($, undefined) Undefined di sini adalah untuk mengelakkan penggunaan undefined yang ditulis semula apabila memperkenalkan fail js lain

5. _init digunakan untuk kesan permulaan

4. Permulaan pemalam

　　var defaults = {
  speed : 3000,
  pageCss : 'pagination',
  auto: true //自动切换
 };
 
 var nowImage = 0;//现在是哪张图片
 var pause = false;//暂停
 var autoMethod;
　　/**
  * @method private
  * @name _init
  * @description Initializes plugin
  * @param opts [object] "Initialization options"
  */
 function _init(opts) {
  opts = $.extend({}, defaults, opts || {});
  // Apply to each element
  var $items = $(this);
  for (var i = 0, count = $items.length; i < count; i++) {
   _build($items.eq(i), opts);
  }
  return $items;
 }

Salin selepas log masuk

1. Lalai ialah parameter tersuai yang terdedah Di sini saya telah menulis tiga kelajuan pensuisan automatik, gaya butang pemilihan dan sama ada untuk mengautomasikan

2. Tiga parameter global, sekarangImej ialah nombor siri imej yang sedang dipaparkan, jeda mengawal sama ada imej dihidupkan atau dijeda, dan autoKaedah ialah nombor fungsi pemasaan

3. Parameter tersuai digabungkan dalam _init dan _build dipanggil untuk mencipta operasi

5. Pelbagai operasi mencipta pemalam

  /**
  * @method private
  * @name _getSlides
  * @description 获取幻灯片对象
  * @param $node [jQuery object] "目标对象"
  */
 function _getSlides($node) {
  return $node.children('li');
 }
  /**
  * @method private
  * @name _build
  * @description Builds each instance
  * @param $node [jQuery object] "目标对象"
  * @param opts [object] "插件参数"
  */
 function _build($node, opts) {
  var $slides = _getSlides($node);
  $slides.eq(0).siblings('li').css({'display':'none'});
  var numpic = $slides.size() - 1;
  
  $node.delegate('li', 'mouseenter', function() {
   pause = true;//暂停轮播
   clearInterval(autoMethod);
  }).delegate('li', 'mouseleave', function() {
   pause = false;
   autoMethod = setInterval(function() {
    _auto($slides, $pages, opts);
   }, opts.speed);
  });
  //console.log(autoMethod)
  var $pages = _pagination($node, opts, numpic);
  
  if(opts.auto) {
   autoMethod = setInterval(function() {
    _auto($slides, $pages, opts);
   }, opts.speed);
  }
 }

Salin selepas log masuk

1. _getSlides digunakan untuk mendapatkan sub-tag li objek ul, iaitu pemalam peta fokus

2. Tetapkan tag lain kecuali tag li pertama untuk disembunyikan

3. Dapatkan bilangan gambar yang ditukar Memandangkan gelung berikutnya bermula dari subskrip 0 dan melakukan operasi <=, sebenarnya, tidak mengapa untuk tidak menolak di sini 🎜>

4 Tetapkan acara mouseenter dan mouseleave untuk tag li, iaitu untuk membatalkan gelung dan meneruskan gelung masing-masing

5. Butang pemilihan permulaan

6 Jika parameter auto adalah benar, pensuisan automatik akan diaktifkan

6. Butang pemilihan permulaan

1 Tambahkan teg butang ul secara dinamik, tetapkan kelas tersuai dan tambah subteg li

　　 /**
  * @method private
  * @name _pagination
  * @description 初始化选择按钮
  * @param $node [jQuery object] "目标对象"
  * @param opts [Object] "参数"
  * @param size [int] "图片数量"
  */
  function _pagination($node, opts, size) {
  var $ul = $('<ul>', {'class': opts.pageCss});
  for(var i = 0; i <= size; i++){
   $ul.append('<li>' + '<a href="javascript:void(0)">' + (i+1) + '</a>' + '</li>');
  }
  
  $ul.children(':first').addClass('current');//给第一个按钮选中样式
  var $pages = $ul.children('li');
  $ul.delegate('li', 'click', function() {//绑定click事件
   var changenow = $(this).index();
   _changePage($pages, $node, changenow);
  }).delegate('li', 'mouseenter', function() {
   pause = true;//暂停轮播
  }).delegate('li', 'mouseleave', function() {
   pause = false;
  });
  $node.after($ul);
  return $pages;
  }

Salin selepas log masuk

2. Tambahkan gaya pilihan pada butang pertama

3 Tambah peristiwa klik, tetikus dan biarkan tetikus pada tag li dan ikat peristiwa klik pada operasi penukaran

4. Letakkan butang paging di belakang objek pemalam ul

5. Kembali ke objek li dalam butang paging, yang akan berguna nanti

7. Tukar gambar

1. Naikkan indeks-z gambar semasa, tambahkan indeks-z gambar seterusnya, dan paparkan gambar seterusnya. Jika tidak, ia akan menjadi sangat mengelirukan 🎜>

 　　/**
  * @method private
  * @name _change
  * @description 幻灯片显示与影藏
  * @param $slides [jQuery object] "图片对象"
  * @param $pages [jQuery object] "按钮对象"
  * @param next [int] "要显示的下一个序号"
  */
  function _fadeinout($slides, $pages, next){
  $slides.eq(nowImage).css('z-index','2');
  $slides.eq(next).css({'z-index':'1'}).show();
  $pages.eq(next).addClass('current').siblings().removeClass('current');
  $slides.eq(nowImage).fadeOut(400, function(){
   $slides.eq(next).fadeIn(500);
  });
 }

Salin selepas log masuk

2. Tambahkan gaya pilihan pada butang pilihan seterusnya

3 Gunakan fadeOut dan fadeIn jQuery untuk mencipta kesan kecerunan tersembunyi dan dipaparkan

8. Kitaran automatik

1. Tentukan sama ada untuk menjeda atau meneruskan karusel

　　 /**
  * @method private
  * @name _auto
  * @description 自动轮播
  * @param $slides [jQuery object] "图片对象"
  * @param $pages [jQuery object] "按钮对象"
  * @param opts [Object] "参数"
  */
  function _auto($slides, $pages, opts){
  var next = nowImage + 1;
  var size = $slides.size() - 1;
  if(!pause) {
   if(nowImage >= size){
    next = 0;
   }
   
   _fadeinout($slides, $pages, next);
   
   if(nowImage < size){
    nowImage += 1;
   }else {
    nowImage = 0;
   }
  }else {
   clearInterval(autoMethod);//暂停的时候就取消自动切换
  }
  }

Salin selepas log masuk

2 Jika ia tidak dijeda, tetapkan nombor siri halaman semasa dan butang seterusnya mengikut syarat

Masih terdapat banyak masalah dengan pemalam, seperti ketidakupayaan untuk mengikat dua objek berbeza pada satu halaman, dan terdapat ruang yang besar untuk pengubahsuaian.

Melalui pengubahsuaian ini, saya mempunyai pemalam pensuisan peta fokus yang boleh dikawal Walaupun masih terdapat banyak masalah, ia boleh diselesaikan langkah demi langkah. Ia akan menjadi lebih mudah untuk membenamkannya ke dalam projek anda sendiri pada masa hadapan.

demo:

http://demo.jb51.net/js/2014/jsilde/

Muat turun: http://www.jb51.net/jiaoben/210405.html