`
橄榄绿
  • 浏览: 277201 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS 幻灯片(左边大图右边小图)

JavaScript浏览器XHTMLPHP框架 
阅读更多

<!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>

 

</head>

<body onload-sideit()>

<div class="FocusImg">
<script type="text/javascript">
<!--
//配置参数
var TimeOut=5000,StartType="onmouseover"; //定义了幻灯切换时间为5000毫秒，并定义了事件名称为onmouseover，即鼠标悬停事件。
var imgUrl=[]; //定义不定长的图片地址数组变量
var imgSUrl=[]; //定义不定长的缩略图地址数组变量
var imgLink=[]; //定义不定长的图片链接地址数组变量
var imgtext=[]; //定义不定长的图片名称数组变量
var adNum=0; //定义当前显示的图片序号，并设置默认值为0

//以下对相关变量进行赋值
imgUrl[1]='01.JPG';//大图
imgSUrl[1]='01.JPG';//小图
imgtext[1]='<a href="01.jpg" target="_blank">图片一</a>';//标题（包含链接）
imgLink[1]='01.jpg';//大图链接

imgUrl[2]='02.jpg';//大图
imgSUrl[2]='02.jpg';//小图
imgtext[2]='<a href="02.jpg" target="_blank">图片二</a>';//标题（包含链接）
imgLink[2]='02.jpg';//大图链接

imgUrl[3]='03.jpg';//大图
imgSUrl[3]='03.jpg';//小图
imgtext[3]='<a href="03.jpg" target="_blank">图片三</a>';//标题（包含链接）
imgLink[3]='03.jpg';//大图链接

imgUrl[4]='04.jpg';//大图
imgSUrl[4]='04.jpg';//小图
imgtext[4]='<a href="04.jpg" target="_blank">图片四</a>';//标题（包含链接）
imgLink[4]='04.jpg';//大图链接

function changeimg(i){ //图片切换函数，此函数在鼠标在小图上悬停时将切换至该图片
adNum=i; //将当前显示的图片序号设为i，i是函数的参数（传入值）。
window.clearInterval(theTimer); //清除定时器
adNum=adNum-1; //将当前显示的图片序号减1 ，这样调用nextAd()时，刚v好是播放当前欲显示的那一张。
nextAd(); //播放下一张图片
}

function goUrl(){ //打开图片链接函数
window.open(imgLink[adNum],'_blank') ; //在新窗口中打开图片链接。
}

var count=0; //图片总数
for(i=1;i<imgUrl.length;i++){
if((imgUrl[i]!="")&&(imgLink[i]!="")&&(imgtext[i]!="")){ //图片地址、图片链接地址、图片名称不为空，即有效图片。
count++; //图片总数加1
}else{
break; //停止循环
}
}

function playTran(){ //开始切换图片
if(document.all){
   imgInit.filters.revealTrans.play();
}
}
var key=0;

function nextAd(){ //显示下一张图片函数
if(adNum<(imgUrl.length-1)){ //如果当前图片序号小于图片总数，则当前图片序号加1，否则为1，即设为第一张图片。
   adNum++;
}else{
   adNum=1;
}
if(key==0){
   key=1;
}else if(document.all){
   imgInit.filters.revealTrans.Transition=23; //设置幻灯切换样式
   imgInit.filters.revealTrans.apply(); //应用幻灯切换样式
   playTran(); //开始图片切换
}
document.images.imgInit.src=imgUrl[adNum]; //显示第adNum张大图
document.getElementById('FIJ_R_IB_'+adNum).className='id_FIJ_R_ImgBlk_On'; //设置第adNum张小图的样式名为'id_FIJ_R_ImgBlk_On'，即当前显示的图片的缩略图
for(var i=1;i<=count;i++){ //将其它缩略图的样式名改为'id_FIJ_R_ImgBlk'
   if(i!=adNum){
    document.getElementById('FIJ_R_IB_'+i).className='id_FIJ_R_ImgBlk';
   }
}
// document.getElementById('focustext').innerHTML=imgtext[adNum]; //设置当前图片的图片名称
document.getElementById('imgLink').href=imgLink[adNum]; //设置当前图片的图片链接地址
theTimer=setTimeout("nextAd()",TimeOut) //设置定时器，用于自动播放。
}

//以下为输出图片的显示框架。
document.write('<table width="520" height="300" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>');
document.write('<div id="FocusImg_JS">'); //最外面的容器
document.write('<div id="FIJ_L">'); //大图容器
document.write('<span><a id="imgLink" href="'+imgLink[1]+'" target="_blank"><img style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:void(0);" name="imgInit" width="400" height="312" alt=""/></a></span>'); //大图
//document.write('<p id="focustext" align="center">'+imgtext[1]+'</p><p id="focustextBg"></p>'); //图片名称与图片名称的半透明背景
document.write('</div>');
document.write('</td><td>');
document.write('<div id="FIJ_R">'); //小图容器
for(var i=1;i<imgUrl.length;i++){
document.write('<div id="FIJ_R_IB_'+i+'" class="id_FIJ_R_ImgBlk"><a href="'+imgLink[i]+'" '+StartType+'="javascript:changeimg('+i+')" target="_blank"><img src="'+imgSUrl[i]+'" width="120" height="75" alt=""/></a>'); //小图
document.write('</div>')
}
nextAd(); //开始图片切换
document.write('</div>');
document.write('</div>');
document.write(' </td></tr></table>');
//-->
</script>
<noscript>
<p>很抱歉，您的浏览器不支持<a href="http://www.iask.com/s?tag=n&k=Javascript是什么" target="_blank">Javascript</a>或您的浏览器<a href="http://iask.sina.com.cn/search_engine/search_knowledge_engine.php?key=禁止运行Javascript" target="_blank">禁止运行Javascript</a>，请使用支持<a href="http://www.iask.com/s?tag=n&k=Javascript是什么" target="_blank">Javascript</a>的浏览器浏览本页，获得最佳浏览体验。</p>
</noscript>
</div>


</body>
</html>

分享到：
| 转载：Java 学习网站汇总贴
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js图片幻灯片 jquery幻灯片图片 html幻灯片案例

    JavaScript图片幻灯片是一种在网页上展示图片轮播效果的技术，通常用于网站的首页或产品展示部分，以吸引用户注意力并提高用户体验。jQuery是JavaScript的一个库，它简化了DOM操作、事件处理和动画效果，因此在创建...

    原生js制作鼠标滚动幻灯片图片放大缩小_酷炫的3D幻灯片特效

    在本项目中，我们探讨了如何使用原生JavaScript来创建一个具有鼠标滚动功能的3D幻灯片效果，其中图片可以随着滚动放大和缩小，营造出一种酷炫的视觉体验。这种技术通常用于网站设计，以提升用户体验和交互性。 首先...

    原生js图片倒影幻灯片切换效果

    在本文中，我们将深入探讨如何使用原生JavaScript实现图片倒影幻灯片切换效果，这是一种在网页设计中常用于展示动态图像序列的方式。这个效果既酷炫又实用，能够吸引用户的注意力并提升用户体验。虽然这个效果并非...

    js简单幻灯片 javascript简单幻灯片 兼容浏览器

    JavaScript幻灯片是一种常见的网页动态效果，用于展示一系列图片、文本或其他内容，通过滑动或自动切换的方式增强用户体验。在创建一个兼容各种浏览器的JavaScript幻灯片时，我们需要考虑的关键知识点包括DOM操作、...

    jQuery+swiper.js幻灯片图片视差滚动轮播特效

    **jQuery + Swiper.js 幻灯片图片视差滚动轮播特效详解** 在网页设计中，动态效果常常能提升用户体验，使网站更具吸引力。"jQuery + Swiper.js 幻灯片图片视差滚动轮播特效"就是一种常用的技术，它结合了jQuery库的...

    js实现点击右侧小图左侧显示大图带控制按钮

    这个需求可以通过JavaScript实现，让点击右侧的小图能够在左侧显示大图，并且附带控制按钮，以方便用户进行切换或关闭。下面我们将详细探讨如何使用JavaScript来实现这一功能。 首先，我们需要在HTML中构建页面结构...

    用js控制的图片幻灯片

    如果需求更复杂，可以考虑使用现成的JavaScript幻灯片插件，如Slick、Swiper等，它们提供了丰富的选项和自定义功能。 总结来说，使用JavaScript实现图片幻灯片涉及到HTML结构、CSS样式、JavaScript逻辑以及可能的...

    javascript图片幻灯片效果显示

    在网页设计中，动态效果是吸引用户注意力的重要手段之一，其中图片幻灯片效果就是一种常见且实用的设计。本文将详细介绍如何使用JavaScript实现这一效果，包括核心原理、关键代码以及实际应用。 首先，图片幻灯片...

    jQuery图像幻灯片大小图切换.zip

    在这个幻灯片效果中，可能用到淡入淡出效果来平滑地切换大图。 4. **数据管理**：存储图片的路径和对应的小图索引，以便于在点击小图时快速找到对应的大图。 5. **定时器**：通过`.setInterval()`设置定时器，周期...

    jquery自适应图片大小幻灯片

    在创建“jquery自适应图片大小幻灯片”时，我们需要掌握几个关键知识点，这些知识点将帮助我们构建一个既美观又功能强大的图片轮播组件。 首先，了解jQuery基础是必要的。jQuery库通过链式调用、选择器和方法提供了...

    js幻灯片效果

    JavaScript幻灯片效果是网页设计中常见的一种动态展示方式，尤其在现代网页和移动应用中广泛应用。本项目基于jQuery库，旨在实现一个兼容电脑端和手机端的幻灯片切换功能，确保用户无论是在台式机还是移动设备上都能...

    js幻灯片和图片缓冲

    JavaScript幻灯片与图片缓冲是网页动态效果设计中常见的技术，它们主要用于提升用户体验，使得页面中的图片或内容能够平滑地切换，同时避免了大图片加载时造成的页面卡顿。以下将详细介绍这两种技术及其实现方法。 ...

    大屏图片幻灯片代码.zip_大屏图片幻灯片代码

    幻灯片通常由多个图片或内容面板组成，通过JavaScript的控制在页面上按照特定顺序展示。 `index.jpg`很可能是幻灯片中的一张示例图片，用于测试代码的正确性。在实际应用中，这个位置可能会放置多张不同图片，以...

    js带缩略图上下滚动幻灯片，大图尺寸480x200

    在这个上下滚动幻灯片中，我们可能需要操作的DOM元素包括幻灯片容器、大图以及缩略图列表。 接下来，我们要设计一个结构合理的HTML结构。一个简单的实现可以是这样的： ```html &lt;!-- ... 更多缩略图...

    网站首页js幻灯片代码.rar

    本压缩包“网站首页js幻灯片代码.rar”提供了一套完整的JavaScript幻灯片解决方案，适用于增强用户体验，使网页内容更加生动活泼。 在网页设计中，JavaScript是一种强大的客户端脚本语言，它可以实现在不刷新整个...

    几种好看的幻灯片JS效果

    缩略图幻灯片效果允许用户通过预览小图选择要查看的大图。这种效果通常包括一个主幻灯片区域和一个展示所有幻灯片缩略图的侧边栏。当用户点击缩略图时，相应的主幻灯片会切换到对应的大图。这种效果可以通过创建...

    swiper插件点击图片查看大图幻灯片效果可左右轮播切换代码

    swiper插件点击图片查看大图幻灯片效果可左右轮播切换代码，swiper选项卡，swiper滚动，swiper放大

    js幻灯片切换

    在本案例中，"js幻灯片切换"是一个使用JavaScript编写的插件，用于实现网页上的图片或内容幻灯片效果，即自动滚动或切换缩略图展示。这种效果常见于网站的首页，可以吸引用户的注意力，展示多份信息而无需占据大量...

    幻灯片形式查看图片多个例子

    在IT领域，尤其是在网页开发和用户体验设计中，"幻灯片形式查看图片"是一种常见的功能，它允许用户以序列化的方式浏览多张图片，类似于实际的幻灯片展示。这种技术通常结合JavaScript（js）来实现动态效果，提高用户...

    JS图片幻灯片实例.rar

    在本实例中，“JS图片幻灯片”是利用JavaScript实现的一种动态展示图片的效果，通常用于网站的首页或者产品展示区，能够吸引用户的注意力并提供良好的用户体验。 在创建一个JS图片幻灯片时，主要涉及以下几个核心...

Magicbox
Global site tag (gtag.js) - Google Analytics