先看效果:
这是一个常用的js实现图片滑动的效果
这里面的代码很值得去研究：（勘称完美~）
<!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 图片切换展示效果</title> </head> <body> <style type="text/css"> .container, .container *{margin:0; padding:0;} .container{408px; height:168px; overflow:hidden;position:relative;} .slider{position:absolute;} .slider li{ list-style:none;display:inline;} .slider img{ 408px; height:168px; display:block;} .slider2{2000px;} .slider2 li{float:left;} .num{ position:absolute; right:5px; bottom:5px;} .num li{ float: left; color: #FF7300; text-align: center; line-height: 16px; 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #FF7300; background-color: #fff; } .num li.on{ color: #fff; line-height: 21px; 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold; } </style> <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> </ul> <ul class="num" id="idNum"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <br /> <script type="text/javascript"> 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; oContainer.style.overflow = "hidden"; oContainer.style.position = "relative"; oSlider.style.position = "absolute"; oSlider.style.top = oSlider.style.left = 0; }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Up: true,//是否向上(否则向左) Step: 5,//滑动变化率 Time: 10,//滑动延时 Auto: true,//是否自动转换 Pause: 2000,//停顿时间(Auto为true时有效) onStart: function(){},//开始转换时执行 onFinish: function(){}//完成转换时执行 }; Object.extend(this.options, options || {}); }, //开始切换设置 Start: function() { if(this.Index < 0){ this.Index = this._count - 1; } else if (this.Index >= this._count){ this.Index = 0; } this._target = -1 * this._parameter * this.Index; //这个就是物体运动的总结点；比如width=100 第一个移动100*1 第二个移动:100*2 第三个：100*3 this.onStart(); this.Move(); }, //移动 Move: function() { clearTimeout(this._timer); var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow); if (iStep != 0) { this._slider.style[style] = (iNow + iStep) + "px"; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); } else { this._slider.style[style] = this._target + "px"; this.onFinish(); if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); } } }, //获取步长 GetStep: function(iTarget, iNow) { var iStep = (iTarget - iNow) / this.Step; if (iStep == 0) return 0; if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); //iStep= iStep>0?Math.ceil(iStep):Math.floor(iStep); return iStep; }, //停止 Stop: function(iTarget, iNow) { clearTimeout(this._timer); this._slider.style[this.Up ? "top" : "left"] = this._target + "px"; } }; //真是面向对象的全部讲解啊 //我操*你*妈的啊 window.onload=function(){ function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; var objs = $("idNum").getElementsByTagName("li"); //这个是以我们的li为移动对象滴呀； var tv = new TransformView("idTransformView", "idSlider", 168, 3, { onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式 }); tv.Start(); Each(objs, function(o, i){ o.onmouseover = function(){ o.className = "on"; tv.Auto = false; tv.Index = i; tv.Start(); } o.onmouseout = function(){ o.className = ""; tv.Auto = true; tv.Start(); } }) } </script> </body> </html>
2.下面的是以jq的方式来实现滴呀 （都值得去研究哈）
$(function ($) { $.fn.extend({ "focusScroll": function (o) { o = $.extend({ thumbObj: "#myTab_btns li", //导航对象(jQuery表达式‘容器 元素’) botPrev: null, //按钮上一个(jQuery表达式) botNext: null, //按钮下一个(jQuery表达式) changeType: 'top', //切换方式，可选：top(垂直滚动),left(左右滚动),fade(淡入淡出)，默认为top fadeSpeed: 'fast', //淡入淡出速度(slow,normal,fast或指定毫秒) thumbNowClass: 'hot', //导航对象当前的class,默认为hot thumbOverEvent: true, //鼠标经过thumbObj时是否切换对象，默认为true，为false时，只有鼠标点击thumbObj才切换对象 overStop: true, //鼠标经过切换对象时，是否停止切换，并于鼠标离开后重启自动切换，前提是已开启自动切换 auto: true, //是否自动切换，默认为true interval: 5000, //自动切换时间 len: 420, //单个尺寸 start: 0, //初始显示位置 lazyAttr: "backload",//图片延迟加载img属性 onChange:function(li){}//切换时触发（动画可能未完成） }, o || {}); var _self = $(this), _selfDom = $(this).get(0); var dir = o.changeType == 'top' ? 'scrollTop' : 'scrollLeft'; var curIndex = 0; var autoTimer = null, stopPlay = false; imgLoaded = false; var navLis = _self.find("li"); var timers={}; var go = function (i) { if (!imgLoaded) lzyLoad(); $(o.thumbObj).removeClass(o.thumbNowClass).eq(i).addClass(o.thumbNowClass); if (o.changeType == 'fade' && i != curIndex) { navLis.stop(true, true); var fadeoutSpeed=o.fadeSpeed; switch(o.fadeSpeed){ case "fast": case "normal": fadeoutSpeed = "fast"; break; case "slow": fadeoutSpeed = "normal"; break; default: if(!isNaN(parseInt(o.fadeSpeed))){ fadeoutSpeed = parseInt(o.fadeSpeed)/2; } } navLis.eq(curIndex).fadeOut(fadeoutSpeed, "linear"); navLis.eq(i).fadeIn(o.fadeSpeed, "linear"); } else { (function (me) { //一次性计算出动画过程中的位置 var diffs = []; var dis = i * o.len, pos = _selfDom[dir]; while (dis != pos) { var remain = dis - pos; var d = Math[remain > 0 ? 'ceil' : 'floor'](remain * 0.1); pos += d; diffs.push(pos); }; clearTimeout(me.only); var run = function () { _selfDom[dir] = diffs.shift(); if (diffs.length > 0) me.only = setTimeout(run, 10); } if (diffs.length > 0) me.only = setTimeout(run, 0); })(timers); } curIndex = i; o.onChange(navLis.eq(curIndex)); }; if (o.overStop) { _self.hover(function () { stopPlay = true; }, function () { stopPlay = false; }); } if ($(o.thumbObj).length == 0) {//自动生成数字导航 var content = o.thumbObj.split(" ")[0]; var tag = o.thumbObj.split(" ")[1]; for (var i = 1; i <= _self.find("li").length; i++) $(content).append("<" + tag + ">" + i + "</" + tag + ">"); $(content).find(tag).eq(0).addClass(o.thumbNowClass); } $(o.thumbObj).each(function (i) { if (o.thumbOverEvent) { $(this).hover(function () { stopPlay = true; go(i); }, function () { stopPlay = false; }); } else { $(this).click(function () { go(i); }) } }); var auto = function () { if (!stopPlay) { var nextIndex = (curIndex >= $(o.thumbObj).length - 1 ? 0 : curIndex + 1); go(nextIndex); } }; if (o.botPrev) $(o.botPrev).click(function () { var nextIndex = (curIndex <= 0 ? $(o.thumbObj).length - 1 : curIndex - 1); go(nextIndex) }).hover(function () { stopPlay = true; }, function () { stopPlay = false; }); if (o.botNext) $(o.botNext).click(function () { var nextIndex = (curIndex >= $(o.thumbObj).length - 1 ? 0 : curIndex + 1); go(nextIndex) }).hover(function () { stopPlay = true; }, function () { stopPlay = false; }); if (o.start > 0) { curIndex = o.start; $(o.thumbObj).removeClass(o.thumbNowClass).eq(curIndex).addClass(o.thumbNowClass); if (o.changeType == 'fade') _self.find("li").hide().eq(curIndex).show(); else _self.attr(dir, curIndex * o.len); } var lzyLoad = function () { imgLoaded = true; if (o.lazyAttr != "") { _self.find("img[" + o.lazyAttr + "]").each(function () { if (this.src != this.getAttribute(o.lazyAttr)) this.src = this.getAttribute(o.lazyAttr) }) } } var init = function () { /*update20121101 begin,curIndexImg show immediately*/ var firstImg = _self.find("li").eq(curIndex).find("img[" + o.lazyAttr + "]"); if (firstImg) { firstImg.attr("src", firstImg.attr(o.lazyAttr)); } //淡入淡出隐藏非当前li if (o.changeType == 'fade'){ _self.find("li").each(function(i){ if(i!=curIndex){ $(this).hide(); } }); } /*update20121101 end */ if (o.auto) { autoTimer = window.setInterval(auto, o.interval); //提前1秒加载图片 window.setTimeout(lzyLoad, o.interval > 2000 ? o.interval - 1000 : 1000); } else {//推迟1秒加载图片 window.setTimeout(lzyLoad, 1000); } } //获取元素偏移顶部距离 var offsettop = function (element) { var actualtop = element.offsetTop; var current = element.offsetParent; while (current !== null) { actualtop += current.offsetTop; current = current.offsetParent; } return actualtop; } //获取浏览器当前可视区域大小 var clientHeight = function () { var pageHeight; if (typeof pageHeight != "number") { if (document.compatMode == "CSS1Compat") { pageHeight = document.documentElement.clientHeight; } else { pageHeight = document.body.clientHeight; } } return pageHeight; } var offsetTop = offsettop(_selfDom); var scroll = function () { var scrollTop = document.body.scrollTop | document.documentElement.scrollTop; //如果是滚动到滚动图当前屏 if (offsetTop <= (clientHeight() + scrollTop)) { init(); $(window).off("scroll", scroll); } } //如果是当前屏是滚动图所在屏 if (offsetTop <= (clientHeight() + (document.body.scrollTop | document.documentElement.scrollTop))) { init(); } else { $(window).on("scroll", scroll); } } }); });