HTML5源码库 响应式的图文+视频幻灯片切换特效源码_凤凰彩票

效果图=今天给大家带来的是响应式的图文+视频幻灯片切换特效源码！大家可以闻一知十 通过这个代码可以开发出更多有意思炫酷的网站！若想获取文件版源码，请看评论区！空话不多说，上源码！JS源码：jQuery(document).ready(function($){var slidesWrapper = $('.cd-hero-slider');//check if a .cd-hero-slider exists in the DOM if ( slidesWrapper.length > 0 ) {var primaryNav = $('.cd-primary-nav'),sliderNav = $('.cd-slider-nav'),navigationMarker = $('.cd-marker'),slidesNumber = slidesWrapper.children('li').length,visibleSlidePosition = 0,autoPlayId,autoPlayDelay = 5000;//upload videos (if not on mobile devices)uploadVideo(slidesWrapper);//autoplay slidersetAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);//on mobile - open/close primary navigation clicking/tapping the menu iconprimaryNav.on('click', function(event){if($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');});//change visible slidesliderNav.on('click', 'li', function(event){event.preventDefault();var selectedItem = $(this);if(!selectedItem.hasClass('selected')) {// if it's not already selectedvar selectedPosition = selectedItem.index(),activePosition = slidesWrapper.find('li.selected').index();if( activePosition < selectedPosition) {nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);} else {prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);}//this is used for the autoplayvisibleSlidePosition = selectedPosition;updateSliderNavigation(sliderNav, selectedPosition);updateNavigationMarker(navigationMarker, selectedPosition+1);//reset autoplaysetAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);}});}function nextSlide(visibleSlide, container, pagination, n){visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){visibleSlide.removeClass('is-moving');});container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');checkVideo(visibleSlide, container, n);}function prevSlide(visibleSlide, container, pagination, n){visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){visibleSlide.removeClass('is-moving');});container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');checkVideo(visibleSlide, container, n);}function updateSliderNavigation(pagination, n) {var navigationDot = pagination.find('.selected');navigationDot.removeClass('selected');pagination.find('li').eq(n).addClass('selected');}function setAutoplay(wrapper, length, delay) {if(wrapper.hasClass('autoplay')) {clearInterval(autoPlayId);autoPlayId = window.setInterval(function(){autoplaySlider(length)}, delay);}}function autoplaySlider(length) {if( visibleSlidePosition < length - 1) {nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);visibleSlidePosition +=1;} else {prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);visibleSlidePosition = 0;}updateNavigationMarker(navigationMarker, visibleSlidePosition+1);updateSliderNavigation(sliderNav, visibleSlidePosition);}function uploadVideo(container) {container.find('.cd-bg-video-wrapper').each(function(){var videoWrapper = $(this);if( videoWrapper.is(':visible') ) {// if visible - we are not on a mobile device varvideoUrl = videoWrapper.data('video'),video = $('<video loop><source src="'+videoUrl+'.mp4" type="video/mp4" /><source src="'+videoUrl+'.webm" type="video/webm" /></video>');video.appendTo(videoWrapper);// play video if first slideif(videoWrapper.parent('.cd-bg-video.selected').length > 0) video.get(0).play();}});}function checkVideo(hiddenSlide, container, n) {//check if a video outside the viewport is playing - if yes, pause itvar hiddenVideo = hiddenSlide.find('video');if( hiddenVideo.length > 0 ) hiddenVideo.get(0).pause();//check if the select slide contains a video element - if yes, play the videovar visibleVideo = container.children('li').eq(n).find('video');if( visibleVideo.length > 0 ) visibleVideo.get(0).play();}function updateNavigationMarker(marker, n) {marker.removeClassPrefix('item').addClass('item-'+n);}$.fn.removeClassPrefix = function(prefix) {//remove all classes starting with 'prefix' this.each(function(i, el) { var classes = el.className.split(" ").filter(function(c) { return c.lastIndexOf(prefix, 0) !== 0; }); el.className = $.trim(classes.join(" ")); }); return this;};});index：<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/reset.css"> <!-- CSS reset --><link rel="stylesheet" href="css/style.css"> <!-- Resource style --><script src="js/modernizr.js"></script> <!-- Modernizr --> <style> body,html{ font-family: "microsoft yahei";} </style><title>一款响应式的图文+视频幻灯片切换特效</title><meta name="一款响应式的图文+视频幻灯片切换特效" /></head><body><section><ul class="cd-hero-slider autoplay"><li><div><h2>张钧甯</h2><p>2002年出道，2004年本科结业于国立台北大学执法系，2006年因主演电视剧《白色巨塔》而走红[2] </p><a class="cd-btn">检察更多</a></div> <!-- .cd-full-width --></li><li><div><h2>早年履历</h2><p>1994年~1997年，就读于台北市立金华国民中学。</p><a class="cd-btn">检察更多</a></div> <!-- .cd-half-width --><div class="cd-half-width cd-img-container"><img src="assets/tech-1.jpg" alt="tech 1"></div> <!-- .cd-half-width.cd-img-container --></li><li><div class="cd-half-width cd-img-container"><img src="assets/tech-2.jpg" alt="tech 2"></div> <!-- .cd-half-width.cd-img-container --><div><h2>参演短片</h2><p>五月天音乐观点影戏</p><a class="cd-btn">检察更多</a></div> <!-- .cd-half-width --></li><li><div><h2>演艺履历</h2><p>入行初期，张钧甯主要以拍摄音乐录影带和广告为主。</p><a class="cd-btn">检察更多</a></div> <!-- .cd-full-width --><div data-video="assets/video/video"><!-- video element will be loaded using jQuery --></div> <!-- .cd-bg-video-wrapper --></li><li><div><h2>小我私家生活</h2><p>张钧甯的父亲是台大法学教授，母亲是儿童作家， 她与姐姐张瀛都在德国出生。

</p><a class="cd-btn">检察更多</a></div> <!-- .cd-full-width --></li></ul> <!-- .cd-hero-slider --><div><nav><span class="cd-marker item-1"></span><ul><li><a href="#0">先容</a></li><li><a href="#0">履历</a></li><li><a href="#0">参演</a></li><li><a href="#0">演艺</a></li><li><a href="#0">生活</a></li></ul></nav> </div> <!-- .cd-slider-nav --></section> <!-- .cd-hero --><div style="width: 100%; height: 50px; line-height: 50px; text-align: center;">一款响应式的图文+视频幻灯片切换特效</div><script src="js/jquery-2.1.1.js"></script><script src="js/main.js"></script> <!-- Resource jQuery --></body></html>。

本文来源：凤凰彩票-www.azhuqian.com