var viewer = new Viewer(document.getElementById('dowebok'), { url: 'data-original' }); document.getElementById('btn1').onclick = function() { viewer.show(); } document.getElementById('btn2').onclick = function() { viewer.hide(); } document.getElementById('btn3').onclick = function() { viewer.view(5); } document.getElementById('btn4').onclick = function() { viewer.next(); } document.getElementById('btn5').onclick = function() { viewer.prev(); } document.getElementById('btn6').onclick = function() { viewer.move(-10, 0); } document.getElementById('btn7').onclick = function() { viewer.moveTo(0, 0); } document.getElementById('btn8').onclick = function() { viewer.zoom(0.1); } document.getElementById('btn9').onclick = function() { viewer.zoomTo(1); } document.getElementById('btn10').onclick = function() { viewer.rotate(90); } document.getElementById('btn11').onclick = function() { viewer.rotateTo(180); } document.getElementById('btn12').onclick = function() { viewer.scale(-1); } document.getElementById('btn13').onclick = function() { viewer.scaleX(-1); } document.getElementById('btn14').onclick = function() { viewer.scaleY(-1); } document.getElementById('btn15').onclick = function() { viewer.play(); } document.getElementById('btn16').onclick = function() { viewer.stop(); } document.getElementById('btn17').onclick = function() { viewer.full(); } document.getElementById('btn18').onclick = function() { viewer.exit(); } document.getElementById('btn19').onclick = function() { viewer.tooltip(); } document.getElementById('btn20').onclick = function() { viewer.toggle(); } document.getElementById('btn21').onclick = function() { viewer.reset(); } document.getElementById('btn22').onclick = function() { viewer.destroy(); }
<ul id="dowebok"> <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li> <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li> <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li> <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li> <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li> <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li> </ul>