日期:2014-05-16 浏览次数:20354 次
<!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=gb2312" /> <title>JavaScript ShowImages</title> <link href="css/my.css" rel="stylesheet" type="text/css" /> <script src="js/my.js" type="text/javascript"></script> </head> <body> <div class="container" id="idTransformView"> <ul class="slider" id="idSlider"> <li><img src="images/01.jpg"/></li> <li><img src="images/02.jpg"/></li> <li><img src="images/03.jpg"/></li> <li><img src="images/04.jpg"/></li> </ul> <ul class="num" id="idNum"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>
@charset "utf-8"; .container, .container *{margin:0; padding:0;} .container{width:510px; height:240px; overflow:hidden;position:relative;} .slider{position:absolute;} .slider li{ list-style:none;display:inline;} .slider img{ width:510px; height:240px; display:block;} .num{ position:absolute; right:5px; bottom:5px;} .num li{ float: left; color: #FF7300; text-align: center; line-height: 30px; width: 30px; height: 30px; font-family: Arial; font-size: 12px; cursor: pointer; overflow: hidden; /**/ margin: 3px 1px; background-image:url(../images/round1.png); } .num li.on{ /*?*/ color: #fff; line-height: 30px; width: 30px; height: 30px; font-size: 16px; margin: 0 1px; border: 0; background-image:url(../images/round1.png); font-weight: bold; }
var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var TransformView = Class.create(); TransformView.prototype = { initialize: function(container, slider, parameter, count, options) { if(parameter <= 0 || count <= 0) return; var oContainer = $(container), oSlider = $(slider), oThis = this; this.Index = 0; this._timer = null; this._slider = oSlider; this._parameter = parameter; this._count = count || 0; this._target = 0; this.SetOptions(options); this.Up = !!this.options.Up; this.Step = Math.abs(this.options.Step); this.Time = Math.abs(this.options.Time); this.Auto = !!this.options.Auto; this.Pause = Math.abs(this.options.Pause); this.onStart = this.options.onStart; this.onFinish = this.options.onFinish;