源地址: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. 超链接的#和javascript:void(0)的区别

    转载于:http://www.uw3c.com/cssviews/css12.html   在工作中,如果我们想把a标签中的链接置成空链接,我们一般会用两种方法: 1 <a href=" ...

  2. C++字符串常量

    C++字符串常量 当一个字符串常量出现于表达式中时,它的值是个指针常量.编译器把这个指定字符的一份copy存储在内存的某个位置(全局区),并存储一个指向第一个字符的指针. #include <i ...

  3. Duang的成长——使用造字程序输入生僻字

    使用造字程序输入生僻字 最近,一个字突然间火了起来,那就是——duang! (图片来自网络) 那么,问题来了!造字程序哪家强?(此处有掌声) 其实,微软早就考虑到各国文字的博大精深,在系统中集成了一个 ...

  4. mysqld: Incorrect key file for table

    错误 140624 0:53:42 [ERROR] /usr/libexec/mysqld: Incorrect key file for table './xx/xxx.MYI'; try to r ...

  5. 利用Formdata实现form提交文件上传不跳转页面

    作者:幻月九十链接:https://www.zhihu.com/question/19631256/answer/119911045来源:知乎著作权归作者所有,转载请联系作者获得授权. $('form ...

  6. 用c#开发微信 (13) 微统计 - 阅读分享统计系统 3 UI设计及后台处理

      微信平台自带的统计功能太简单,有时我们需要统计有哪些微信个人用户阅读.分享了微信公众号的手机网页,以及微信个人用户访问手机网页的来源:朋友圈分享访问.好友分享消息访问等.本系统实现了手机网页阅读. ...

  7. 扯扯Java中Finalization的意义

    这是Stack Overflow上关于Finalizetion意义的两段讨论,这两个观点是互为补充的. 观点1: 垃圾回收器(The garbage collector)自动在后台运行(虽然它也可以被 ...

  8. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  9. [异常] MyEclipse Deploy点不开 An internal error occurred during: "Launching MVC on Tomcat 6.x". java.lang.NullPointerException

    >_<" 今天做struts时,工程写好了,可是点击MyEclipse上面的Delopy不会跳出常规的窗口,导致各种坑~ >_<" 如果直接运行还出现下面的 ...

  10. Android BitmapShader 实战 实现圆形、圆角图片

    转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...