jQuery+HTML实现幻灯片左右箭头循环移动

知道91 | Web前端 | 2014-10-07 | 阅读:6649

网页设计中我们经常使用到幻灯片,实现幻灯片的最好方法就是使用jQuery + HTML 来实现。下面讲一讲使用jQuery+HTML实现幻灯片左右箭头循环移动的方法。

jQuery+HTML实现幻灯片左右箭头循环移动实现的效果图如下所示:

jQuery实现黄灯片

 

	
		
		
		jQuery带左右箭头宽屏幻灯片 - 知道91
		
		
		
		
		
		
		
        
		
		
	
	
		
   

下面是jquery.divas-1.0.min.js的内容

/*!
 * Title: Divas Slider jQuery plugin - jquery.divas-1.0.js
 * Author: Federica Sibella (@musingspuntoit) and Michela Chiucini (@webislove) - Coding Divas (@CodingDivas)
 * Author URI: http://www.musings.it - http://www.colazionedamichy.it - http://www.codingdivas.net/divasslider
 * Version: 1.0.dev
 * Date: 2014.07.23
 * 
 * Changelog:
 * 2014.07.23 initial release
 */

;(function($) {
	var divas = [],//array of Divas data
		instance = 0,//instance counter
		methods = {
			/**
			 * Divas slider initialization method
			 */
			init: function(options) {
				//defaults for the options
				var defaults = {
					sliderWidth:				"100%",//width of the slider with respect to its parent container
					mainImageWidth:				"60%",//width of the main image with respect to the slider
					start:						"manual",//manual or auto
					slideInterval:				4000,//msec interval between slides if start is "auto"
					
					slideTransitionClass:		"",//if you want to use CSS3 for slide transition
					//to be used in future releases
					slideTransitionParameter:	"",
					slideTransitionDuration:	600,
					slideTransitionEasing: 		"swing",
					slideTransitionStartValue:	null,
					slideTransitionStopValue:	null,
					
					titleTransitionClass:		"",//if you want to use CSS3 for slide transition
					titleTransitionParameter:	"",//jQuery fallback animation parameter if CSS3 is not available, can be an array ["","",...]
					titleTransitionDuration:	1000,
					titleTransitionEasing:		"swing",
					titleTransitionStartValue:	null,//start value(s) for jQuery fallback animation parameter(s)
					titleTransitionStopValue:	null,//stop value(s) for jQuery fallback animation parameter(s)
					
					startFrom:					"center",//left, center or right
					imagesToPreload:			3,//number of images to preload
					bullets:					"no",//yes or no
					wingsOverlayColor:			"",//color of the lateral panes
					placeholderImg:				"",//url of your placeholder img
					
					onImageClick:				function() {},//custom function to be executed on image click
					beforeSlide:				function() {},//custom function to be executed before slide
					afterSlide:					function() {}//custom function to be executed after slide
				},
				settings = $.extend({}, defaults, options);
				
				//for each Divas slider
				this.each(function() {
					//internal variables
					var $slider =					$(this),
						data =						$slider.data("divas"),
						current =					0,
						tot_slides =				0,
						images_to_preload = 		0,
						timer =						0,
						img_ratio =					0,
						$container =				$(),
						$slide =					$(),
						$navigation =				$(),
						$controls =					$(),
						$prev =						$(),
						$next =						$(),
						$start =					$(),
						$stop =						$(),
						$left_wing =				$(),
						$right_wing =				$(),
						$bullets_container = 		$(),
						mm = 						{},
						backup_img =				"images/backup_img.png",
						placeholder_img = 			"images/placeholder.gif",
						css3properties =			{},
						slideTransitionParameters = {},
						titleTransitionParameters = {};
					
					mm.swipeTreshold = 		100;
					mm.allowedTime = 		300;
					slideTransitionParameters.start = 	{};
					slideTransitionParameters.next  = 	{};
					slideTransitionParameters.prev  = 	{};
					
					//Divas objects initialization
					$slider.attr("data-id","divas-slider_"+instance);
					$container = $slider.children('.divas-slide-container').attr("data-id","divas-slide-container_"+instance);
					$slide = $container.children('.divas-slide');
					
					//for each slide
					$slide.each(function(index) {
						$(this).attr("data-position",index);
						$(this).attr("data-id","divas-slide-"+index+"_"+instance);
					});
					
					//append and start loader
					$slider.parent().append("
"); //count slides and images to preload tot_slides = $slide.length; images_to_preload = settings.imagesToPreload; //vairous controls and alerts (if it is the case) //total number of slides must be > 3 if(tot_slides < 3) alert("No Divas with less than 3 slides!\n Please add some slides"); //slider width must be set if(parseInt(settings.sliderWidth) <= 0 || isNaN(parseInt(settings.sliderWidth))) alert("No Divas if the slider width is not correctly set!\n Please change 'sliderWidth' value"); //main image width must be set if(parseInt(settings.mainImageWidth) <= 0 || isNaN(parseInt(settings.mainImageWidth))) alert("No Divas if the main image width is not correctly set!\n Please change 'mainImageWidth' value"); //count images to preload (at least 3) if(images_to_preload < 3 || typeof(images_to_preload) != "number") images_to_preload = defaults.imagesToPreload; if(isEven(images_to_preload)) images_to_preload ++; if(images_to_preload > tot_slides) images_to_preload = tot_slides; //have you got your own placeholder image? if(settings.placeholderImg !== "") placeholder_img = settings.placeholderImg; //calculating widths for the different objects var slider_width = inpx(settings.sliderWidth,$slider.parent().width()), slide_width = inpx(settings.mainImageWidth,slider_width), container_width = tot_slides * slide_width, wing_width = Math.round((slider_width - slide_width)/2); //setting width for the slider and the slide container $slider.css({"width":slider_width,"box-sizing":"content-box"}); $container.css({"width":container_width,"box-sizing":"content-box"}); var $current_slides = $(); //how shall we start? switch(settings.startFrom) { case "left": $current_slides = $slide.slice(0,images_to_preload); current = 1; break; case "center": var center = Math.floor(tot_slides / 2); if(isEven(tot_slides)) { center = tot_slides / 2; } current = center; $current_slides = $slide.slice(center-Math.floor(images_to_preload / 2),center+Math.ceil(images_to_preload / 2)); break; case "right": $current_slides = $slide.slice(-images_to_preload); current = tot_slides - 2; break; default: $current_slides = $slide.slice(0,images_to_preload); current = 1; break; } //check for css3 properties support css3properties = $.support.css3Properties; //css3properties.css3transition = false; //if css3 transitions ok if(css3properties.css3transition) { //if a transition class has been set for slides if(settings.slideTransitionClass !== "") { //array of default transitions for slides (to be used for future releases) var slideTransitionArray = ["divas-slide-transition-left"]; //if our transition is in the defaults if($.inArray(settings.slideTransitionClass,slideTransitionArray) > -1) { switch(settings.slideTransitionClass) { //set the transition parameters case "divas-slide-transition-left": slideTransitionParameters.next.left = "-="+slide_width; slideTransitionParameters.prev.left = "+="+slide_width; break; default: break; } } //TODO: this would be for custom slide transition: not yet available //since this is NOT one of the available slides transitions, fallback to default jQuery transition else { settings.slideTransitionClass = ""; /** slideTransitionParameters["start"][settings.slideTransitionParameter] = settings.slideTransitionStartValue; $slide.css(slideTransitionParameters["start"]); if($.isArray(settings.slideTransitionStopValue)) { slideTransitionParameters["next"][settings.slideTransitionParameter] = settings.slideTransitionStopValue[0]; slideTransitionParameters["prev"][settings.slideTransitionParameter] = settings.slideTransitionStopValue[1]; } else { slideTransitionParameters["next"][settings.slideTransitionParameter] = settings.slideTransitionStopValue; slideTransitionParameters["prev"][settings.slideTransitionParameter] = settings.slideTransitionStopValue; } */ } } //no css3 transitions for slides, fallback to correspondant jQuery transition (only default by now) else { } } //no css3 transitions, fall back to default jQuery transition else { } //preload first "images_to_preload" images $("img",$current_slides).each(function(index) { var $image = $(this), relative_src = $image.attr("data-src"); //only if we have something in the "data-src" attribute if(relative_src) { var promise = preloadImage(relative_src); promise.done(function(img_width, img_height) { $image.attr("src", relative_src); //only once at the beginning if(index === 0) { //save the data for the images height/width ratio data.img_ratio = img_height / img_width; divas[instance] = data; //set the height for the slides and wings $left_wing.css("height",$image.height()); $right_wing.css("height",$image.height()); $slide.css("height",$image.height()); //call resize for adjustments $slider.divas("resize"); } //do we have an image callback? if($.isFunction(settings.onImageClick)) $image.on("click",settings.onImageClick); //if title attr exists and caption does not exist, create it if($image.parent().find(".divas-caption").length === 0 && $image.attr("data-title") !== undefined && $image.attr("data-title") !== "") { $image.parent().append("
" + $image.attr("data-title") + "
"); //if a transition class has been set for titles, chain it var $caption = $image.parent().find(".divas-caption"); setTitleTransition($caption,css3properties,settings,titleTransitionParameters); } //only at the end if(index == $current_slides.length -1) { //remove loader $("#loader").remove(); //because I have to wait for caption(s) to be appended setTimeout(function() { //show caption of the current slide if present if($slide.eq(current).find(".divas-caption").length !== 0) { var $caption = $slide.eq(current).find(".divas-caption"); doTitleTransition($caption,css3properties,settings,titleTransitionParameters); } },200); //set "active" class to the current slide $slide.eq(current).addClass("divas-active"); } }); //if images loading fails promise.fail(function() { console.log("Image loading failed!"); //try to use backup image promise = preloadImage(backup_img); promise.done(function() { $image.attr('src', backup_img); }); }); } }); //slide settings $slide.css({ "box-sizing": "content-box", "position": "relative", "float": "left", "width": slide_width, "margin": 0, "padding": 0, "left": wing_width - (slide_width * current) }); //wings (lateral panes) creation $left_wing = $("
").appendTo($slider); $left_wing.css({ "position": "absolute", "top": 0, "left": 0, "width": wing_width, "background": settings.wingsOverlayColor }); $right_wing = $left_wing.clone().appendTo($slider); $right_wing.css({ "right": 0, "left": "auto" }); //if navigation exists, set up and attach events if($slider.children('.divas-navigation').length > 0) { $navigation = $slider.children('.divas-navigation').attr("data-id","divas-navigation_"+instance); //prev and next buttons if($navigation.children('.divas-prev').length > 0 && $navigation.children('.divas-next').length > 0) { $prev = $navigation.children('.divas-prev').attr("data-id","divas-prev_"+instance); $next = $navigation.children('.divas-next').attr("data-id","divas-next_"+instance); $prev.on("click touchstart touchend",function() { $(this).divas("prev"); }); $next.on("click touchstart touchend",function() { $(this).divas("next"); }); } } //if controls exist, set up and attach events if($slider.children('.divas-controls').length > 0 ) { $controls = $slider.children('.divas-controls').attr("data-id","divas-controls_"+instance); //start and stop buttons if($controls.children('.divas-start').length > 0 && $controls.children('.divas-stop').length > 0) { $start = $controls.children('.divas-start').attr("data-id","divas-start_"+instance); $stop = $controls.children('.divas-stop').attr("data-id","divas-stop_"+instance); $start.on("click touchstart touchend",function() { $(this).divas("start"); }); $stop.on("click touchstart touchend",function() { $(this).divas("stop"); }); $stop.addClass("disabled"); } } //initializing swipe-touch control $(document).on("touchstart", $slider, function(e) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; if (e.originalEvent.touches === undefined) { touch = e; } mm.ox = touch.pageX; mm.oy = touch.pageY; mm.startTime = new Date().getTime(); }); /** $(document).on("touchmove", $slider, function(e) { }); */ $(document).on("touchend", $slider, function(e) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; if (e.originalEvent.touches === undefined) { touch = e; } mm.dx = touch.pageX - mm.ox; mm.dy = touch.pageY - mm.oy; mm.endTime = new Date().getTime() - mm.startTime; if(mm.dx < -mm.swipeTreshold && mm.endTime < mm.allowedTime) { $slider.divas("next"); } else if(mm.dx > mm.swipeTreshold && mm.endTime < mm.allowedTime) { $slider.divas("prev"); } }); //if bullets is "yes" if(settings.bullets == "yes") { //append bullets container $bullets_container = $("
    ").appendTo($slider); //create bullets var $bullet = $("
  • ").appendTo($bullets_container.children("ul")); for(var i=1; i data.tot_slides - 1) to_be_loaded -= data.tot_slides; var $to_be_loaded = $slide.eq(to_be_loaded); if($to_be_loaded.find("img").attr("src") != $to_be_loaded.find("img").attr("data-src")) { var $image = $to_be_loaded.find("img"), relative_src = $image.attr("data-src"); if(relative_src) { var promise = preloadImage(relative_src); promise.done(function() { $image.attr('src', relative_src); //if there is a callback for images if($.isFunction(settings.onImageClick)) { $image.on("click",settings.onImageClick); } //if title attr exists and caption does not exist if($image.parent().find(".divas-caption").length === 0 && $image.attr("data-title") !== undefined && $image.attr("data-title") !== "") { $image.parent().append("
    " + $image.attr("data-title") + "
    "); //if a transition class has been set for titles var $caption = $image.parent().find(".divas-caption"); setTitleTransition($caption,css3properties,settings,titleTransitionParameters); } }); //if image loading has failed, try with backup image promise.fail(function() { console.log("Image loading failed!"); promise = preloadImage(data.backup_img); promise.done(function() { $image.attr('src', data.backup_img); }); }); } } //before slide callback? if($.isFunction(settings.beforeSlide)) { settings.beforeSlide.call($slider); } //Slide transition (css3 if present and possible) var direction = "next", slide_counter = 1; if(css3properties.css3transition) { if(settings.slideTransitionClass !== "") { //add transition class for slides $slide.addClass(settings.slideTransitionClass).css(slideTransitionParameters.next) .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { //after all the transitions have finished if(slide_counter == tot_slides) { slide_counter ++;//otherwise Chrome keeps firing! //remove transition class for slides repositioning $slide.removeClass(settings.slideTransitionClass); data = afterSlideTransition(data,direction); divas[id] = data; return divas; } slide_counter ++; }); } else {//no css3 transition class for the slides (but maybe for titles) //do jQuery animation for slides $slide.animate({"left": "-="+slide_width}, settings.slideTransitionDuration, settings.slideTransitionEasing) .promise().done(function() { data = afterSlideTransition(data,direction); divas[id] = data; return divas; }); } } else {//no css3 transition at all //do jQuery animation for slides $slide.animate({"left": "-="+slide_width}, settings.slideTransitionDuration, settings.slideTransitionEasing) .promise().done(function() { data = afterSlideTransition(data,direction); divas[id] = data; return divas; }); } }, /** * moving slides backwards */ prev: function() { var id = find_instance($(this).attr("data-id")), data = divas[id], current = data.current, settings = data.settings, $slider = data.slider, $slide = data.slide, to_be_loaded = current -Math.ceil(data.images_to_preload / 2), $next = data.next, $prev = data.prev, tot_slides = data.tot_slides, css3properties = data.css3properties, slide_width = data.slide_width, slideTransitionParameters = data.slideTransitionParameters, titleTransitionParameters = data.titleTransitionParameters; //unbinding prev and next button clicks $next.off(); $prev.off(); $(document).off("touchend"); //check for title transitions & reset values var $caption = $slide.find(".divas-caption"); resetTitleTransition($caption,css3properties,settings,titleTransitionParameters); //find images to be loaded (if any) if(to_be_loaded < 0) to_be_loaded += data.tot_slides; var $to_be_loaded = $slide.eq(to_be_loaded); if($to_be_loaded.find("img").attr("src") != $to_be_loaded.find("img").attr("data-src")) { var $image = $to_be_loaded.find("img"), relative_src = $image.attr("data-src"); if(relative_src) { var promise = preloadImage(relative_src); promise.done(function() { $image.attr('src', relative_src); //if there is a callback for images if($.isFunction(settings.onImageClick)) { $image.on("click",settings.onImageClick); } //if title attr exists and caption does not exist if($image.parent().find(".divas-caption").length === 0 && $image.attr("data-title") !== undefined && $image.attr("data-title") !== "") { $image.parent().append("
    " + $image.attr("data-title") + "
    "); //if a transition class has been set for titles var $caption = $image.parent().find(".divas-caption"); setTitleTransition($caption,css3properties,settings,titleTransitionParameters); } }); //if image loading has failed, try with backup image promise.fail(function() { console.log("Image loading failed!"); promise = preloadImage(data.backup_img); promise.done(function() { $image.attr('src', data.backup_img); }); }); } } //before slide callback? if($.isFunction(settings.beforeSlide)) { settings.beforeSlide.call($slider); } //slide transition (css3 if present and possible) var direction = "prev", slide_counter = 1; if(css3properties.css3transition) { if(settings.slideTransitionClass !== "") { $slide.addClass(settings.slideTransitionClass).css(slideTransitionParameters.prev) .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { if(slide_counter == tot_slides) { slide_counter ++;//otherwise Chrome keeps firing! $slide.removeClass(settings.slideTransitionClass); data = afterSlideTransition(data,direction); divas[id] = data; return divas; } slide_counter ++; }); } else {//no css3 transitions for slides (but maybe for titles?) //do jQuery animation for slides $slide.animate({"left": "+="+slide_width}, settings.slideTransitionDuration, settings.slideTransitionEasing) .promise().done(function() { data = afterSlideTransition(data,direction); divas[id] = data; return divas; }); } } else {//no css3 transitions //do jQuery animation for slides $slide.animate({"left": "+="+slide_width}, settings.slideTransitionDuration, settings.slideTransitionEasing) .promise().done(function() { data = afterSlideTransition(data,direction); divas[id] = data; return divas; }); } }, /** * method for starting automatic scrolling */ start: function() { var id = find_instance($(this).attr("data-id")), data = divas[id], $slider = data.slider, $prev = data.prev, $next = data.next, $start = data.start, $stop = data.stop, interval = data.settings.slideInterval; if(data.timer !== 0) { clearInterval(data.timer); data.timer = 0; } $prev.off().addClass("disabled"); $next.off().addClass("disabled"); $start.off().addClass("disabled"); $(document).off("touchend"); if($stop.length > 0) { if($stop.hasClass("disabled")) { $stop.on("click",function() { $(this).divas("stop"); }).removeClass("disabled"); } } data.timer = setInterval(function(){$slider.divas("next");},interval); data.prev = $prev; data.next = $next; data.start = $start; data.stop = $stop; divas[id] = data; return divas; }, /** * method for stopping automatic scrolling */ stop: function() { var id = find_instance($(this).attr("data-id")), data = divas[id], $prev = data.prev, $next = data.next, $start = data.start, $stop = data.stop, $slider = data.slider, mm = data.mm; $stop.off().addClass("disabled"); if($prev.length > 0 && $next.length > 0 && data.timer !== 0) { $prev.on("click",function() { $(this).divas("prev"); }).removeClass("disabled"); $next.on("click",function() { $(this).divas("next"); }).removeClass("disabled"); } if($start.length > 0) { $start.on("click",function() { $(this).divas("start"); }).removeClass("disabled"); } $(document).on("touchend",function(e) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; if (e.originalEvent.touches === undefined) { touch = e; } mm.dx = touch.pageX - mm.ox; mm.dy = touch.pageY - mm.oy; mm.endTime = new Date().getTime() - mm.startTime; if(mm.dx < -mm.swipeTreshold && mm.endTime < mm.allowedTime) { $slider.divas("next"); } else if(mm.dx > mm.swipeTreshold && mm.endTime < mm.allowedTime) { $slider.divas("prev"); } }); clearInterval(data.timer); data.timer = 0; data.prev = $prev; data.next = $next; data.start = $start; data.stop = $stop; data.slider = $slider; divas[id] = data; return divas; }, /** * method for resizing divas (responsive) */ resize: function(id) { if(typeof(id) != "number") id = find_instance($(this).attr("data-id")); var data = divas[id]; if(data !== undefined) { var $slider = data.slider, $slide = data.slide, $container = data.container, $left_wing = data.left_wing, $right_wing = data.right_wing, settings = data.settings, css3properties = data.css3properties, tot_slides = data.tot_slides, current = data.current, img_ratio = data.img_ratio, slider_width = inpx(settings.sliderWidth,$slider.parent().width()), slide_width = inpx(settings.mainImageWidth,slider_width), container_width = tot_slides * slide_width, wing_width = Math.round((slider_width - slide_width)/2), slide_height = Math.round(slide_width * img_ratio), slide_left = wing_width - (slide_width * current), slideTransitionParameters = data.slideTransitionParameters; $slider.css({"width": slider_width}); $container.css({"width": container_width}); $left_wing.css({"width": wing_width,"height": slide_height}); $right_wing.css({"width": wing_width,"height": slide_height}); $slide.css({"width": slide_width,"height": slide_height, "left": slide_left}); if(css3properties.css3transition) {//css3 transitions ok //if a transition class has been set for slides if(settings.slideTransitionClass !== "") { var slideTransitionArray = ["divas-slide-transition-left"]; if($.inArray(settings.slideTransitionClass,slideTransitionArray) > -1) {//if it's one of the available slide transitions switch(settings.slideTransitionClass) { case "divas-slide-transition-left": slideTransitionParameters.next.left = "-="+slide_width; slideTransitionParameters.prev.left = "+="+slide_width; break; default: break; } } else {//TODO: this would be for custom slide transition: not yet available //since this is NOT one of the available slides transitions, fallback to default jQuery transition settings.slideTransitionClass = ""; } } else {//no css3 transitions for slides, fallback to correspondant jQuery transition (only default by now) } } else {//no css3 transitions, fall back to default jQuery transition } data.slider = $slider; data.container = $container; data.slide = $slide; data.left_wing = $left_wing; data.right_wing = $right_wing; data.slide_width = slide_width; data.slideTransitionParameters = slideTransitionParameters; divas[id] = data; return divas; } }, /** * method for destroying divas instance */ destroy: function() { var id = find_instance($(this).attr("data-id")), data = divas[id]; data.prev.off(); data.next.off(); $(document).off("touchend"); data.slider.divas("stop"); data.slider.removeClass("divas-has-bullets"); data.slide.find(".divas-caption").remove(); data.slide.children("img").attr("src",data.placeholder_img); //re-sort images the order they were at the beginning! $(".divas-slide").sort(function (a, b) { return $(a).attr('data-position') - $(b).attr('data-position'); }).each(function (slide) { $(slide).parent().append(slide); }); data.slide.removeClass("divas-active"); data.left_wing.remove(); data.right_wing.remove(); data.bullets_container.remove(); $.removeData(data,"divas"); this.unbind(); this.element = null; }, /** * method for updating parameters * on-the-fly */ update: function(options) { $(this).divas("destroy"); $(this).divas("init",options); } }; /** * function that finds divas instance * @param id */ function find_instance(id) { if(typeof(id) === "string") { var position = id.indexOf("_"); if(position != -1) { id = id.substr(position+1); } } return id; } /** * function to find measures in px * from measures in % */ function inpx(inpct, parent_width) { var container_width = parent_width, width_inpc = 0, width_inpx = 0; if(typeof(inpct) === "string") { var position = inpct.indexOf("%"); if(position != -1) { width_inpc = parseInt(inpct.slice(0,-1))/100; width_inpx = Math.round(container_width * width_inpc); } } else { width_inpx = inpct; } return width_inpx; } /** * controls if a number is even or odd */ function isEven(value) { if (value%2 === 0) return true; else return false; } /** * function for preloading images via deferred object */ function preloadImage(image) { var $deferred = $.Deferred(); // create a new image to attempt loading the requested image var img = new Image(), self = this; img.onload = function() { $deferred.resolveWith(self, [img.width, img.height, img.src]); }; img.onerror = function() { $deferred.rejectWith(self, [img.src]); }; $deferred.fail(function() { console.log('image failed to load: ' + img.src); }); img.src = image; return $deferred.promise(); } /** * function for setting title transitions * @object $caption, titleTransitionParameters; * @array css3properties, settings */ function setTitleTransition($_caption,_css3properties,_settings,_titleTransitionParameters) { if(_css3properties.css3transition) { if(_settings.titleTransitionClass !== "") { $_caption.addClass(_settings.titleTransitionClass+"-start"); $_caption.addClass(_settings.titleTransitionClass); } else { //default is NO transition: caption visible } } else {//no css3 transitions //jQuery fallback of if there are all parameters if(_settings.titleTransitionParameter !== "" && _settings.titleTransitionDuration !== "" && _settings.titleTransitionStartValue !== null && _settings.titleTransitionStopValue !== null) { if($.isArray(_settings.titleTransitionParameter)) { $.each(_settings.titleTransitionParameter, function(index) { _titleTransitionParameters[_settings.titleTransitionParameter[index]] = _settings.titleTransitionStartValue[index]; }); } else { _titleTransitionParameters[_settings.titleTransitionParameter] = _settings.titleTransitionStartValue; } $_caption.css(_titleTransitionParameters); } else { //default is NO transition: caption visible } } } /** * function for performing title transitions * @object $caption, titleTransitionParameters; * @array css3properties, settings */ function doTitleTransition($_caption,_css3properties,_settings,_titleTransitionParameters) { if(_css3properties.css3transition) { if(_settings.titleTransitionClass !== "") { $_caption.addClass(_settings.titleTransitionClass+"-stop") .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { //after title transition? }); } else { //fallback to jquery transition if there are all fallback parameters if(_settings.titleTransitionParameter !== "" && _settings.titleTransitionDuration !== "" && _settings.titleTransitionStartValue !== null && _settings.titleTransitionStopValue !== null) { if($.isArray(_settings.titleTransitionParameter)) { $.each(_settings.titleTransitionParameter, function(index) { _titleTransitionParameters[_settings.titleTransitionParameter[index]] = _settings.titleTransitionStopValue[index]; }); } else { _titleTransitionParameters[_settings.titleTransitionParameter] = _settings.titleTransitionStopValue; } $_caption.animate(_titleTransitionParameters, _settings.titleTransitionDuration, _settings.titleTransitionEasing, function() { //after title animation? }); } else { //default no transition: title shown } } } else {//no css3 transitions //fallback to jquery transition if there are all fallback parameters if(_settings.titleTransitionParameter !== "" && _settings.titleTransitionDuration !== "" && _settings.titleTransitionStartValue !== null && _settings.titleTransitionStopValue !== null) { if($.isArray(_settings.titleTransitionParameter)) { $.each(_settings.titleTransitionParameter, function(index) { _titleTransitionParameters[_settings.titleTransitionParameter[index]] = _settings.titleTransitionStopValue[index]; }); } else { _titleTransitionParameters[_settings.titleTransitionParameter] = _settings.titleTransitionStopValue; } $_caption.animate(_titleTransitionParameters, _settings.titleTransitionDuration, _settings.titleTransitionEasing, function() { //after title animation? }); } else { //default no transition: title shown } } } /** * function that resets values for title transitions * @object $caption, titleTransitionParameters; * @array css3properties, settings */ function resetTitleTransition($_caption,_css3properties,_settings,_titleTransitionParameters) { if(_css3properties.css3transition) { if(_settings.titleTransitionClass !== "") { $_caption.removeClass(_settings.titleTransitionClass+"-stop"); } else { //jquery animation? if(_settings.titleTransitionParameter !== "" && _settings.titleTransitionDuration !== "" && _settings.titleTransitionStartValue !== null && _settings.titleTransitionStopValue !== null) { if($.isArray(_settings.titleTransitionParameter)) { $.each(_settings.titleTransitionParameter, function(index) { _titleTransitionParameters[_settings.titleTransitionParameter[index]] = _settings.titleTransitionStartValue[index]; }); } else { _titleTransitionParameters[_settings.titleTransitionParameter] = _settings.titleTransitionStartValue; } $_caption.animate(_titleTransitionParameters,_settings.titleTransitionDuration); } else { //no transition for titles } } } else {//no css3 transitions: fallback to jquery if(_settings.titleTransitionParameter !== "" && _settings.titleTransitionDuration !== "" && _settings.titleTransitionStartValue !== null && _settings.titleTransitionStopValue !== null) { if($.isArray(_settings.titleTransitionParameter)) { $.each(_settings.titleTransitionParameter, function(index) { _titleTransitionParameters[_settings.titleTransitionParameter[index]] = _settings.titleTransitionStartValue[index]; }); } else { _titleTransitionParameters[_settings.titleTransitionParameter] = _settings.titleTransitionStartValue; } $_caption.animate(_titleTransitionParameters,_settings.titleTransitionDuration); } else { //no transition for titles } } } /** * things to be performed after slide transition * Array _data; String _direction */ function afterSlideTransition(_data, _direction) { var $_slider = _data.slider, $_container = _data.container, $_slide = _data.slide, $_prev = _data.prev, $_next = _data.next, _current = _data.current, _settings = _data.settings, _slide_width = _data.slide_width, _timer = _data.timer, _css3properties = _data.css3properties, _titleTransitionParameters = _data.titleTransitionParameters, _mm = _data.mm, $_to_be_moved = $(); //reposition slides if(_direction == "next") {//next $_to_be_moved = $_container.children(".divas-slide").first(); $_slide.css({"left":"+="+_slide_width}); $_container.append($_to_be_moved); } else if(_direction == "prev") {//prev $_to_be_moved = $_container.children(".divas-slide").last(); $_slide.css({"left":"-="+_slide_width}); $_container.prepend($_to_be_moved); } $_slide = $_container.children(".divas-slide"); //add class divas-active to the current slide $_slide.removeClass("divas-active").eq(_current).addClass("divas-active"); //move bullets if(_settings.bullets == "yes") { var current_bullet = $(".divas-active").attr("data-position"); $(".divas-bullet").removeClass("divas-bullet-current").eq(current_bullet).addClass("divas-bullet-current"); } //only for the current slide: title animate if($_slide.eq(_current).find(".divas-caption").length !== 0) { var $_caption = $_slide.eq(_current).find(".divas-caption"); doTitleTransition($_caption,_css3properties,_settings,_titleTransitionParameters); } //after slide function if($.isFunction(_settings.afterSlide)) { _settings.afterSlide.call($_slider); } //re-attach prev and next buttons actions if($_prev.length > 0 && $_next.length > 0 && _timer === 0) { $_prev.on("click",function() { $(this).divas("prev"); }); $_next.on("click",function() { $(this).divas("next"); }); } //re-attach touchend actions to $(document) $(document).on("touchend", function(e) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; if (e.originalEvent.touches === undefined) { touch = e; } _mm.dx = touch.pageX - _mm.ox; _mm.dy = touch.pageY - _mm.oy; _mm.endTime = new Date().getTime() - _mm.startTime; if(_mm.dx < -_mm.swipeTreshold && _mm.endTime < _mm.allowedTime) { $_slider.divas("next"); } else if(_mm.dx > _mm.swipeTreshold && _mm.endTime < _mm.allowedTime) { $_slider.divas("prev"); } }); _data.current = _current; _data.slide = $_slide; _data.container = $_container; _data.next = $_next; _data.prev = $_prev; _data.slider = $_slider; return _data; } /** * function that sets timers for waiting till * windows resize is complete */ var waitForFinalEvent = (function () { var timers = {}; return function (callback, ms, uniqueId) { if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; } if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); } timers[uniqueId] = setTimeout(callback, ms); }; })(); /** * function that binds resize to * window resize for each divas instance */ $(window).resize(function() { waitForFinalEvent(function(){ for(var i=0; i

    下面是prism.css的内容:

    /**
     * prism.js default theme for JavaScript, CSS and HTML
     * Based on dabblet (http://dabblet.com)
     * @author Lea Verou
     */
    
    code[class*="language-"],
    pre[class*="language-"] {
    	color: black;
    	text-shadow: 0 1px white;
    	font-family: Consolas, Monaco, 'Andale Mono', monospace;
    	direction: ltr;
    	text-align: left;
    	white-space: pre;
    	word-spacing: normal;
    	word-break: normal;
    
    
    	-moz-tab-size: 4;
    	-o-tab-size: 4;
    	tab-size: 4;
    
    	-webkit-hyphens: none;
    	-moz-hyphens: none;
    	-ms-hyphens: none;
    	hyphens: none;
    }
    
    pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
    code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
    	text-shadow: none;
    	background: #b3d4fc;
    }
    
    pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
    code[class*="language-"]::selection, code[class*="language-"] ::selection {
    	text-shadow: none;
    	background: #b3d4fc;
    }
    
    @media print {
    	code[class*="language-"],
    	pre[class*="language-"] {
    		text-shadow: none;
    	}
    }
    
    /* Code blocks */
    pre[class*="language-"] {
    	padding: 2em;
    	margin: .5em 0;
    	overflow: auto;
    }
    
    :not(pre) > code[class*="language-"],
    pre[class*="language-"] {
    	background: #f5f2f0;
    }
    
    /* Inline code */
    :not(pre) > code[class*="language-"] {
    	padding: .1em;
    	border-radius: .3em;
    }
    
    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata {
    	color: slategray;
    }
    
    .token.punctuation {
    	color: #999;
    }
    
    .namespace {
    	opacity: .7;
    }
    
    .token.property,
    .token.tag,
    .token.boolean,
    .token.number,
    .token.constant,
    .token.symbol {
    	color: #905;
    }
    
    .token.selector,
    .token.attr-name,
    .token.string,
    .token.builtin {
    	color: #690;
    }
    
    .token.operator,
    .token.entity,
    .token.url,
    .language-css .token.string,
    .style .token.string,
    .token.variable {
    	color: #a67f59;
    	background: hsla(0,0%,100%,.5);
    }
    
    .token.atrule,
    .token.attr-value,
    .token.keyword {
    	color: #07a;
    }
    
    
    .token.regex,
    .token.important {
    	color: #e90;
    }
    
    .token.important {
    	font-weight: bold;
    }
    
    .token.entity {
    	cursor: help;
    }
    
    pre[data-line] {
    	position: relative;
    	padding: 1em 0 1em 3em;
    }
    
    .line-highlight {
    	position: absolute;
    	left: 0;
    	right: 0;
    	padding: inherit 0;
    	margin-top: 1em; /* Same as .prism’s padding-top */
    
    	background: hsla(24, 20%, 50%,.08);
    	background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
    	background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
    	background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
    	background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
    	
    	pointer-events: none;
    	
    	line-height: inherit;
    	white-space: pre;
    }
    
    	.line-highlight:before,
    	.line-highlight[data-end]:after {
    		content: attr(data-start);
    		position: absolute;
    		top: .4em;
    		left: .6em;
    		min-width: 1em;
    		padding: 0 .5em;
    		background-color: hsla(24, 20%, 50%,.4);
    		color: hsl(24, 20%, 95%);
    		font: bold 65%/1.5 sans-serif;
    		text-align: center;
    		vertical-align: .3em;
    		border-radius: 999px;
    		text-shadow: none;
    		box-shadow: 0 1px white;
    	}
    	
    	.line-highlight[data-end]:after {
    		content: attr(data-end);
    		top: auto;
    		bottom: .4em;
    	}
    pre.line-numbers {
    	position: relative;
    	padding-left: 3.8em;
    	counter-reset: linenumber;
    }
    
    pre.line-numbers > code {
    	position: relative;
    }
    
    .line-numbers .line-numbers-rows {
    	position: absolute;
    	pointer-events: none;
    	top: 0;
    	font-size: 100%;
    	left: -3.8em;
    	width: 3em; /* works for line-numbers below 1000 lines */
    	letter-spacing: -1px;
    	border-right: 1px solid #999;
    
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    
    }
    
    	.line-numbers-rows > span {
    		pointer-events: none;
    		display: block;
    		counter-increment: linenumber;
    	}
    
    		.line-numbers-rows > span:before {
    			content: counter(linenumber);
    			color: #999;
    			display: block;
    			padding-right: 0.8em;
    			text-align: right;
    		}
    
    

    jQuery+HTML实现幻灯片左右箭头循环移动的实现方法,完整实例下载点击此处