wzg489326
- 浏览: 47090 次
- 性别:
- 来自: 北京
-
最新评论
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.slip{display:none;border:solid 1px #aaddff;border-top-width:0; padding-top:10px}
.active{display:block}
.topItem{float:left; background:url(./images/jrw1_04.gif) no-repeat; width:77px; height:22px;line-height:22px;color:#2f82fb}
.top{height:21px; background-color:#ebf5fa; border:solid 1px #c3e1f0; border-bottom-width:0; padding-left:15px; padding-top:2px}
.top .active{background-image:url(./images/jrw1_03.gif);color:red}
/*滚动图演示*/
#pic-scroller{position:relative;background:#000;width:260px;overflow:hidden;}
#pic-scroller #imgs{height:200px}
#pic-scroller .img_item{display:none}
#pic-scroller #imgs img {border:none}
#pic-scroller .clickButton{float:right;height:14px;line-height:14px;font-size:10px}
#pic-scroller .clickButton span{cursor:pointer;background-color: #666;line-height:14px;height:14px;font-size:10px;padding: 0 6px;color: #fff;display:inline-block}
#pic-scroller .clickButton span.active{background-color: #d34600;opacity:0.6;display:inline-block}
#pic-scroller #panel-content{position:absolute;bottom:10px;height:30px}
#pic-scroller .over-show{color:#fff;font-size:14px;text-align:center;background:#d34600;opacity:0.6;clear:both;display:none}
#pic-scroller .over-show a{color:#fff;font-weight:bold}
#pic-scroller .clickButton div{background:#000;opacity:0.6}
#pic-scroller .active{display:block}
</style>
</head>
<body>
<div style="width:512px; height:400px; font-size:12px;">
<div style="border:1px solid #9cb9e7; text-align:center; padding-bottom:2px;">
<div style="width:507px; padding-top:2px;">
<div class="top">
<div class="topItem active" onmouseover="showNext(0)">资讯</div>
<div class="topItem" onmouseover="showNext(1)">游戏</div>
<div class="topItem" onmouseover="showNext(2)">购物</div>
<div style="clear:both"></div>
</div>
<div style="" class="slip active">
the first 资讯
<div style="clear:both"></div>
</div>
<div class="slip">
中间
<div style="clear:both"></div>
</div>
<div class="slip">
最后
<div style="clear:both"></div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<script type="text/javascript">
function showNext(index){
var slips=getElementsByClassName('slip');
var topItem=getElementsByClassName('topItem');
activeItem(topItem,index);
activeItem(slips,index);
}
function activeItem(elementArray,index){
if(elementArray[index].className.indexOf("active")==-1){
elementArray[index].className+=" active";
}
for(var i=0;i<elementArray.length;i++){
if(i!=index){
removeClassName(elementArray[i],'active')
}
}
}
function removeClassName(element,classname){
var theClassName;
do{
theClassName=element.className;
element.className=theClassName.replace(classname, " ")
}while(theClassName.indexOf(classname)>=0);
}
function getElementsByClassName(className, parentElement){
var elems = (parentElement||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
result.push(j);
}
}
return result;
}
</script>
<div id="pic-scroller">
<div id="imgs">
<a href="#" class="img_item active"><img src="00.jpg" alt='00.jpg'/></a>
<a href="#" class="img_item"><img src="01.jpg" alt='01.jpg'/></a>
<a href="#" class="img_item"><img src="02.jpg" alt='02.jpg'/></a>
<a href="#" class="img_item"><img src="03.jpg" alt='03.jpg'/></a>
</div>
<div id="panel-content">
<div class="clickButton">
<span class="b_item active" onmouseover="stopval(0,0)" onmouseout="stopval(0,1)">1</span>
<span class="b_item" onmouseover="stopval(1,0)" onmouseout="stopval(1,1)">2</span>
<span class="b_item" onmouseover="stopval(2,0)" onmouseout="stopval(2,1)">3</span>
<span class="b_item" onmouseover="stopval(3,0)" onmouseout="stopval(3,1)">4</span>
</div>
<div class="over-show active"><a href="#">img222</a></div>
<div class="over-show"><a href="#">img333</a></div>
<div class="over-show"><a href="#" >img444</a></div>
<div class="over-show"><a href="#">img555</a></div>
</div>
</div>
<script type="text/javascript">
var imgArray = getElementsByClassName("img_item");
var showArray =getElementsByClassName("over-show");
var buttonArray=getElementsByClassName("b_item");
var size=imgArray.length;
var interval;
function scroller(opt) {
var pic_scroller=document.getElementById("pic-scroller");
var img_id=document.getElementById("imgs");
pic_scroller.style.width = (opt.width ? opt.width : 300)+'px';
img_id.style.height = (opt.img_height ? opt.img_height : 200)+'px';
var width=pic_scroller.style.width;
for(var i=0;i<showArray.length;i++){
showArray[i].style.width=width;
}
var times = 1;
interval = window.setInterval(function() {
if (times == size ) {
times = 0;
}
changeImage(times++);
}, 2000);
}
function changeImage(times) {
if(imgArray[times].className.indexOf("active")==-1){
imgArray[times].className+=" active";
}
if(showArray[times].className.indexOf("active")==-1){
showArray[times].className+=" active";
}
if(buttonArray[times].className.indexOf("active")==-1){
buttonArray[times].className+=" active";
}
for(var i=0;i<size;i++){
if(i!=times){
removeClassName(imgArray[i],'active');
removeClassName(showArray[i],'active');
removeClassName(buttonArray[i],'active');
}
}
}
function stopval(index,type){
if(type==0){
clearInterval(interval);
changeImage(index);
}else{
clearInterval(interval);
index+=1;
interval = window.setInterval(function() {
if (index == size ) {
index = 0;
}
changeImage(index++);
}, 2000);
}
}
scroller({width:190,img_height:230});
</script>
</body>
</html>
分享到：
发表评论
-
[转]（autoit 学习）InternetExplorer.Application对象的Documen属性
2010-10-11 10:35 4309InternetExplorer.Applicatio ... -
jquery -toggle
2010-06-25 12:23 0<body> <div> ... -
学习jQuery之animate
2010-03-31 13:17 2257学习 animate 记录下，备忘。 <!DOCT ... -
模拟旋转
2009-01-19 12:51 847<!DOCTYPE HTML PUBLIC &quo ... -
运动雏形
2009-01-18 13:09 733<!DOCTYPE HTML PUBLIC &quo ... -
学习 JavaScript 记录一下
2009-01-08 10:34 887<html> <head> ... -
JavaScript 学习<状态列>
2008-10-27 15:27 801<html> <head> ... -
表针式时钟
2008-10-15 13:09 805在电脑上看到前辈留下的资料。保存下看看，稍作了调整。 &l ... -
JavaScript 学习（五）
2008-10-09 14:23 871ziggy_js.dom=function(){ ... -
JavaScript学习（四）
2008-10-09 10:25 716为了防止发生命名冲突，可以建立自己的代码库。 就想 ... -
JavaScript 学习（三）
2008-10-08 16:24 731<html> <head> ... -
JavaScript 学习（二）
2008-10-08 16:10 774JavaScript中类的学习，从基本类继承过来方法 也可以这 ... -
JavaScript 学习（一）
2008-10-08 11:26 909创建一个对象 <script type=" ... -
时间格式
2008-09-10 11:26 0<fmt:formatDate value=&quo ...
相关推荐
js 图片切换 点击切换上一张下一张效果
js 图片切换js 图片切换js 图片切换js 图片切换js 图片切换js 图片切换
js 图片切换特效js 图片切换特效js 图片切换特效
简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换
JavaScript图片切换展示效果
JavaScript图片切换效果 演示地址：http://down.admin5.com/demo/code_pop/4/50/
摘要:网页素材,焦点幻灯,JS图片切换,焦点图 仿腾讯网的JS图片切换效果，或者叫做焦点图幻灯切换，觉得做的挺不错，这里推荐给大家。 两款图片切换效果，一款是水平切换，另一款是纵向切换，大家可根据自己的...
javascript图片切换，可设置切换方式
相当好的JS图片切换效果代码。当前流行的图片切换。
1.图片切换效果有以下几种：随机切换 4格纵向百叶窗 16格横向百叶窗 由里至外逐渐放大 中间向左右两边逐渐放大 中间向上下两边逐渐放大 由上至下落幕 由左至右 由左上至右下 由右下至左上 8格纵向百叶窗 8格纵向百叶...
JS 图片切换效果 图片轮播 支持火狐
asp源码—Flash+JS图片切换轮换特效ASP读取数据库版.zip asp源码—Flash+JS图片切换轮换特效ASP读取数据库版.zip asp源码—Flash+JS图片切换轮换特效ASP读取数据库版.zip asp源码—Flash+JS图片切换轮换特效ASP读取...
JavaScript图片切换展示效果,效果非常好
div+css+js图片切换（淡入浅出效果）
js点击图片切换，每点击，图片向一个方向移动更容易显示更多的图片，图片上有链接
90个js图片切换代码，效果很好，值得你拥有
多种js图片切换效果 js图片切换效果 图片循环切换效果
网站常用的js图片切换，1234图片切换js，最常用的js切换效果。