`

带缩略图的图片轮换代码

JavaScript 
阅读更多

<style>
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; COLOR: #f6f6ee; MARGIN-RIGHT: auto; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 490px; TEXT-ALIGN: center
}
A {
 COLOR: #fff; TEXT-DECORATION: none
}
A:hover {
 COLOR: #fff; TEXT-DECORATION: underline
}
.fpic {
 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 3; BACKGROUND: #000;  BORDER-BOTTOM-WIDTH: 0px; WIDTH: 476px; POSITION: relative; HEIGHT: 330px; BORDER-RIGHT-WIDTH: 0px;BORDER: #dddddd 1px solid;
text-align:center
}
.bpic {
 FLOAT: left; MARGIN: 0px; WIDTH: 244px; POSITION: relative; HEIGHT: 243px
}
#focpic {
 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 1px; BORDER-BOTTOM-WIDTH: 0px; POSITION: absolute; TOP: 1px; BORDER-RIGHT-WIDTH: 0px
}
.thubpic {
 PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px
}
.thubpiccur {
 PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px
}
.thubpiccur {
 Z-INDEX: 30; BACKGROUND: url(icon/images20071220/arrow3.gif) no-repeat left 50%
}
.thubpic IMG {
 BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px
}
.thubpiccur IMG {
 BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px
}
.thubpiccur IMG {
 BORDER-LEFT-COLOR: #fff; BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BORDER-RIGHT-COLOR: #fff
}
-->
</style>
<SCRIPT language=javascript>
//all by www.网址.com
var currslid = 0;
var slidint;
function setfoc(id){
 document.getElementById("focpic").src = picarry[id];
 document.getElementById("foclnk").href = lnkarry[id];
 document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
 currslid = id;
 for(i=0;i<6;i++){
  document.getElementById("tmb"+i).className = "thubpic";
 };
 document.getElementById("tmb"+id).className ="thubpiccur";
 focpic.style.visibility = "hidden";
 focpic.filters[0].Apply();
 if (focpic.style.visibility == "visible") {
  focpic.style.visibility = "hidden";
  focpic.filters.revealTrans.transition=23;
 }
 else {
  focpic.style.visibility = "visible";
  focpic.filters[0].transition=23;
 }
 focpic.filters[0].Play();
 stopit();
}
function playnext(){
 if(currslid==5){
  currslid = 0;
 }
 else{
  currslid++;
 };
 setfoc(currslid);
 playit();
}
function playit(){
 slidint = setTimeout(playnext,4500);
}
function stopit(){
 clearTimeout(slidint);
 }
window.onload = function(){
 playit();
}
</SCRIPT>
</head>
<body>
<DIV class=fpic>
<A id=foclnk href="http://www.网址.com/" target=_blank><IMG id=focpic style="FILTER: RevealTrans ( duration = 1，transition=23 ); VISIBILITY: visible; POSITION: absolute" height=300 alt="" src="/edu/img/js/200909/1.jpg" width=400></A>
<DIV id=fttltxt
style="MARGIN-TOP: 305px; FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center"><A
href="http://www.网址.com/" target=_blank>梦：牧场小屋</A></DIV>
<DIV style="MARGIN-LEFT: 402px; WIDTH: 65px">
<DIV class=thubpiccur id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><A
href="http://www.网址.com/" target=_blank><IMG
src="http://www.3lian.com/edu/img/js/200909/1.jpg" alt="" width=56 height=42 border="0"></A></DIV>
<DIV class=thubpic id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><A
href="http://www.网址.com/" target=_blank><IMG height=45 alt=""
src="http://www.3lian.com/edu/img/js/200909/2.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><A
href="http://www.网址.com/" target=_blank><IMG height=45 alt=""
src="http://www.3lian.com/edu/img/js/200909/3.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><A
href="http://www.网址.com/" target=_blank><IMG height=45 alt=""
src="http://www.3lian.com/edu/img/js/200909/4.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><A
href="http://www.网址.com/" target=_blank><IMG height=45 alt=""
src="http://www.3lian.com/edu/img/js/200909/5.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb5 onmouseover=setfoc(5); onmouseout=playit();><A
href="http://www.网址.com/" target=_blank><IMG height=45 alt=""
src="http://www.3lian.com/edu/img/js/200909/6.jpg" width=56></A></DIV>
<SCRIPT language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};
picarry[0] = "http://www.3lian.com/edu/img/js/200909/1.jpg";
lnkarry[0]  = "http://www.网址.com/";
ttlarry[0] = "梦：牧场小屋";
picarry[1] = "http://www.3lian.com/edu/img/js/200909/2.jpg";
lnkarry[1]  = "http://www.网址.com/";
ttlarry[1] = "碎玉：回眸";
picarry[2] = "http://www.3lian.com/edu/img/js/200909/3.jpg";
lnkarry[2]  = "http://www.网址.com/";
ttlarry[2] = "飞狐：豆花档";
picarry[3] = "http://www.3lian.com/edu/img/js/200909/4.jpg";
lnkarry[3]  = "http://www.网址.com/";
ttlarry[3] = "牛说不哭：烈日下的建筑工人";
picarry[4] = "http://www.3lian.com/edu/img/js/200909/5.jpg";
lnkarry[4]  = "http://www.网址.com/";
ttlarry[4] = "新疆瓦格：哈萨克族搭建毡房";
picarry[5] = "http://www.3lian.com/edu/img/js/200909/6.jpg";
lnkarry[5]  = "http://www.网址.com/";
ttlarry[5] = "松间明月：汽车文化";
</SCRIPT>
</DIV></DIV>

分享到：
| 漂亮的图片移动控制特效
评论
发表评论

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

相关推荐

    jQuery带缩略图网站图片切换代码

    **jQuery带缩略图网站图片切换代码详解** 在网页设计中，动态的图片展示和切换效果可以提升用户体验，增加网站的吸引力。"jQuery带缩略图网站图片切换代码"正是一种实现这一目标的有效方法。这款特效利用了...

    带缩略图图片切换

    在IT领域，"带缩略图图片切换"是一种常见的用户界面设计技术，广泛应用于网站、应用程序和数字媒体中。这种技术旨在提供一个直观且互动的方式来展示多张图片，用户可以通过点击或滑动缩略图来浏览不同的全尺寸图片。...

    漂亮带缩略图的图片轮换代码.rar

    这个“漂亮带缩略图的图片轮换代码”是一个利用JavaScript实现的图片展示功能，它提供了视觉上的吸引力，帮助提升用户体验。这种轮播通常包括主图片和对应的缩略图，用户可以通过点击缩略图来切换主显示区域的图片。...

    原生js图片淡出淡进底部带缩略图的图片切换代码

    在本文中，我们将深入探讨如何使用原生JavaScript实现图片淡入淡出效果，并结合底部缩略图进行图片切换。这是一个常见的交互设计，广泛应用于各种网页和应用中，为用户提供平滑且直观的视觉体验。 首先，我们需要...

    附带缩略图的JS图片轮换 特效 网页特效 flash特效 脚本代码.rar

    总的来说，这个压缩包文件提供了关于使用JavaScript创建带有缩略图的图片轮换特效的资源。开发者或网页设计师可以通过研究这个代码示例，学习如何用JS编写交互性强、视觉效果丰富的网页特效，提升他们的网页设计技能...

    带缩略图jQuery幻灯片相册代码

    "带缩略图jQuery幻灯片相册代码"是一种常见的实现手段，它结合了jQuery库的高效性和灵活性，以及幻灯片和缩略图的功能，让用户能够方便地浏览和控制一系列图片。这种相册代码尤其适用于大连网站建设，因为大连作为一...

    带缩略图的图片切换网页代码

    "带缩略图的图片切换网页代码"是一个专门实现这种效果的代码资源，它提供了左右切换功能，方便用户浏览一组相关图片。下面我们将深入探讨这个主题，解析相关知识点。 首先，图片切换通常涉及JavaScript、CSS以及...

    附带缩略图的JS图片轮换

    "附带缩略图的JS图片轮换"是一个基于JavaScript实现的图片轮换解决方案，它不仅提供了主图片的轮换，还带有缩略图导航，让用户能够直观地看到所有可切换的图片，并手动选择查看。这种功能常用于网站的幻灯片展示、...

    附带缩略图的JS图片切换代码

    "附带缩略图的JS图片切换代码" 提供了一种交互式的解决方案，它允许用户通过点击缩略图来切换主展示区的大图。这种功能在产品展示、相册浏览或者任何需要动态显示图片的场景中都非常实用。下面我们将详细讨论实现这...

    淘宝专业版自定义全屏带缩略图轮播代码

    淘宝专业版自定义全屏带缩略图轮播代码是一种常见的网页设计技术，主要用于电商平台的商品展示，提升用户体验。这种轮播通常包含一个全屏主图和下方的缩略图导航栏，用户可以通过点击缩略图切换主图，实现商品图片的...

    jquery带缩略图循环切换焦点图代码

    【jQuery带缩略图循环切换焦点图代码】是一种常见的网页动态效果，用于展示一组图片，并通过缩略图进行导航，实现焦点图片的自动循环播放。这个功能在网站中经常用于产品展示、幻灯片或者相册等场景，能提供丰富的...

    jQuery左右滚动支持图片放大缩略图图片轮播代码(附demo,可直接用)

    本项目"jQuery左右滚动支持图片放大缩略图图片轮播代码"提供了一种高效的解决方案，包含了一个可直接使用的demo，下面我们将详细探讨这个轮播代码的关键知识点。 首先，jQuery的`.animate()`方法是实现左右滚动的...

    简单的图片轮播带缩略图焦点图轮换效果

    本项目"简单的图片轮播带缩略图焦点图轮换效果"旨在提供一种简洁且交互性良好的图片展示解决方案。 首先，我们需要理解图片轮播的基本原理。图片轮播通常由一个主展示区域（焦点图）和一个缩略图区域组成。主展示...

    jQuery带缩略图与标题切换焦点图

    在本例中，"jQuery带缩略图与标题切换焦点图" 是一个功能丰富的焦点图插件，它结合了缩略图导航和标题显示，提供了更友好的用户体验。以下是关于这个焦点图实现的关键知识点： 1. **jQuery库**: jQuery是一个广泛...

    附带缩略图的JS图片轮换.zip_附带缩略图的JS图片轮换

    "附带缩略图的JS图片轮换" 是一种实现方式，它结合了JavaScript和CSS技术，让用户可以预览图片的缩略图，并通过点击缩略图来切换主图。这种功能在产品展示、相册浏览等场景中非常实用。 首先，我们来看`index.html`...

    jQuery带缩略图广告代码

    标题中的“jQuery带缩略图广告代码”是指利用jQuery库来实现一种具有缩略图功能的广告展示效果。这种效果通常用于网站上，使用户可以通过点击或滑动缩略图来浏览不同广告或产品，提升用户体验。接下来我们将深入探讨...

    带缩略图的图片点击切换

    插件描述：jCarousel带缩略图的图片点击切换插件. 参考示例：http://www.jq22.com/jquery-info4749

    jquery按钮控制带缩略图图片轮播代码

    总结起来，实现“jquery按钮控制带缩略图图片轮播代码”需要掌握jQuery的选择器、事件处理、DOM操作以及基本的CSS布局技巧。通过合理组织代码，我们可以创建一个交互性强、视觉效果良好的图片轮播组件，提升网站的...

    jQuery左右按钮控制带缩略图的图片切换代码

    在“jQuery左右按钮控制带缩略图的图片切换代码”这个项目中，我们将利用jQuery的强大功能，创建一个用户友好的图片浏览体验。 首先，我们需要在HTML结构中准备基础元素。这通常包括一个主图片容器、用于显示大图的...

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