一个横向滑动的图片切换容器代码 - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

]<!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>图片滑动展示效果</title>
<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
function Event(e){
	var oEvent = document.all ? window.event : e;
	if (document.all) {
		if(oEvent.type == "mouseout") {
			oEvent.relatedTarget = oEvent.toElement;
		}else if(oEvent.type == "mouseover") {
			oEvent.relatedTarget = oEvent.fromElement;
		}
	}
	return oEvent;
}
function addEventHandler(oTarget, sEventType, fnHandler) {
	if (oTarget.addEventListener) {
		oTarget.addEventListener(sEventType, fnHandler, false);
	} else if (oTarget.attachEvent) {
		oTarget.attachEvent("on" + sEventType, fnHandler);
	} else {
		oTarget["on" + sEventType] = fnHandler;
	}
};
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 GlideView = Class.create();
GlideView.prototype = {
  //容器对象 容器宽度 展示标签 展示宽度
  initialize: function(obj, iWidth, sTag, iMaxWidth, options) {
    var oContainer = $(obj), oThis=this, len = 0;
	
	this.SetOptions(options);
	
	this.Step = Math.abs(this.options.Step);
	this.Time = Math.abs(this.options.Time);
	this.Showtext = false;//是否显示说明文本
	
	this._list = oContainer.getElementsByTagName(sTag);
	len = this._list.length;
	this._count = len;
	this._width = parseInt(iWidth / len);
	this._width_max = parseInt(iMaxWidth);
	this._width_min = parseInt((iWidth - this._width_max) / (len - 1));
	this._timer = null;
	
	//有说明文本
	if(this.options.TextTag && this.options.TextHeight > 0){
		this.Showtext = true;
		this._text = oContainer.getElementsByTagName(this.options.TextTag);
		this._height_text = -parseInt(this.options.TextHeight);
	}
	
	this.Each(function(oList, oText, i){
		oList._target = this._width * i;//自定义一个属性放目标left
		oList.style.left = oList._target + "px";
		oList.style.position = "absolute";
		addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); });
		
		//有说明文本
		if(oText){
			oText._target = this._height_text;//自定义一个属性放目标bottom
			oText.style.bottom = oText._target + "px";
			oText.style.position = "absolute";
		}
	})
	
	//容器样式设置
	oContainer.style.width = iWidth + "px";
	oContainer.style.overflow = "hidden";
	oContainer.style.position = "relative";
	//移出容器时返回默认状态
	addEventHandler(oContainer, "mouseout", function(e){
		//变通防止执行oList的mouseout
		var o = Event(e).relatedTarget;
		if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1);
	})
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
		Step:			20,//滑动变化率
		Time:			20,//滑动延时
		TextTag:		"",//说明容器tag
		TextHeight:		0//说明容器高度
    };
    Object.extend(this.options, options || {});
  },
  //相关设置
  Set: function(index) {
	if (index < 0) {
		//鼠标移出容器返回默认状态
		this.Each(function(oList, oText, i){ oList._target = this._width * i; if(oText){ oText._target = this._height_text; } })
	} else {
		//鼠标移到某个滑动对象上
		this.Each(function(oList, oText, i){
			oList._target = (i <= index) ? this._width_min * i : this._width_min * (i - 1) + this._width_max;
			if(oText){ oText._target = (i == index) ? 0 : this._height_text; }
		})
	}
	this.Move();
  },
  //移动
  Move: function() {
	clearTimeout(this._timer);
	var bFinish = true;//是否全部到达目标地址
	this.Each(function(oList, oText, i){
		var iNow = parseInt(oList.style.left), iStep = this.GetStep(oList._target, iNow);
		if (iStep != 0) { bFinish = false; oList.style.left = (iNow + iStep) + "px"; }
		//有说明文本
		if (oText) {
			iNow = parseInt(oText.style.bottom), iStep = this.GetStep(oText._target, iNow);
			if (iStep != 0) { bFinish = false; oText.style.bottom = (iNow + iStep) + "px"; }
		}
	})
	//未到达目标继续移动
	if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }
  },
  //获取步长
  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);
	return iStep;
  },
  Each:function(fun) {
	for (var i = 0; i < this._count; i++)
		fun.call(this, this._list[i], (this.Showtext ? this._text[i] : null), i);
  }
};
</script>
<style type="text/css">
#idGlideView {
	height:100px;
	margin:100px auto;
}
#idGlideView div {
	width:500px;
	height:100px;
}
#idGlideView div a {
	width:500px;
	height:50px;
	filter: alpha(opacity=50);
	opacity: 0.5;
	background:#000;
	color:#fff;
	text-decoration:none;
}
</style>
</head>
<body>
<div id="idGlideView">
	<div style="background-color:#006699;"> <a href="http://www.cnblogs.com/cloudgamer/">1111111</a> </div>
	<div style="background-color:#FF9933;"> <a href="http://www.cnblogs.com/cloudgamer/">2222222</a> </div>
	<div style="background-color:#9999FF;"> <a href="http://www.cnblogs.com/cloudgamer/">3333333</a> </div>
	<div style="background-color:#006699;"> <a href="http://www.cnblogs.com/cloudgamer/">1111111</a> </div>
	<div style="background-color:#FF9933;"> <a href="http://www.cnblogs.com/cloudgamer/">2222222</a> </div>
	<div style="background-color:#9999FF;"> <a href="http://www.cnblogs.com/cloudgamer/">3333333</a> </div>
</div>
<SELECT id=sel>
	<OPTION value=-1 selected>不展开</OPTION>
</SELECT>
<BR>
<BR>
<INPUT id=up type=button value=" + 加 速 ">
<INPUT id=down type=button value=" - 减 速 ">
<BR>
<BR>
<INPUT id=stop type=button value=" 停 止 ">
<INPUT id=start type=button value=" 开 始 ">
<BR>
<BR>
<INPUT id=close type=button value=" 关闭滚动 ">
<INPUT id=open type=button value=" 恢复滚动 ">
<BR>
<BR>
<INPUT id=auto type=button value=" 自动滑动 ">
<INPUT id=cancel type=button value=" 取消自动 ">
<BR>
<BR>
<INPUT id=hide type=button value=" 隐藏说明 ">
<INPUT id=show type=button value=" 显示说明 ">
<BR>
<BR>
<SCRIPT>
var gv = new GlideView("idGlideView", 1000, "div", 500, { TextTag: "a", TextHeight: 50 });
var oSel = $("sel");
for (var i = 0; i <= gv._count; i++) {
	var op = document.createElement("OPTION");
	op.value = i; op.innerHTML = "展开第" + (i + 1) + "个";
	oSel.appendChild(op);
}
oSel.onchange = function(){ gv.Set(oSel.value); }
$("up").onclick = function(){ gv.Step -= 5; if(gv.Step <= 0) gv.Step = 1; };
$("down").onclick = function(){ gv.Step += 5; if(gv.Step >= 500) gv.Step = 50; };
$("stop").onclick = function(){ clearTimeout(gv._timer); };
$("start").onclick = function(){ gv.Move(); };
$("close").onclick = function(){ gv.Step = 1; };
$("open").onclick = function(){ gv.Step = gv.options.Step; };
$("hide").onclick = function(){ gv.Showtext = false; };
$("show").onclick = function(){ gv.Showtext = true; };
var t = null, i = -1;
$("auto").onclick = function(){ clearInterval(t);t=setInterval(function(){ if(++i>gv._count) i=0; gv.Set(i); }, 1000); };
$("cancel").onclick = function(){ clearInterval(t);gv.Set(-1); };
</SCRIPT>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

一个横向滑动的图片切换容器代码

分类

图片代码

描述

与大家分享一个横向滑动的图片切换容器代码，开始实时加速、减速、关闭和恢复滚动、设置是否自动滑动，是否隐藏图片的文字说明等，实际上这种设定也就是再教你如何为这款代码设置某项功能，挺实用吧。

收藏