Native js achieves image cascade carousel switching and js image cascade Switching

Native js achieves image cascade carousel switching and js image cascade Switching

This article introduces how to switch the scroll effect of the js focus image cascade carousel for your reference. The details are as follows:

:

 

Function Description:

• 　　Customize the image size;
• Automatically scroll the image at intervals;
• Each time an animation is executed, the position of the image is changed, and the width and height and other attributes also need to change;
• Move the mouse to display the details of the current image;
• Click the button to scroll forward and backward;
  

Code details:
Html code:

<! DOCTYPE html> <! -- Saved from url = (0062) http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiuxuan.html --> 　
Js Code:

Define (function (require, exports, module) {'use strict '; var $ = require ('lib/jquery/1.11.x/index. js '); var incluusel = {_ initData: false, // determine whether the animation has been executed. init: function (options) {var t = this; t. _ wapper = options. wapper; t. _ grids = t. _ wapper. find ('lil'); t. _ gridsWidth = options. imgWidth; t. _ gridsHeight = options. imgHeight; t. _ spacing = options. spacing; // center image t. _ middle = t. _ grids. length % 2 = 0? T. _ grids. length/2: parseInt (t. _ grids. length/2); // stores the parameter t for each image. _ arr = {left: [], top: [], zIndex: [], width: [], height: []} if (! T. _ initData) {var interval; interval = setInterval (function () {$ ('. previous '). click ();}, 10000);} t. _ largerImages (); t. _ reposition (); t. _ mouseEnter (t. _ grids) // move the mouse to display the host nickname}, // initialize positioning: _ largerImages: function () {var t = this; var front = t. _ middle; var avtive = t. _ middle; var last = t. _ grids. length; t. _ grids. each (function (I, img) {if (I = t. _ middle) {t._grids.eq( I ).css ({zIndex: 99, top: 0, Left: t. _ spacing. left * I, height: t. _ gridsHeight, width: t. _ gridsWidth});} else if (I <t. _ middle) {t._grids.eq( I ).css ({zIndex: I, top: t. _ spacing. top * front, left: t. _ spacing. left * I, height: t. _ gridsHeight-t. _ spacing. height * front, width: t. _ gridsWidth-t. _ spacing. width * front}); front --;} else {last --; t._grids.eq(last).css ({zIndex: I, top: t. _ spacing. top * avtive, left: t. _ Spacing. left * last + t. _ spacing. width * avtive, height: t. _ gridsHeight-t. _ spacing. height * avtive, width: t. _ gridsWidth-t. _ spacing. width * avtive}); avtive -- ;};}) ;}, // flip animation _ reposition: function () {var t = this; // upload the attribute values to the array t. _ grids. each (function (I, img) {t. _ arr. left. push (t. _ grids. eq (I ). position (). left); t. _ arr. top. push (t. _ grids. eq (I ). position (). top); t. _ arr. width. push (t. _ grids. eq (I). Width (); t. _ arr. height. push (t. _ grids. eq (I ). height (); t._arr.zIndex.push(t._grids.eq( I ).css ('z-Index') ;}); // flip the page forward $ ('. previous '). bind ('click', function () {if (! T. _ initData & t. _ arr. left. length! = 0) {t. _ initData = true; // obtain the selector var grids = t. _ wapper. find ('lil'); for (var I = 1; I <grids. length; I ++) {grids. eq (I ). animate ({zIndex: t. _ arr. zIndex [I-1], left: t. _ arr. left [I-1], top: t. _ arr. top [I-1], width: t. _ arr. width [I-1], height: t. _ arr. height [I-1], }, 200, function () {t. _ initData = false; grids. find ('I '). addClass ('cover'); grids. eq (t. _ middle + 1 ). find ('I '). removeClass ('cove R') ;};}; grids. eq (0 ). animate ({left: t. _ arr. left [grids. length-1], top: t. _ arr. top [grids. length-1], width: t. _ arr. width [grids. length-1], height: t. _ arr. height [grids. length-1], zIndex: t. _ arr. zIndex [grids. length-1]}, 200, function () {$ (this ). appendTo (t. _ wapper) ;};}}); // flip back $ ('. next '). bind ('click', function () {if (! T. _ initData & t. _ arr. left. length! = 0) {t. _ initData = true; // obtain the selector var grids = t. _ wapper. find ('lil'); for (var I = 0; I <grids. length-1; I ++) {grids. eq (I ). animate ({left: t. _ arr. left [I + 1], top: t. _ arr. top [I + 1], width: t. _ arr. width [I + 1], height: t. _ arr. height [I + 1], zIndex: t. _ arr. zIndex [I + 1]}, 200, function () {t. _ initData = false ;}) ;}; grids. eq (grids. length-1 ). animate ({left: t. _ arr. left [0], top: t. _ arr. top [0], width: t. _ arr. width [0], height: t. _ arr. height [0], zIndex: t. _ arr. zIndex [0] }, 200, function () {$ (this ). prependTo (t. _ wapper); grids. find ('I '). addClass ('cover'); grids. eq (t. _ middle-1 ). find ('I '). removeClass ('cover') ;}}}) ;}, // move the mouse to the image effect _ mouseEnter: function (grids) {grids. each (function (I) {$ (this ). mouseenter (function () {$ (this ). find ('. tab_name '). animate ({bottom: 0, opacity: 'show'}, 200) ;}); $ (this ). mouseleave (function () {$ (this ). find ('. tab_name '). animate ({bottom:-50, opacity: 'hide '}, 200) ;}) ;}},}; return invalid usel ;});
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

 

 
  
Js image carousel (5 images)
 
  
Code for Implementing Image carousel using native javascript
 
  
Code for the simplest js image Switching Effect
 
  
JS Code with left and right arrows for image carousel
 
  
Simple js image rotation code (js image rotation)
 
  
Js Image Automatic carousel code sharing (js image carousel)
 
  
A simple image switching effect implemented using html + css + js
 
  
Example of slideshow image effects implemented by js supporting mobile phone slide Switching
 
  
Javascript allows you to switch between the left and right sides of the keyboard to share the code of the three-dimensional image carousel effect.
 
  
Manual Switch of js image carousel