公司項目上的一個需求，說不上來叫什麼名字，不過可以用來做一個圖片展示。
JS：
function slideShow(){this.init.apply(this,arguments)}slideShow.prototype = {init:function(opts){var set = {perv:'prev',next:'next',r_prev:'r_prev',r_next:'r_next',r_con:'content',thumbnail : 'thumbnail',height:92,len:3}opts = opts || {};this.opts = this.extend(set,opts);this.perv = this.getId(this.opts.perv);this.next = this.getId(this.opts.next);this.r_prev = this.getId(this.opts.r_prev);this.r_next = this.getId(this.opts.r_next);this.thumbnail = this.getId(this.opts.thumbnail);this.bigBox = this.getId(this.opts.r_con);var _this = this;this.items = this.thumbnail.getElementsByTagName('li');var len = this.items.length;this.slieding = false;this.count = 0;this.n = 0;this.current =0;this.perv.onclick = function(){if(_this.n == len-_this.opts.len) return;if(_this.slieding) return;_this.n++;_this.slide(-1);return false;};this.next.onclick = function(){if(_this.n == 0) return;if(_this.slieding) return;_this.n--;_this.slide(1);return false;};this.r_prev.onclick = function(){if(_this.current == 0) return;if(_this.slieding) return;_this.current--;if(_this.n-1 ==_this.current) _this.fireEvent(_this.next,'click');_this.bigBox.innerHTML = _this.items[_this.current].innerHTML;};this.r_next.onclick = function(){if(_this.current == len-1) return;if(_this.slieding) return;_this.current++if(_this.n+_this.opts.len==_this.current) _this.fireEvent(_this.perv,'click');_this.bigBox.innerHTML = _this.items[_this.current].innerHTML;};this.play();},fx:function (f,t,fn,callback){ var D=Date,d=+new D,e,T=480,ed=ed||D,F=function(x) {return (x /= 0.5) < 1 ? (0.5 * Math.pow(x, 2)) : (-0.5 * ((x -= 2) * x - 2))}; return e=setInterval(function (){ var z=Math.min(1,(new D-d)/T); if(false===fn(+f+(t-f)*F(z),z)||z==1)ed(clearTimeout(e),callback()); },10) },getId:function(el){return el = typeof el == 'string' ? document.getElementById(el) : el;},slide:function(k){var _this = this;var old = this.count * this.opts.height;k > 0 ? this.count++ : this.count--;var now = this.count * this.opts.height;return function(s,n){_this.fx(s,n,function(x){_this.slieding = true;_this.thumbnail.style.top = x + 'px';},function(){_this.slieding = false;})}(old,now);},extend:function(baseObj,extendObj){for(var i in extendObj) baseObj[i] = extendObj[i]return baseObj;},play:function(){var _this = this;var i=0,len=this.items.length;for(;i<len;i++){(function(i){_this.items[i].onclick = function(){_this.current = i;_this.bigBox.innerHTML = this.innerHTML;}})(i);}},fireEvent:function(el,type){if(document.createEventObject){return el.fireEvent('on'+type);}else{var e = document.createEvent('HTMLEvents');e.initEvent(type,true,true);return !el.dispatchEvent(e);}}}new slideShow();
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">* { padding:0; margin:0;}ul { list-style:none;}.clear{ clear:both; height:0; overflow:hidden;}#outer { width:600px; height:315px; margin:100px auto;}#box { width:134px; float:left;}#box a { display:block; height:20px; background:#000; line-height:20px; text-align:center; color:#fff; text-decoration:none; font-weight:bold;}#thumbnail_box { height:275px; overflow:hidden; position:relative;}#thumbnail { position:absolute;top:0; left:0; width:134px;}#thumbnail li { height:91px; background:#CCC; margin-bottom:1px; font-size:50px; font-weight:bold; text-align:center; line-height:91px; cursor:pointer;}#con { margin-left:139px; background:#000; height:315px;color:#fff; text-align:center; line-height:315px; font-size:50px; position:relative;}#content {height:315px;}#con a { width:49%;height:315px; position:absolute;top:0;}#r_prev { left:0;}#r_next{right:0;}</style></head><body><div id="outer"> <div id="box"> <a href="#" title="prev" id="prev">prev</a> <div id="thumbnail_box"> <ul id="thumbnail"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> </div> <a href="#" title="next" id="next">next</a> </div> <div id="con"> <div id="content">1</div> <a href="#" title="prev" id="r_prev">prev</a> <a href="#" title="next" id="r_next">next</a> </div></div><script type="text/javascript" src="slideShow.js"></script></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
