TechHUB - 实用代码 - Javascript - CSS+JS的图片幻灯效果

≡ 推荐 ≡
≡ 热点 ≡
CSS+JS的图片幻灯效果

作者：未知， 来源：网络， 阅读：205， 发布时间：2014-05-10
代码：【复制】 
<!DOCTYPE html PUBliC "-//W3C//DTD html 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片切换效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#bgf {
	background:#313439; 
	overflow: hidden; 
}
#slider {
	padding:2px 2px 2px 2px;
	height:200px;
	font-size: 12px; 
}
#slider a:hover {
	text-decoration: none;
}
#slider ul {
	padding:0px;
	margin:0px;
	list-style: none;
}
#slider li {
}
#slider_pic {
	display: inline; 
	float: left; 
	overflow: hidden; 
	width: 280px; 
	height: 170px;
	position: relative; 
}
#slider_piclist {
	float:left;
	position: absolute;
	height: 170px;
}
#slider_piclist li {
	overflow: hidden; 
}
#slider_piclist img {
	width: 280px;
	height: 170px;
}
#slider_btn {
	float: right; 
	width: 220px;
	height: 170px;
}
#slider_btn li {
	margin-left:2px; 
	cursor: pointer; 
	height: 22px; 
	text-align:left;
}
#bin333 {
	padding:3px;
	overflow: hidden; 
	width: 190px; 
	line-height: 22px; 
	white-space: nowrap; 
	text-overflow: ellipsis;
}
#bin333 a {
	padding:0px 0px 0px 4px;
	color:#fff;
}
#slider_btn img {
	border:2px solid #fff;
	vertical-align: middle; 
	width: 44px; 
	height: 22px; 
	filter: alpha(opacity=55); 
	moz-opacity: 0.55; 
	opacity: 0.55;
}
#slider_btn .current {
	background: #97cf50; 
	color: #396105;
}
#slider_btn .current a {
	font-weight: bold; 
	color: #396105; 
	text-decoration: none;
}
#slider_btn .current a:hover {
	font-weight: bold; 
	color: #000; 
	text-decoration: none;
}
#slider_btn .current img {
	filter: alpha(opacity=100); 
	moz-opacity: 1; 
	opacity: 1;
}
#slider_opdiv {
	background:#440000; 
	height: 40px; 
}
#slider_txt {
	clear:both;
	color: #333; 
	background:#fff;
	margin-top:3px;
	padding:3px 3px 0px 3px;
	height:33px;
	overflow:hidden;
}
#slider_txt li {
	line-height: 16px;
}
#slider_txt li strong {
	color: #ffcc00;
}
#slider_txt .normal {
	display: none;
}
</style>
<script type="text/javascript">
<!--
function $(id) {return document.getElementById(id);}

function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} 
	else {
		window.onload = function(){
			oldonload();
			func();
		}
	}
}

function moveElement(elementID,final_x,final_y,interval) {
	if (!document.getElementById) return false;
	if (!document.getElementById(elementID)) return false;
	var elem = document.getElementById(elementID);
	if (elem.movement) {
		clearTimeout(elem.movement);
	}
	if (!elem.style.left) {
		elem.style.left = "0px";
	}
	if (!elem.style.top) {
		elem.style.top = "0px";
	}
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if (xpos == final_x && ypos == final_y) {
		return true;
	}
	if (xpos < final_x) {
		var dist = Math.ceil((final_x - xpos)/10);
		xpos = xpos + dist;
	}
	if (xpos > final_x) {
		var dist = Math.ceil((xpos - final_x)/10);
		xpos = xpos - dist;
	}
	if (ypos < final_y) {
		var dist = Math.ceil((final_y - ypos)/10);
		ypos = ypos + dist;
	}
	if (ypos > final_y) {
		var dist = Math.ceil((ypos - final_y)/10);
		ypos = ypos - dist;
	}
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
	elem.movement = setTimeout(repeat,interval);
}

function classNormal(iFocusBtnID,iFocusTxID){
	var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
	var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
	for(var i=0; i<iFocusBtns.length; i++) {
		iFocusBtns[i].className='normal';
		iFocusTxs[i].className='normal';
	}
}

function classCurrent(iFocusBtnID,iFocusTxID,n){
	var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
	var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
	iFocusBtns[n].className='current';
	iFocusTxs[n].className='current';
}

function iFocusChange() {
	if(!$('slider')) return false;
	$('slider').onmouseover = function(){atuokey = true};
	$('slider').onmouseout = function(){atuokey = false};
	var iFocusBtns = $('slider_btn').getElementsByTagName('li');
	var listLength = iFocusBtns.length;
	iFocusBtns[0].onmouseover = function() {
		moveElement('slider_piclist',0,0,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',0);
	}
	if (listLength >= 2) {
		iFocusBtns[1].onmouseover = function() {
			moveElement('slider_piclist',0,-175,5);
			classNormal('slider_btn','slider_txt');
			classCurrent('slider_btn','slider_txt',1);
		}
	}
	if (listLength >= 3) {
		iFocusBtns[2].onmouseover = function() {
			moveElement('slider_piclist',0,-348,5);
			classNormal('slider_btn','slider_txt');
			classCurrent('slider_btn','slider_txt',2);
		}
	}
	if (listLength >= 4) {
		iFocusBtns[3].onmouseover = function() {
			moveElement('slider_piclist',0,-520,5);
			classNormal('slider_btn','slider_txt');
			classCurrent('slider_btn','slider_txt',3);
		}
	}
	if (listLength >= 5) {
		iFocusBtns[4].onmouseover = function() {
			moveElement('slider_piclist',0,-695,5);
			classNormal('slider_btn','slider_txt');
			classCurrent('slider_btn','slider_txt',4);
		}
	}
	if (listLength >= 6) {
		iFocusBtns[5].onmouseover = function() {
			moveElement('slider_piclist',0,-868,5);
			classNormal('slider_btn','slider_txt');
			classCurrent('slider_btn','slider_txt',5);
		}
	}
}

setInterval('AutoSlider()',5000);
var atuokey = false;
function AutoSlider() {
	if(!$('slider')) return false;
	if(atuokey) return false;
	var focusBtnList = $('slider_btn').getElementsByTagName('li');
	var listLength = focusBtnList.length;
	for(var i=0; i<listLength; i++) {
		if (focusBtnList[i].className == 'current') var currentNum = i;
	}
	if (currentNum==0&&listLength!=1 ){
		moveElement('slider_piclist',0,-175,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',1);
	}
	if (currentNum==1&&listLength!=2 ){
		moveElement('slider_piclist',0,-348,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',2);
	}
	if (currentNum==2&&listLength!=3 ){
		moveElement('slider_piclist',0,-520,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',3);
	}
	if (currentNum==3&&listLength!=4 ){
		moveElement('slider_piclist',0,-695,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',4);
	}
	if (currentNum==4&&listLength!=5 ){
		moveElement('slider_piclist',0,-868,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',5);
	}
	if (currentNum==5 ){
		moveElement('slider_piclist',0,0,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',0);
	}
	if (currentNum==1&&listLength==2 ){
		moveElement('slider_piclist',0,0,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',0);
	}
	if (currentNum==2&&listLength==3 ){
		moveElement('slider_piclist',0,0,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',0);
	}
	if (currentNum==3&&listLength==4 ){
		moveElement('slider_piclist',0,0,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',0);
	}
	if (currentNum==4&&listLength==5 ){
		moveElement('slider_piclist',0,0,5);
		classNormal('slider_btn','slider_txt');
		classCurrent('slider_btn','slider_txt',0);
	}
}
addLoadEvent(iFocusChange);

//-->
</script>
</head>
<body>
<table cellpadding="3" cellspacing="1" align="center" border="0" bgcolor="">
	<tr>
		<td width="505" align="left" valign="top" bgcolor="#999999">
		<div id="bgf">
			<!--首页图片调用-->
			<div id="slider">
				<div id="slider_pic">
					<div id="slider_piclist">
						<ul>
							<li><a href="http://img.autohome.com.cn/Shows/2007/4/26/car-26-10-53-49-273629091.jpg"><img alt="福特 野马 2007上海车展" src="http://img.autohome.com.cn/Shows/2007/4/26/car-26-10-53-49-273629091.jpg" border=0></a></li>
							<li><a href="http://www.yxqcc.com/admin/uploadpic/200676143220DSCN0243.JPG"><img alt="上海车展美女" 
							src="http://www.yxqcc.com/admin/uploadpic/200676143220DSCN0243.JPG" border=0></a></li>
							<li><a href="http://www.qlwsq.cn/duovbbs/upload/1418-1-1.jpg"><img alt="(上海车展图片)香车美女" src="http://www.qlwsq.cn/duovbbs/upload/1418-1-1.jpg" border=0></a></li>
							<li><a href="http://auto.tom.com/dimg/2009/0424/img-1242154404370.jpg"><img alt="2009上海车展十大最漂亮车模" 
							src="http://auto.tom.com/dimg/2009/0424/img-1242154404370.jpg" border=0></a></li>
							<li><a href="http://content.metroer.com/files/2009/04/150.jpg"><img alt="2009年上海车展车模" src="http://content.metroer.com/files/2009/04/150.jpg" border="0"></a></li>
							<li><a href="http://hiphotos.baidu.com/lavy/pic/item/086fa534e440b894d1a2d375.jpg"><img alt="2009年上海车展车模" src="http://hiphotos.baidu.com/lavy/pic/item/086fa534e440b894d1a2d375.jpg" border="0"></a></li>
						</ul>
					</div>
					<!-- <div id="slider_opdiv"></div> -->
				</div>
				<div id="slider_btn">
					<ul>
						<li class="current"><div id="bin333"><a href="http://img.autohome.com.cn/Shows/2007/4/26/car-26-10-53-49-273629091.jpg">福特 野马 2007上海车展</a></div></li>
						<li class="normal"><div id="bin333"><a href="http://www.yxqcc.com/admin/uploadpic/200676143220DSCN0243.JPG">上海车展美女</a></div></li>
						<li class="normal"><div id="bin333"><a href="http://www.qlwsq.cn/duovbbs/upload/1418-1-1.jpg">(上海车展图片)香车美女</a></div></li>
						<li class="normal"><div id="bin333"><a href="http://auto.tom.com/dimg/2009/0424/img-1242154404370.jpg">2009上海车展十大最漂亮车模</a></div></li>
						<li class="normal"><div id="bin333"><a href="http://content.metroer.com/files/2009/04/150.jpg">2009年上海车展车模(美女)</a></div></li>
						<li class="normal"><div id="bin333"><a href="http://hiphotos.baidu.com/lavy/pic/item/086fa534e440b894d1a2d375.jpg">2009年上海车展车模(汽车)</a></div></li>
					</ul>
				</div>
				<div id="slider_txt">
					<ul>
						<li class="current"><strong>福特 野马 2007上海车展</strong>
福特 野马 2007上海车展福特 野马 2007上海车展福特 野马 2007上海车展福特 野马 2007上海车展福特 野马 2007上海车展... </li>
						<li class="normal"><strong>上海车展美女</strong>
上海车展美女上海车展美女上海车展美女上海车展美女... </li>
						<li class="normal"><strong>(上海车展图片)香车美女</strong>
(上海车展图片)香车美女(上海车展图片)香车美女... </li>
						<li class="normal"><strong>2009上海车展十大最漂亮车模</strong>
我这里介绍的是2009上海车展十大最漂亮车模,2009上海车展十大最漂亮车模,2009上海车展十大最漂亮车模... </li>
						<li class="normal"><strong>2009年上海车展车模(美女)</strong>
2009年上海车展车模2009年上海车展车模2009年上海车展车模... </li>
						<li class="normal"><strong>2009年上海车展车模(汽车)</strong>
2009年上海车展车模2009年上海车展车模2009年上海车展车模2009年上海车展车模2009年上海车展车模2009年上海车展车模... </li>
					</ul>
				</div>
			</div>
			<!--/首页图片调用-->
		</div>
		</td>
	</tr>
</table>
</body>
</html>
标签：CSS JS 幻灯
以下是用户评论查看全部评论