时尚简洁的js轮播图特效插件
发布时间:2019/06/30 来源:互联网 浏览: 关键词:轮播图
简要教程
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。 使用方法在页面中引入下面的文件。
<link href="style.css"rel="stylesheet"> <script src='https://unpkg.com/flipping@1.1.0/dist/flipping.web.js'></script>
HTML结构<divid="app"data-state="0"> <divclass="ui-big-images"> <divclass="ui-big-image"data-key="0"> <imgsrc="https://picsum.photos/1200/1200/?image=1005"/> </div> <divclass="ui-big-image"data-key="1"> <imgsrc="https://picsum.photos/1200/1200/?image=804"/> </div> <divclass="ui-big-image"data-key="2"> <imgsrc="https://picsum.photos/1200/1200/?image=838"/> </div> <divclass="ui-big-image"data-key="3"> <imgsrc="https://picsum.photos/1200/1200/?image=832"/> </div> <divclass="ui-big-image"data-key="4"> <imgsrc="https://picsum.photos/1200/1200/?image=836"/> </div> <divclass="ui-big-image"data-key="5"> <imgsrc="https://picsum.photos/1200/1200/?image=823"/> </div> </div> <divclass="ui-thumbnails"> <divclass="ui-thumbnail"tabindex="-1"data-key="0"> <imgsrc="https://picsum.photos/1200/1200/?image=1005"/> <divclass="ui-cuticle"data-flip-key="cuticle"></div> </div> <divclass="ui-thumbnail"tabindex="-1"data-key="1"> <imgsrc="https://picsum.photos/1200/1200/?image=804"/> <divclass="ui-cuticle"data-flip-key="cuticle"></div> </div> <divclass="ui-thumbnail"tabindex="-1"data-key="2"> <imgsrc="https://picsum.photos/1200/1200/?image=838"/> <divclass="ui-cuticle"data-flip-key="cuticle"></div> </div> <divclass="ui-thumbnail"tabindex="-1"data-key="3"> <imgsrc="https://picsum.photos/1200/1200/?image=832"/> <divclass="ui-cuticle"data-flip-key="cuticle"></div> </div> <divclass="ui-thumbnail"tabindex="-1"data-key="4"> <imgsrc="https://picsum.photos/1200/1200/?image=836"/> <divclass="ui-cuticle"data-flip-key="cuticle"></div> </div> <divclass="ui-thumbnail"tabindex="-1"data-key="5"> <imgsrc="https://picsum.photos/1200/1200/?image=823"/> <divclass="ui-cuticle"data-flip-key="cuticle"></div> </div> </div> <divclass="ui-content"> <navclass="ui-nav"> <buttonid="prev"tabindex="-1"title="Previous"><</button> <buttonid="next"tabindex="-1"title="Next">></button> </nav> <divclass="ui-articles"> <articleclass="ui-article"data-key="0"> <h2class="ui-heading">Stephen Shaw</h2> <pclass="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p> </article> <articleclass="ui-article"data-key="1"> <h2class="ui-heading">David Khourshid</h2> <pclass="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p> </article> <articleclass="ui-article"data-key="2"> <h2class="ui-heading">Coding Compadre</h2> <pclass="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p> </article> <articleclass="ui-article"data-key="3"> <h2class="ui-heading">Boolean Buddy</h2> <pclass="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> </article> <articleclass="ui-article"data-key="4"> <h2class="ui-heading">Animation Amigo</h2> <pclass="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p> </article> <articleclass="ui-article"data-key="5"> <h2class="ui-heading">Keyframe Companion</h2> <pclass="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p> </article> </div> </div> </div> 初始化插件通过下面的js代码来制作轮播图特效。
console.clear(); const elPrevButton = document.querySelector('#prev'); const elNextButton = document.querySelector('#next'); const flipping =newFlipping(); const elImages = Array.from(document.querySelectorAll('.ui-big-image')); const elThumbnails = Array.from(document.querySelectorAll('.ui-thumbnail')); let state = { photo: 0 }; functionsend(event) { // read cuticle positions flipping.read(); const elActives = document.querySelectorAll('[data-active]'); Array.from(elActives) .forEach(el => el.removeAttribute('data-active')); switch(event) { case'PREV': state.photo--; // Math.max(state.photo - 1, 0); break; case'NEXT': state.photo++; // Math.min(state.photo + 1, elImages.length - 1); break; default: state.photo = +event; break; } varlen = elImages.length; // Loop Around //state.photo = ( ( state.photo % len) + len ) % len; state.photo = Math.max(0, Math.min( state.photo, len - 1) ); Array.from(document.querySelectorAll(`[data-key="${state.photo}"]`)) .forEach( el => { el.setAttribute('data-active',true); }); // execute the FLIP animation flipping.flip(); } elThumbnails.forEach( thumb => { thumb.addEventListener('click', () => { send(thumb.dataset.key); }); }); elPrevButton.addEventListener('click', () => { send('PREV'); }); elNextButton.addEventListener('click', () => { send('NEXT'); }); send(0);
该轮播图插件的codepen网址为:https://codepen.io/team/keyframers/pen/pZyWPd/
|