公司项目上的一个需求,说不上来叫什么名字,不过可以用来做一个图片展示。

公司项目上的一个需求,说不上来叫什么名字,不过可以用来做一个图片展示。

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>



你可能感兴趣的:(图片)