js图片自动切换代码_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
js图片自动切换代码
上传于||暂无简介
阅读已结束，如果下载本文需要使用
想免费下载本文？
你可能喜欢当前位置： >
化繁为简，我们帮助您更好的运用代码。给你的代码都是选之又选，懒人图库拒绝滥竽充数！ 　 　
焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图焦点图
猜你也喜欢看这些 ??????
这些是最新的...
我们一直在进步此画板关注者(共238人，)
未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口trackbacks-0
&源地址：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"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&JavaScript图片切换展示效果&/title&
&style type="text/css"&
.container, .container *{margin:0; padding:0;}
.container{width:408 height:168 overflow:position:}
.slider{position:}
.slider li{ list-style:display:}
.slider img{ width:408 height:168 display:}
.slider2{width:2000}
.slider2 li{float:}
.num{ position: right:5 bottom:5}
.num li{float:color: #FF7300;text-align:line-height: 16width: 16height: 16font-family: Afont-size: 12cursor:overflow:margin: 3px 1border: 1px solid #FF7300;background-color: #}
.num li.on{color: #line-height: 21width: 21height: 21font-size: 16margin: 0 1border: 0;background-color: #FF7300;font-weight:}
&div class="container" id="idTransformView2"&
&ul class="slider slider2" id="idSlider2"&
&li&&img src="/jscss/demoimg/.jpg"/&&/li&
&li&&img src="/jscss/demoimg/.jpg"/&&/li&
&li&&img src="/jscss/demoimg/.jpg"/&&/li&
&ul class="num" id="idNum2"&
&li&1&/li&
&li&2&/li&
&li&3&/li&
&script type="text/javascript"&
var $ = function (id) {
return "string" == typeof id ? document.getElementById(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];
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 = oS//滑动对象
this._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.A
this.Pause = Math.abs(this.options.Pause);
this.onStart = this.options.onS
this.onFinish = this.options.onF
oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";
oSlider.style.position = "absolute";
oSlider.style.top = oSlider.style.left = 0;
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
true,//是否向上(否则向左)
5,//滑动变化率
10,//滑动延时
true,//是否自动转换
2000,//停顿时间(Auto为true时有效)
function(){},//开始转换时执行
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.I
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);
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.S
if (iStep == 0) return 0;
if (Math.abs(iStep) & 1) return (iStep & 0 ? 1 : -1);
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. i & i++) { fun(list[i], i); }
var objs = $("idNum2").getElementsByTagName("li");
var tv = new TransformView("idTransformView2", "idSlider2", 408, 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 =
tv.Start();
o.onmouseout = function(){
o.className = "";
tv.Auto = true;
tv.Start();
如果图片是动态的可以给img标签增加runate=&server& &id=&image1& 后天就可以给image的src进行赋值了
阅读(...) 评论()}