wzg489326
- 浏览: 48056 次
- 性别:
- 来自: 北京
-
最新评论
<!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 4339InternetExplorer.Applicatio ... -
jquery -toggle
2010-06-25 12:23 0<body> <div> ... -
学习jQuery之animate
2010-03-31 13:17 2290学习 animate 记录下，备忘。 <!DOCT ... -
模拟旋转
2009-01-19 12:51 872<!DOCTYPE HTML PUBLIC &quo ... -
运动雏形
2009-01-18 13:09 754<!DOCTYPE HTML PUBLIC &quo ... -
学习 JavaScript 记录一下
2009-01-08 10:34 917<html> <head> ... -
JavaScript 学习<状态列>
2008-10-27 15:27 828<html> <head> ... -
表针式时钟
2008-10-15 13:09 836在电脑上看到前辈留下的资料。保存下看看，稍作了调整。 &l ... -
JavaScript 学习（五）
2008-10-09 14:23 903ziggy_js.dom=function(){ ... -
JavaScript学习（四）
2008-10-09 10:25 742为了防止发生命名冲突，可以建立自己的代码库。 就想 ... -
JavaScript 学习（三）
2008-10-08 16:24 753<html> <head> ... -
JavaScript 学习（二）
2008-10-08 16:10 803JavaScript中类的学习，从基本类继承过来方法 也可以这 ... -
JavaScript 学习（一）
2008-10-08 11:26 943创建一个对象 <script type=" ... -
时间格式
2008-09-10 11:26 0<fmt:formatDate value=&quo ...
相关推荐
根据提供的信息，我们可以总结出以下关于“JS图片切换”的知识点： ### 一、JS图片切换的概念 JavaScript（简称JS）是一种轻量级的编程语言，它被广泛应用于Web开发中，用于实现网页上的动态效果。JS图片切换是指...
JavaScript图片切换效果是一种常见的网页动态展示技术，常用于制作轮播图、相册或产品展示等。这种效果可以通过JavaScript库，如jQuery，或者原生JavaScript实现。本资源"JavaScript图片切换效果.rar"提供了一个实例...
JavaScript图片切换特效是一种常见的网页动态效果，用于展示一组图片并以特定的方式进行切换，提高用户体验，增加网站的吸引力。在网页设计中，这种特效通常应用于相册、广告轮播或产品展示等场景。本文将深入探讨...
这个“JavaScript图片切换展示效果.rar”压缩包文件包含了一个使用纯JavaScript实现的图片自动切换功能，旨在帮助开发者了解如何在不依赖外部库如jQuery或Bootstrap的情况下创建这种效果。 首先，我们需要理解...
JavaScript图片切换的核心在于通过JavaScript函数来控制DOM元素（通常是`<img>`标签）的显示和隐藏。在提供的SlideTrans文件中，可能包含了实现这一功能的JavaScript代码、HTML结构和可能的CSS样式。以下是一些关于...
"FLASH图片切换"和"javascript图片切换"是两种常用的技术手段，各有其特点和适用场景。 首先，我们来谈谈“FLASH图片切换”。Flash是一种由Adobe公司开发的多媒体创作平台，它曾广泛用于创建动画、交互式内容和网页...
启明星JS图片切换系统是一款基于JavaScript的动态焦点图展示解决方案，专为ASP.NET环境设计。该系统的核心功能是实现网页上图片的自动轮播和手动切换，为网站增添视觉吸引力，提升用户体验。以下是对该系统及其相关...
在JavaScript编程中，图片切换效果是一种常见的网页交互功能，它为用户提供了一种动态浏览多张图片的方式。在本文中，我们将深入探讨如何使用JavaScript实现图片切换的“上一张”和“下一张”功能。 首先，我们需要...
简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换
"js图片切换，点击切换"这一主题涉及到JavaScript（简称JS）技术在实现动态图片展示中的应用。JavaScript是一种广泛使用的客户端脚本语言，它允许我们通过用户的交互（如点击事件）来改变页面内容，提供更丰富的用户...
"js图片切换轮换效果swf版"是一个专为网页设计打造的JavaScript组件，它能够实现多张图片在页面上自动循环播放的效果，为浏览者带来视觉上的动态体验。这种效果在网站的首页、产品展示或滑块部分尤为常见。 ...
JavaScript图片切换滑动效果是一种常见的网页动态展示技术，它通过编程方式实现图片的平滑过渡，为用户带来更丰富的视觉体验。在网页设计中，这种效果通常用于相册、产品展示或者广告轮播等场景。以下将详细讲解实现...
在"90个js图片切换代码"这个资源包中，很可能包含了多种不同的图片轮播或幻灯片展示的实现方式，这些都是网页设计中常用的元素，能够提升用户体验，吸引用户注意力。 1. **基础概念**： - **图片切换**：是指在...
首先，我们要了解JavaScript图片切换的基础概念。在网页上，图片通常由HTML的`<img>`标签来显示，而JavaScript则可以用来操作这些元素，实现动态效果。图片切换可以通过改变`<img>`标签的`src`属性，或者使用CSS来...
首先，我们需要理解JavaScript图片切换的基本原理。通常，这种特效是通过动态改变HTML中的图片源（`src`属性）或者使用CSS来改变图片的显示状态来实现的。当用户点击或触发某种事件时，JavaScript代码会执行相应的...
JavaScript图片切换展示效果是网页设计中常见的功能，用于在页面上动态展示多张图片，提升用户体验。这种效果可以通过JavaScript编程语言实现，结合HTML和CSS来完成。本项目中包含了一个简单的图片轮播示例，我们...
JavaScript图片切换是一种常见的网页动态效果，它允许用户在多个图像之间进行平滑过渡，从而提升用户体验，尤其是在展示产品图片或创建幻灯片展示时。在这个主题中，我们将深入探讨JavaScript如何实现图片切换，并...
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，...总的来说，JavaScript图片切换特效的实现方式多样，可以根据项目需求选择合适的方法。熟练掌握这一技巧，可以让你的网页更加吸引人，提升用户体验。