跨设备多功能的无限循环JS轮播图插件TremulaJS

来源:https://www.sucaihuo.com/js/2864.html 2017-08-29 00:17浏览(1276) 收藏

一款跨设备多功能的无限循环JS轮播图插件TremulaJS,可以点击左上角的“配置”按钮,显示更多效果或配置不同的参数,支持鼠标拖拽切换更多图片内容。
跨设备多功能的无限循环JS轮播图插件TremulaJS
分类:图片代码 > 图片墙 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面必须的两个CSS样式文件、jQuery库和其他多个JS文件,代码如下:

<link type="text/css" rel="stylesheet" href="dist/Tremula.min.css">
<link type="text/css" rel="stylesheet" href="gh-pages-demo/demo.css">
<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/hammer.js"></script>
<script type="text/javascript" src="libs/jsBezier-0.6.js"></script>
<script type="text/javascript" src="libs/raf_shim.js"></script>
<script type="text/javascript" src="libs/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="gh-pages-demo/tremulaAdapters.js"></script>
<script type="text/javascript" src="gh-pages-demo/tremulaConfig.js"></script>
<script type="text/javascript" src="gh-pages-demo/tremulaControls.js"></script>
<script type="text/javascript" src="gh-pages-demo/tremulaProjections.js"></script>
<script type="text/javascript" src="dist/Tremula.min.js"></script>
<script type="text/javascript">
$().ready(function(){
	setTimeout(function(){
		var tremula = tremulaInit();
		//tremula.Grid.updateConfig({itemConstraint:200,itemMargins:[20,20]});
		attachDemoControls(tremula);
		window.tremula=tremula;//does not need to be on the window -- implemented here for convienience.

		$('body').removeClass('doReflect');
		//toggleDebug();

	},1000);
});

function tremulaInit(){
	console.log('starting tremula');

	$tremulaContainer = $('.tremulaContainer');

	var tremula = new Tremula();
	var config = tremulaConfigs.default.call(tremula);

	tremula.init($tremulaContainer,config,this);
	
	var doScrollEvents = function(o){
		if(debugLoop)debugLoop(o);
		if(o.scrollProgress>.7){
			if(!tremula.cache.endOfScrollFlag){
				tremula.cache.endOfScrollFlag = true;
				console.log('END OF SCROLL!')
			}
		}
	}//doScrollEvents()

	tremula.setOnChangePub(doScrollEvents);

	return tremula;
}
</script>

页面的body部分,用了多个div的嵌套结构和多个ul无序列表,代码如下:

<h1>TremulaJS</h1>
<div class="tab">配置<span style="font-size: 15px;display: block;line-height: 0.88em;">更酷效果</span></div>
<div class="tremulaContainer main"></div>
<div class="debug"></div>
<div class="controls">
  <div class="buttons" >
    <ul class="group main presets">
      <li class="streamHorizontal">streamHorizontal</li>
      <li class="pinterest">pinterest</li>
      <li class="btnL2">turntable</li>
      <li class="mountain">mountain</li>
      <li class="btnL3">enterTheDragon</li>
      <li class="xy">xyPlain (toggle)</li>
    </ul>
    <ul class="group main">
      <li class="more">Experimental stuff...</li>
    </ul>
    <ul class="group">
      <li class="autoSize">autoSize</li>
      <li class="autoCount">autoCount</li>
      <li class="autoDisable">autoDisable</li>
    </ul>
    <ul class="group">
      <li class="btn1">1 Axis</li>
      <li class="btn2">2 Axes</li>
      <li class="btn3">3 Axes</li>
    </ul>
    <ul class="group">
      <li class="size1">sm size</li>
      <li class="size2">med size</li>
      <li class="size3">lg size</li>
    </ul>
    <ul class="group">
      <li class="margin1">margin sm</li>
      <li class="margin2">margin med</li>
      <li class="margin3">margin lg</li>
    </ul>
    <ul class="group">
      <li class="toggleReflect">toggle reflect</li>
      <li class="toggleItemEase">toggle ease</li>
      <li class="toggleIsLooping">toggle looping</li>
      <!-- <li class="toggleScrollAxis">toggle axis</li> -->
    </ul>
    <ul class="group">
      <li class="headScroll">head scroll</li>
      <li class="tailScroll">tail scroll</li>
    </ul>
    <ul class="group">
      <li class="loadArtDotCom">loadArtDotCom</li>
      <li class="loadFlickr">loadFlickr</li>
      <li class="toggleRefreshData">toggle refresh</li>
    </ul>
    <ul class="group">
      <li class="showCtrlData">showCtrlData</li>
    </ul>
  </div>
</div>

页面的底部,设置好轮播图的相关参数,代码如下:

showControlData = function(o){
	if(!this.$debug)this.$debug = $('.debug');
		this.$debug.html(
		'<ul>'
		// + '<li>jsHeapSizeLimit: ' 							+ performance.memory.jsHeapSizeLimit 											+ '<span>total available memory</span></li>'
		// + '<li>totalJSHeapSize: ' 							+ performance.memory.totalJSHeapSize 											+ '<span>total used memory</span></li>'
		// + '<li>usedJSHeapSize: ' 							+ performance.memory.usedJSHeapSize 											+ '<span>current  used memory</span></li>'
		+ '<li>scrollAxis: '        					+ o.sa + ' [sx]--> ' + o.sx 				+ '<span>Direction of scroll</span></li>'
		+ '<li>this.frameRate: ' 							+ o.frameRate 											+ '<span>frameRate</span></li>'
		+ '<li>this.physicsLoopRAF: ' 				+ o.physicsLoopRAF 									+ '<span>RAF FRAME ID</span></li>'
		+ '<li>isTouching: '        					+ o.isTouching 											+ '<span></span></li>'
		+ '<li>absScrollPos: '        				+ o.absScrollPos 										+ '<span>The scroll position of the content head in relation to the visible leading border.</span></li>'
		+ '<li>scrollPos: '         					+ o.scrollPos 											+ '<span></span></li>'
		+ '<li>scrollProgress: '      				+ o.scrollProgress 									+ '<span></span></li>'
		+ '<li>marginScrollWarp: '      			+ o.marginScrollWarp 								+ '<span></span></li>'
		+ '<li>isInHeadMargin: '      				+ o.isInHeadMargin 									+ '<span></span></li>'
		+ '<li>isInTailMargin: '      				+ o.isInTailMargin 									+ '<span></span></li>'
		+ '<li>scrollAxisOffset: '						+ o.scrollAxisOffset 								+ '<span>The margin added before and after the content -- this creates a blank offset area on either side of the content -- IOW: this offsets the content position.</span></li>'
		+ '<li>scrollMargin: '        				+ o.scrollMargin 										+ '<span>The scrollable area added before and after the content. NOTE: this does not offset the content.</span></li>'
		+ '<li>firstItemPos: '        				+ o.firstItemPos 										+ '<span>The head edge position of the first item.</span></li>'
		+ '<li>bounceMargin: '       					+ o.bounceMargin 										+ '<span></span></li>'
		+ '<li>trailingEdgeScrollPos: '       + o.trailingEdgeScrollPos 					+ '<span></span></li>'
		+ '<li>absTrailingEdgeScrollPos: '    + o.absTrailingEdgeScrollPos 				+ '<span>The value of absScrollPos when content is scrolled completely to the tail position (exclude rubber band effect).</span></li>'
		+ '<li>currentGridContentDims: '     	+ o.currentGridContentDims					+ '<span>?</span></li>'
		+ '<li>boxAxisLengths: '      				+ o.boxAxisLengths 									+ '<span>A mysterious number which starts as the contentDims but gets transformed in ways that are no longer clear.</span></li>'
		+ '<li>contentDims: '      						+ o.contentDims 										+ '<span>Content bounding box dims.</span></li>'
		+ '<li>gridDims: '          					+ o.gridDims 												+ '<span></span></li>'
		+ '<li>hasShortGridDimsSi: '          + o.hasShortGridDimsSi 							+ '<span></span></li>'
		+ '<li>hasMediumGridDimsSi: '         + o.hasMediumGridDimsSi 						+ '<span></span></li>'
		+'</ul>'
	);
}
debugLoop = null;
toggleDebug = function toggleDebug(){
	if(debugLoop){
		debugLoop = null;
		$('.debug').removeClass('show');
	}else{
		debugLoop = showControlData;
		$('.debug').addClass('show');
		showControlData({});
	}

}
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2