JS图片切换的具体方法(带缩略图版)

2024-10-27 19:00:56

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>五屏带缩略图幻灯片切换代码</title>

<style>

BODY {

FONT-SIZE: 9pt; BACKGROUND: #d8d8d8; MARGIN: 0px auto; COLOR: #505050; FONT-FAMILY: 宋体,arial,verdana,sans-serif,fantasy,tahoma; TEXT-DECORATION: none; background1: #c8e4f2

}

A {

TEXT-DECORATION: none

}

A:link {

COLOR: #505050; color1: #54564c

}

A:visited {

COLOR: #505050; color1: #54564c

}

A:hover {

COLOR: #d40005; TEXT-DECORATION: underline

}

A:active {

COLOR: #f30

}

IMG {

BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px

}

.box {

FLOAT: left; WIDTH: 472px

}

.box .boxpadding {

PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px

}

#Slide {

CLEAR: both; BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-BOTTOM: 6px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; WIDTH: 450px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 335px

}

#Slide A {

COLOR: #000

}

.img {

BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; TEXT-ALIGN: center

}

.boxpadding {

BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BACKGROUND: #f8f8f8; MARGIN-BOTTOM: 8px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid

}

.thumb_title {

MARGIN-TOP: 10px; BACKGROUND: #fff; FILTER: alpha(opacity=30); WIDTH: 450px; TEXT-INDENT: 10px; LINE-HEIGHT: 25px; POSITION: absolute; HEIGHT: 25px; -moz-opacity: 0.3

}

#Slide_Thumb {

MARGIN-TOP: 257px; MARGIN-LEFT: 0px; POSITION: absolute

}

.thumb_on {

DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer

}

.thumb_off {

DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer

}

.thumb_off {

FILTER: alpha(opacity=50); -moz-opacity: 0.5

}

.thumb_on {

FILTER: alpha(opacity=100); -moz-opacity: 1

}

.thumb_off IMG {

BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-TOP: 12px; BORDER-LEFT: #fff 1px solid; WIDTH: 75px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 56px

}

.thumb_on IMG {

BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 91px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 68px

}

</style>

</head>

<body>

<tr>

<div id=Slide> <a id=foclnk

href="/" target=_blank>

<img id=focpic style="FILTER: RevealTrans(duration=1;ransition=12); VISIBILITY: visible; POSITION: absolute; left:484; top:94"

src="/jscss/demoimg/wall1.jpg" width="450" height="335" /></a>

<div class=thumb_title id=foctitle><a href="/"

target=_blank>图一</a></div>

<div class=thumb_on id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a

href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall1.jpg" /></a></div>

<div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a

href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall2.jpg" /></a></div>

<div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a

href="/" target=_blank><img alt="图三" src="/jscss/demoimg/wall3.jpg" /></a></div>

<div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a

href="/" target=_blank><img alt="图四" src="/jscss/demoimg/wall4.jpg" /></a></div>

<div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a

href="/" target=_blank><img alt="图五" src="/jscss/demoimg/wall5.jpg" /></a></div>

var picarry = {};

var lnkarry = {};

var ttlarry = {};

picarry[0] = "http://www.jb51.net/jscss/demoimg/wall1.jpg";

lnkarry[0] = "/";

ttlarry[0] = "图一";

picarry[1] = "/jscss/demoimg/wall2.jpg";

lnkarry[1] = "/";

ttlarry[1] = "图二";

picarry[2] = "/jscss/demoimg/wall3.jpg";

lnkarry[2] = "/";

ttlarry[2] = "图三";

picarry[3] = "/jscss/demoimg/wall4.jpg";

lnkarry[3] = "/";

ttlarry[3] = "图四";

picarry[4] = "/jscss/demoimg/wall5.jpg";

lnkarry[4] = "/";

ttlarry[4] = "图五";

</script>

</div>

</div></td>

</tr>

</table>

var currslid = 0;

var slidint;

function setfoc(id){

document.getElementById("focpic").src = picarry[id];

document.getElementById("foclnk").href = lnkarry[id];

document.getElementById("foctitle").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';

currslid = id;

for(i=0;i<5;i++){

document.getElementById("tmb"+i).className = "thumb_off";

};

document.getElementById("tmb"+id).className ="thumb_on";

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==4){

currslid = 0;

}

else{

currslid++;

};

setfoc(currslid);

playit();

}

function playit(){

slidint = setTimeout(playnext,4500);

}

function stopit(){

clearTimeout(slidint);

}

window.onload = function(){

playit();

}</SCRIPT>

</div>

</body>

</html>

纯js实现背景图片切换效果代码

html代码复制代码代码如下: <!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> <title>背景切
js捕获鼠标滚轮事件代码

之前看到一个人人网高级前端面试的笔试题要求手写代码,其中有个题是做一个图片展示类似百度图片最下面小缩略图那个展示栏然后要求有个鼠标滚轮滚动变大变小的要求这个我还真不知道怎么做,在网上找了找资料发现可以捕获onmousewheel的事件然后根据event.wheelDelta值的正负来判断是前滚还是后滚随便写了个小例子,顺便捕获下键盘的按键,不太美观没有换行因为用textNode做的,加不进去html代码说到这里是不是可以用这种方法来防止xss注入呢? 复制代码代码如下: <b
JavaScript实现鼠标滚轮控制页面图片切换功能示例

本文实例讲述了JavaScript实现鼠标滚轮控制页面图片切换功能.分享给大家供大家参考,具体如下: 鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢? 最常见就是图片的切换了,能通过滚动滚轮进行图片的浏览,省得用户还要去点下一张,做这种繁琐的步骤.来看个简单的例子吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
js+div实现文字滚动和图片切换效果代码

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes
最简单的js图片切换效果实现代码

无意中在网上发现的,代码非常的简单,一看就明白! 复制代码代码如下: <script language =javascript > var curIndex=0; //时间间隔单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴

这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊布局什么的你们自己搞定吧 <div class="slider" id="circle"> <a href=""><img src="img/6p.jpg" alt="" /></a> ` <ul class="circle" > <li on
js鼠标点击图片切换效果实现代码

本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:
javascript监听鼠标滚轮事件浅析

我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听. 不同浏览器不同的事件首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件
javascript实现图片切换的幻灯片效果源代码

网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享废话少说,看代码复制代码代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div
js实现鼠标滚轮控制图片缩放效果的方法

本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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/xhtm
js 事件对象鼠标滚轮效果演示说明

Mouse Wheel Data .slider { width:50px; height:180px; background:#eee; padding:10px 0; cursor:n-resize; } .slider-slot { width:16px; margin:0 auto; height:180px; background:#eee; border:1px solid gray; border-color:#999 white white #999; position:rela

JS图片切换的具体方法(带缩略图版)

相关推荐

随机推荐