源地址：http://www.codefans.net/jscss/code/4699.shtml

<!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:; padding:;}

.container{width:408px; height:168px; overflow:hidden;position:relative;}

.slider{position:absolute;}

.slider li{ list-style:none;display:inline;}

.slider img{ width:408px; height:168px; display:block;}

.slider2{width:2000px;}

.slider2 li{float:left;}

.num{ position:absolute; right:5px; bottom:5px;}

.num li{float: left;color: #FF7300;text-align: center;line-height: 16px;width: 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;width: 21px;height: 21px;font-size: 16px;margin:  1px;border: ;background-color: #FF7300;font-weight: bold;}

</style>

<div class="container" id="idTransformView2">

  <ul class="slider slider2" id="idSlider2">

    <li><img src="/jscss/demoimg/201311/01.jpg"/></li>

    <li><img src="/jscss/demoimg/201311/02.jpg"/></li>

    <li><img src="/jscss/demoimg/201311/03.jpg"/></li>

  </ul>

  <ul class="num" id="idNum2">

    <li></li>

    <li></li>

    <li></li>

  </ul>

</div>

<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 <=  || count <= ) return;

    var oContainer = $(container), oSlider = $(slider), oThis = this;

    this.Index = ;//当前索引

    this._timer = null;//定时器

    this._slider = oSlider;//滑动对象

    this._parameter = parameter;//切换参数

    this._count = count || ;//切换数量

    this._target = ;//目标参数

    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 = ;

  },

  //设置默认属性

  SetOptions: function(options) {

    this.options = {//默认值

        Up:    true,//是否向上(否则向左)

        Step:    ,//滑动变化率

        Time:    ,//滑动延时

        Auto:    true,//是否自动转换

        Pause:    ,//停顿时间(Auto为true时有效)

        onStart:    function(){},//开始转换时执行

        onFinish:    function(){}//完成转换时执行

    };

    Object.extend(this.options, options || {});

  },

  //开始切换设置

  Start: function() {

    if(this.Index < ){

        this.Index = this._count - ;

    } else if (this.Index >= this._count){ this.Index = ; }

    this._target = - * this._parameter * this.Index;

    this.onStart();

    this.Move();

  },

  //移动

  Move: function() {

    clearTimeout(this._timer);

    var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || , iStep = this.GetStep(this._target, iNow);

    if (iStep != ) {

        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 == ) return ;

    if (Math.abs(iStep) < ) return (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 = , len = list.length; i < len; i++) { fun(list[i], i); }

    };

    var objs = $("idNum2").getElementsByTagName("li");

    var tv = new TransformView("idTransformView2", "idSlider2", , , {

        onStart: function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) },//按钮样式

        Up: false

    });

    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>

如果图片是动态的可以给img标签增加runate=“server”  id=“image1” 后天就可以给image的src进行赋值了

JS图片切换效果的更多相关文章

  1. js 图片切换效果

    效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

  2. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  3. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

  4. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  5. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  6. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  7. 100种不同图片切换效果插件pageSwitch

    分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览   源码下载 实现的代码. ht ...

  8. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

  9. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

随机推荐

  1. html5 文件上传 带进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. iOS Swipe Tableviewcell(左右滑动出现按钮)

    1.背景 看到QQ的左右滑动Tableviewcell时可以出现多个菜单,觉得很高大上,因为没这种需求, 也只是需要一个删除按钮,这个系统已经帮我们实现了,只需要实现几个代理就可以,做出左划 出现删除 ...

  3. C#设计模式(7)——适配器模式（Adapter Pattern）

    一.引言 在实际的开发过程中,由于应用环境的变化(例如使用语言的变化),我们需要的实现在新的环境中没有现存对象可以满足,但是其他环境却存在这样现存的对象.那么如果将“将现存的对象”在新的环境中进行调用 ...

  4. 实际遭遇并解决：类型“ASP.global_asax”同时存在的问题

    将一个ASP.NET项目由预编译方式改为动态编译方式时,删除了bin文件夹中所有扩展名为.compiled文件以及文件名以App_Web_开头的文件. 访问却出现下面的错误: System.Web.H ...

  5. 移植到Windows CE 的经验

    Windows CE 是微软早期推出的嵌入式设备和移动设备的开发运行平台,虽然目前移动端几乎都是android和ios的天下,但是,在嵌入式设备领域,Windows CE仍然占有一块地盘.很多用户希望 ...

  6. node-webkit教程(13)gpu支持信息查看

    node-webkit教程(13)gpu支持信息查看 文/玄魂 目录 node-webkit教程(13)gpu支持信息查看 前言 13.1操作步骤 (一)打开node-webkit,输入chrome: ...

  7. NODE-WEBKIT教程(12)全屏

    node-webkit教程(12)全屏 文/玄魂 目录 node-webkit教程(12)全屏 前言 12.1  和全屏有关的三个api Window.enterFullscreen() Window ...

  8. Nginx学习笔记（九） 配置文件详细说明

    配置文件详细说明 工作了几个月要开始做一些后台开发,免不了接触nginx,以前一般只是简单的使用,更多的分析内部模块的具体实现,为了部署需要进一步掌握配置方法. 全局配置信息 #nginx worke ...

  9. HTTP权威指南阅读笔记五：Web服务器

    Web服务器会做些什么: 1.建产连接:接受一个客户端连接,或者如果不希望与这个客户端建立连接,就将其关闭. 1)处理新连接 2)客户端主机名识别 3)通过ident确定客户端用户 ident在组织内 ...

  10. HTTP权威指南阅读笔记一：HTTP概述

    HTTP协议版本: 1.HTTP/0.9:HTTP的1991原型版本称为HTTP/0.9.这个协议有很多严重的缺陷,只应该用与与老客户端的交互.HTTP/0.9只支持GET方法,不支持多媒体内容的MI ...