本文目录
- 网上下载了js图片特效,在DW中怎么改变它的位置
- 求js特效：图片可以左右切换，且点击某张图片会弹出大图，同时大图也可以左右切换
- javascript图片特效,怎么更改里面显示的图片
- js图片特效修改
- 寻网页中JS实现的图片切换特效
- 求javascript的图片展示特效
网上下载了js图片特效,在DW中怎么改变它的位置
可以通过建立表格、div、创建css样式对网页元素定位呀。你可以把这段代码放到表格、div内，或者直接修改这个js效果所用的css文件，应该有吧？
求js特效：图片可以左右切换，且点击某张图片会弹出大图，同时大图也可以左右切换
《!doctype html》
《html》
《head》
《meta charset=“utf-8“ /》
《title》《/title》
《link href=“css/style.css“ rel=“stylesheet“ /》
《script src=“js/js.js“ type=“text/javascript“》《/script》
《/head》
《body》
《div class=“lp_wrap“》
《div class=“lp_left“》《/div》
《div class=“lp_main“》
《ul》
《li》《img src=“images/1.jpg“ alt=“我是1“ /》《/li》
《li》《img src=“images/2.jpg“ alt=“我是2“ /》《/li》
《li》《img src=“images/3.jpg“ alt=“我是2“ /》《/li》
《li》《img src=“images/4.jpg“ alt=“我是2“ /》《/li》
《li》《img src=“images/5.jpg“ alt=“我是2“ /》《/li》
《li》《img src=“images/6.jpg“ alt=“我是2“ /》《/li》
《li》《img src=“images/7.jpg“ alt=“我是2“ /》《/li》
《li》《img src=“images/8.jpg“ alt=“我是2“ /》《/li》
《/ul》
《/div》
《div class=“lp_right“》《/div》
《/div》
《!--隐藏域--》
《div class=“lp_alert“》
《div class=“lp_aleft“》《/div》
《div class=“lp_aimg“ style=“width:540px; height:400px;“》
《img src=“images/1.jpg“ /》
《span》《/span》
《font》《/font》
《/div》
《div class=“lp_aright“》《/div》
《div class=“clear“》《/div》
《/div》
《div class=“zhezhao“》《/div》
《!--隐藏域--》
《/body》
《/html》
window.onload = function (){
function getClass(className){
var get = document.getElementsByTagName(’*’);
var arr = ;
for(var i = 0; i 《 get.length; i ++){
if(get[i].className == className){
arr.push(get[i]);
}
}
return arr;
}
function lp(lp1,lp2,lp3,lp4,lp5,lp6,lp7){
var wrap = getClass(lp1);
var ul = getClass(lp2).getElementsByTagName(’ul’);
var li = ul.getElementsByTagName(’li’);
var mar_r = 10; //margin-right
var w = li.offsetWidth + mar_r;
var l = li.length;
var max = w * l;
var setIndex = 0;
var lp_aleft = getClass(lp3);
var lp_img = getClass(lp4);
var img = lp_img.getElementsByTagName(’img’);
var font = lp_img.getElementsByTagName(’font’);
var lp_aright = getClass(lp5);
var lp_zhezhao = getClass(lp6);
var lp_wrap = getClass(lp7);
var lp_iw = 540; //为弹出 元素宽 ps：隐藏元素获取不到宽 高，估 写死值
var lp_ih = 400; //为弹出 元素高
//获取屏幕宽高
var wid = document.body.clientWidth | document.documentElement.clientWidth;
var hei = document.body.clientHeight | document.documentElement.clientHeight;
//求值居中
function left(n,w){
return (n - w) / 2;
}
function top(n,h){
return (n - h) / 2;
}
lp_img.style.left = left(wid,lp_iw) + ’px’;
lp_img.style.top = top(hei,lp_ih) + ’px’;
lp_aleft.style.top = top(hei,lp_aleft.offsetHeight) + ’px’;
lp_aright.style.top = top(hei,lp_aleft.offsetHeight) + ’px’;
lp_zhezhao.style.width = wid + ’px’;
lp_zhezhao.style.height = hei + ’px’;
//窗口改变大小
window.onresize = function (){
console.log(lp_img.offsetWidth);
wid = document.body.clientWidth | document.documentElement.clientWidth;
hei = document.body.clientHeight | document.documentElement.clientHeight;
lp_img.style.left = left(wid,lp_img.offsetWidth) + ’px’;
lp_img.style.top = top(hei,lp_img.offsetHeight) + ’px’;
lp_aleft.style.top = top(hei,lp_aleft.offsetHeight) + ’px’;
lp_aright.style.top = top(hei,lp_aleft.offsetHeight) + ’px’;
lp_zhezhao.style.width = wid + ’px’;
lp_zhezhao.style.height = hei + ’px’;
}
for(var i = 0; i 《 l; i ++){
ul.appendChild(li[i].cloneNode(true));
}
for(var i = 0; i 《 li.length; i ++){
li[i].index = i;
li[i].onclick = function (){
_this = this;
img.src = this.getElementsByTagName(’img’).src
font.innerHTML = this.getElementsByTagName(’img’).alt;
lp_wrap.style.display = ’block’;
lp_zhezhao.style.display = ’block’;
lp_aleft.onclick = function (){
_this.index --;
if(_this.index 《 1){
_this.index = 0;
alert(’当前第一张’);
}
console.log(_this.index);
img.src = li[_this.index].getElementsByTagName(’img’).src
font.innerHTML = li[_this.index].getElementsByTagName(’img’).alt;
}
lp_aright.onclick = function (){
_this.index ++;
if(_this.index 》= li.length){
_this.index = li.length - 1;
alert(’最后一张’);
}
img.src = li[_this.index].getElementsByTagName(’img’).src
font.innerHTML = li[_this.index].getElementsByTagName(’img’).alt;
}
}
}
var stop = setInterval(setl,30);
function setl(){
if(setIndex 》= max){
setIndex = 0;
}
setIndex ++;
ul.style.left = -setIndex + ’px’;
}
wrap.onmouseover = function (){
clearInterval(stop);
}
wrap.onmouseout = function (){
stop = setInterval(setl,30);
}
}
new lp(’lp_wrap’,’lp_main’,’lp_aleft’,’lp_aimg’,’lp_aright’,’zhezhao’,’lp_alert’);
}
*{ margin:0; padding:0; list-style:none; }
.clear{ clear:both; }
.lp_wrap{ width:900px; margin:0 auto; }
.lp_main{ width:835px; margin-left:17px; height:188px; overflow:hidden; float:left; position:relative; }
.lp_main ul{ width:1000em; position:absolute; }
.lp_main ul li{ float:left; margin-right:10px; }
.lp_main ul li img{ width:253px; height:188px; }
.lp_left{ background:url(../images/left_arrow.jpg) 0 50% no-repeat; width:15px; height:188px; float:left; }
.lp_right{ background:url(../images/right_arrow.jpg) 0 50% no-repeat; width:15px; height:188px; float:right; }
.zhezhao{ display:none; background:#000; opacity:0.3; position:fixed; top:0; left:0; z-index:233;}
.lp_aleft{ background:url(../images/aleft.png) no-repeat; width:35px; cursor:pointer; height:63px; margin-left:165px; }
.lp_alert{height:0; width:1000px; margin:0 auto; display:none;}
.lp_aimg,.lp_aleft,.lp_aright{ position:absolute; z-index:234;}
.lp_aright{ background:url(../images/aright.png) no-repeat; width:35px; cursor:pointer; height:63px; margin-left:800px; }
.lp_aimg span{ width:540px; height:30px; background:#000; display:block; opacity:0.5; position:absolute; margin-top:-33px; }
.lp_aimg font{ width:540px; height:30px; margin-top:-33px; display:block; color:#fff; font-size:14px; position:absolute; line-height:30px; text-align:center; }
以前练习的时候做的，你看看，合胃口?
javascript图片特效,怎么更改里面显示的图片
《img src=“newborn.jpg“ title=“explain“ alt=“They explained a little about what they were doing.“》
《img src=“majesty.jpg“ title=“strain“ alt=“I hoped I wouldn′t crack under the strain.“》
《img src=“whitemagic.jpg“ title=“retain“ alt=“Clearly they were ready to do almost anything to retain their position.“》
《img src=“gazebo2k3.jpg“ title=“mundane“ alt=“I observed the face of power at its most mundane.“》
《img src=“pyre.jpg“ title=“inhumane“ alt=“But they couldn′t hide the very worst of their inhumane undertakings from the people.“》
《img src=“singularity.jpg“ title=“disdain“ alt=“They showed their utter, complete disdain for justice.“》
《img src=“spellcraft.jpg“ title=“never again“ alt=“Never more. Never again.“》
这个地方的src改成你的图片地址就行了
-js图片特效
js图片特效修改
用jquery的图片特效吧，这个的代码不好，我找了很久也没有找到
以下是源代码：
《script type=“text/javascript“》
var TINY={};
function $(i){return document.getElementById(i)}
function $$(e,p){p=p||document;return p.getElementsByTagName(e)}
TINY.slideshow=function(n){this.infoSpeed=this.imgSpeed=this.speed=10;this.thumbOpacity=this.navHover=70;this.navOpacity=25;this.scrollSpeed=5;this.letterbox=’#000’;this.n=n;this.c=0;this.a=};
TINY.slideshow.prototype={
init:function(s,z,b,f,q){
s=$(s);
var m=$$(’li’,s),i=0,w=0;
this.l=m.length;
this.q=$(q);
this.f=$(z);
this.r=$(this.info);
this.o=parseInt(TINY.style.val(z,’width’));
if(this.thumbs){
var u=$(this.left),r=$(this.right);
u.onmouseover=new Function(’TINY.scroll.init(“’+this.thumbs+’“,-1,’+this.scrollSpeed+’)’);
u.onmouseout=r.onmouseout=new Function(’TINY.scroll.cl(“’+this.thumbs+’“)’);
r.onmouseover=new Function(’TINY.scroll.init(“’+this.thumbs+’“,1,’+this.scrollSpeed+’)’);this.p=$(this.thumbs)
}
for(i;i《this.l;i++){
this.a[i]={};var h=m[i],a=this.a[i];
a.t=$$(’h3’,h).innerHTML;a.d=$$(’p’,h).innerHTML;
a.l=$$(’a’,h)?$$(’a’,h).href:’’;
a.p=$$(’span’,h).innerHTML;
if(this.thumbs){
var g=$$(’img’,h);
this.p.appendChild(g);w+=parseInt(g.offsetWidth);
if(i!=this.l-1){
g.style.marginRight=this.spacing+’px’;w+=this.spacing
}
this.p.style.width=w+’px’;
g.style.opacity=this.thumbOpacity/100;
g.style.filter=’alpha(opacity=’+this.thumbOpacity+’)’;
g.onmouseover=new Function(’TINY.alpha.set(this,100,5)’);
g.onmouseout=new Function(’TINY.alpha.set(this,’+this.thumbOpacity+’,5)’);
g.onclick=new Function(this.n+’.pr(’+i+’,1)’)
}
}
if(b&&f){b=$(b);f=$(f);b.style.opacity=f.style.opacity=this.navOpacity/100;b.style.filter=f.style.filter=’alpha(opacity=’+this.navOpacity+’)’;b.onmouseover=f.onmouseover=new Function(’TINY.alpha.set(this,’+this.navHover+’,5)’);b.onmouseout=f.onmouseout=new Function(’TINY.alpha.set(this,’+this.navOpacity+’,5)’);
b.onclick=new Function(this.n+’.mv(-1,1)’);
f.onclick=new Function(this.n+’.mv(1,1)’);}
this.auto?this.is(0,0):this.is(0,1)
},
mv:function(d,c){var t=this.c+d;this.c=t=t《0?this.l-1:t》this.l-1?0:t;this.pr(t,c)},
pr:function(t,c){clearTimeout(this.lt);if(c){clearTimeout(this.at)}this.c=t;this.is(t,c)},
is:function(s,c){
if(this.info){
TINY.height.set(this.r,1,this.infoSpeed/2,-1)
}
var i=new Image();
i.style.opacity=0;i.style.filter=’alpha(opacity=0)’;
this.i=i;i.onload=new Function(this.n+’.le(’+s+’,’+c+’)’);
i.src=this.a[s].p;
this.q.onclick=function(){alert(11)}
alert(11)
if(this.thumbs){
var a=$$(’img’,this.p),l=a.length,x=0;
for(x;x《l;x++){
a[x].style.borderColor=x!=s?’’:this.active
}
}
},
le:function(s,c){
this.f.appendChild(this.i);
var w=this.o-parseInt(this.i.offsetWidth);
if(w》0){
var l=Math.floor(w/2);
this.i.style.borderLeft=l+’px solid ’+this.letterbox;
this.i.style.borderRight=(w-l)+’px solid ’+this.letterbox
}
TINY.alpha.set(this.i,100,this.imgSpeed);
var n=new Function(this.n+’.nf(’+s+’)’);
this.lt=setTimeout(n,this.imgSpeed*100);
if(!c){this.at=setTimeout(new Function(this.n+’.mv(1,0)’),this.speed*1000)}
if(this.a[s].l!=’’){
alert(11);
this.q.onclick=new Function(’window.location=“’+this.a[s].l+’“’);
this.q.onmouseover=new Function(’this.className=“’+this.link+’“’);
this.q.onmouseout=new Function(’this.className=““’);
this.q.style.cursor=’pointer’
}
else{
alert(22);
this.q.onclick=this.q.onmouseover=null;this.q.style.cursor=’default’
}
var m=$$(’img’,this.f);if(m.length》2){this.f.removeChild(m)}
},
nf:function(s){
if(this.info){
s=this.a[s];$$(’h3’,this.r).innerHTML=s.t;$$(’p’,this.r).innerHTML=s.d;this.r.style.height=’auto’
;var h=parseInt(this.r.offsetHeight);this.r.style.height=0;TINY.height.set(this.r,h,this.infoSpeed,0)
}
}
};
TINY.scroll=function(){return{init:function(e,d,s){e=typeof e==’object’?e:$(e);var p=e.style.left||TINY.style.val(e,’left’);e.style.left=p;var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0;e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)},mv:function(e,l,d,s){var c=parseInt(e.style.left);if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c);i=i《s?i:s;var n=c-i*d;e.style.left=n+’px’}},cl:function(e){e=typeof e==’object’?e:$(e);clearInterval(e.si)}}}();
TINY.height=function(){return{set:function(e,h,s,d){e=typeof e==’object’?e:$(e);var oh=e.offsetHeight,ho=e.style.height||TINY.style.val(e,’height’);ho=oh-parseInt(ho);var hd=oh-ho》h?-1:1;clearInterval(e.si);e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)},tw:function(e,h,ho,hd,s){var oh=e.offsetHeight-ho;if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+’px’}}}}}();
TINY.alpha=function(){return{set:function(e,a,s){e=typeof e==’object’?e:$(e);var o=e.style.opacity||TINY.style.val(e,’opacity’),d=a》o*100?1:-1;e.style.opacity=o;clearInterval(e.ai);e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)},tw:function(e,a,d,s){var o=Math.round(e.style.opacity*100);if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d;e.style.opacity=n/100;e.style.filter=’alpha(opacity=’+n+’)’}}}}();
TINY.style=function(){return{val:function(e,p){e=typeof e==’object’?e:$(e);return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();
《/script》
-js
寻网页中JS实现的图片切换特效
我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去，也就是onMouseOver。是停不下来的，会一直滚下去，因为无论怎么样都是鼠标碰触事件。所以我强烈建议用点击事件,onclick。
js css image都是调用的。我都写到页面里了，你自己改下。图片地址我没改。本地测试的。自己换成你的图片。
《!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN“ “http://www.w3.org/TR/html4/loose.dtd“》
《html》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“》
《title》图片展示特效《/title》
《style》
body{ margin:20px auto; width:100%; height:auto;}
#dHomePageCarousel {
height:221px;
width:670px;
position:relative;
margin:40px auto;
}
#dLocalHomesCarousel {
height:131px;
margin:0px 2px 3px 1px;
overflow:hidden;
position:relative;
}
.divCarouselInfo {
color:#3C404E;
font-size:12px;
width:639px;
height:64px;
line-height:16px;
margin-right:15px;
padding-top:10px;
position:relative;
}
.imgBorder{
border:2px solid #fff;
position:absolute;
cursor:pointer;
}
.imgBorder:hover {
border:2px solid #FFAA55;
cursor:pointer;
position:absolute;
}
.btnCarouselLT {
background:url(“../images/btn_nav_carousel.png“) no-repeat scroll left top transparent;
display:block;
height:41px;
overflow:hidden;
position:absolute;
cursor:pointer;
top:17px;
width:40px;
}
.btnCarouselRT {
background:url(“../images/btn_nav_carousel.png“) no-repeat scroll right top transparent;
display:block;
height:41px;
overflow:hidden;
position:absolute;
cursor:pointer;
top:17px;
width:40px;
}
img {
border:medium none;
}
.author{ width:700px; margin:0 auto; height:auto; text-align:center;}
《/style》
《/head》
《body onLoad=“clearInterval(autoplay);“》
《!-- 头开始 --》
《!-- 滚动房源广告开始 --》
《div id=“dHomePageCarousel“ style=“padding-left:15px“》
《div id=dLocalHomesCarousel》
《img id=“imgSmallLeft“ class=“imgBorder“ style=“height:50px; width:70px; left:10px; bottom:5px;“ onClick=“clearInterval(autoplay);moveD(’l’);“/》
《img id=“imgMiddleLeft“ class=“imgBorder“ style=“height:75px; width:100px; left:110px; bottom:5px;“ onClick=“clearInterval(autoplay);move(’l’);“/》
《img id=“imgBig“ class=“imgBorder“ style=“height:105px; width:140px; left:240px; bottom:5px;“ onClick=“openNewPage();“/》
《img id=“imgMiddleRight“ class=“imgBorder“ style=“height:75px; width:100px; left:410px; bottom:5px;“ onClick=“clearInterval(autoplay);move(’r’);“/》
《img id=“imgSmallRight“ class=“imgBorder“ style=“width:70px; height:50px; left:540px; bottom:5px;“ onClick=“clearInterval(autoplay);moveD(’r’);“/》
《img id=“imgHidden“ class=“imgBorder“ style=“width:10px; height:10px; left:-90px; bottom:5px;“/》
《/div》
《script type=“text/javascript“》
function AdItem(Photo,url) {
this.Photo = Photo;
this.url = url;
}
var ad = new Array();
ad = new AdItem(’images/1.jpg’,’#’); ad = new AdItem(’images/2.jpg’,’#’); ad = new AdItem(’images/3.jpg’,’#’); ad = new AdItem(’images/4.jpg’,’#’); ad = new AdItem(’images/5.jpg’,’#’); ad = new AdItem(’images/6.jpg’,’#’); ;
var img = new Array();
img = document.getElementById(“imgSmallLeft“);
img = document.getElementById(“imgMiddleLeft“);
img = document.getElementById(“imgBig“);
img = document.getElementById(“imgMiddleRight“);
img = document.getElementById(“imgSmallRight“);
img = document.getElementById(“imgHidden“);
var position = 0;
for(i=0;i《img.length;i++){
img[i].src = ad[i].Photo;
}
var cur = 2;
adname.href = ad.url;
《/script》
《/div》
《script type=“text/javascript“》
function roll(direction){
var imgLength = img.length;
var dataLength = ad.length;
var start = position;
if(’r’ == direction){
for(var i=0; i《imgLength; i++){
start = start + 1;
if(start 》 (dataLength-1))
start = start - dataLength;
img[i].src = ad[start].Photo;
}
position = position + 1;
if(position 》 (dataLength-1))
position = position - dataLength;
}
if(’l’ == direction){
var a = true;
for(var i=0; i《imgLength; i++){
if(a){
start = start - 1;
if(start 《 0){
start = start + dataLength;
a = false;
}
if(start 《 (dataLength-1)){
a = false;
}
}else{
start = start + 1;
if(start 》 (dataLength-1)){
start = start - dataLength;
a = true;
}
}
//alert(position + “ === “ + i + “ === “ + start);
img[i].src = ad[start].Photo;
if(start == (dataLength-1)){
start = -1;
}
}
position = position - 1;
if(position 《 0)
position = position + dataLength;
}
}
function right(){
i++;
var img0H = parseFloat(img.style.height);
var img0W = parseFloat(img.style.width);
var img0L = parseFloat(img.style.left);
var img1H = parseFloat(img.style.height);
var img1W = parseFloat(img.style.width);
var img1L = parseFloat(img.style.left);
var img2H = parseFloat(img.style.height);
var img2W = parseFloat(img.style.width);
var img2L = parseFloat(img.style.left);
var img3H = parseFloat(img.style.height);
var img3W = parseFloat(img.style.width);
var img3L = parseFloat(img.style.left);
var img4H = parseFloat(img.style.height);
var img4W = parseFloat(img.style.width);
var img4L = parseFloat(img.style.left);
var img5H = parseFloat(img.style.height);
var img5W = parseFloat(img.style.width);
var img5L = parseFloat(img.style.left);
//解决IE兼容性问题
if(navigator.userAgent.indexOf(“MSIE“)》0 && i%2==0) {
img1W = img1W + 1;
img2H = img2H + 1;
img2L = img2L + 1;
img3H = img3H + 1;
img3L = img3L + 1;
img4L = img4L + 1;
img4W = img4W + 1;
}
img.style.height = (img0H - 2).toString() + “px“;
img.style.left = (img0L - 5).toString() + “px“;
img.style.width = (img0W - 3).toString() + “px“;
img.style.height = (img1H - 1).toString() + “px“;
img.style.left = (img1L - 5).toString() + “px“;
img.style.width = (img1W - 1.5).toString() + “px“;
img.style.height = (img2H - 1.5).toString() + “px“;
img.style.left = (img2L - 6.5).toString() + “px“;
img.style.width = (img2W - 2).toString() + “px“;
img.style.height = (img3H + 1.5).toString() + “px“;
img.style.left = (img3L - 8.5).toString() + “px“;
img.style.width = (img3W + 2).toString() + “px“;
img.style.height = (img4H + 1).toString() + “px“;
img.style.left = (img4L - 6.5).toString() + “px“;
img.style.width = (img4W + 1.5).toString() + “px“;
img.style.height = (img5H + 2).toString() + “px“;
img.style.left = (img5L - 5).toString() + “px“;
img.style.width = (img5W + 3).toString() + “px“;
//alert(img.style.width);
if(i》19){
clearInterval(hide);
reset();
roll(’r’);
isRunning = ’false’;
}
}
function left(){
i++;
var img0H = parseFloat(img.style.height);
var img0W = parseFloat(img.style.width);
var img0L = parseFloat(img.style.left);
var img1H = parseFloat(img.style.height);
var img1W = parseFloat(img.style.width);
var img1L = parseFloat(img.style.left);
var img2H = parseFloat(img.style.height);
var img2W = parseFloat(img.style.width);
var img2L = parseFloat(img.style.left);
var img3H = parseFloat(img.style.height);
var img3W = parseFloat(img.style.width);
var img3L = parseFloat(img.style.left);
var img4H = parseFloat(img.style.height);
var img4W = parseFloat(img.style.width);
var img4L = parseFloat(img.style.left);
var img5H = parseFloat(img.style.height);
var img5W = parseFloat(img.style.width);
var img5L = parseFloat(img.style.left);
//解决IE兼容性问题
if(navigator.userAgent.indexOf(“MSIE“)》0 && i%2==0) {
img0W = img0W + 1;
img1H = img1H + 1;
img1L = img1L + 1;
img2H = img2H + 1;
img2L = img2L + 1;
img3L = img3L + 1;
img3W = img3W + 1;
}
img.style.height = (img0H + 1).toString() + “px“;
img.style.left = (img0L + 5).toString() + “px“;
img.style.width = (img0W + 1.5).toString() + “px“;
img.style.height = (img1H + 1.5).toString() + “px“;
img.style.left = (img1L + 6.5).toString() + “px“;
img.style.width = (img1W + 2).toString() + “px“;
img.style.height = (img2H - 1.5).toString() + “px“;
img.style.left = (img2L + 8.5).toString() + “px“;
img.style.width = (img2W - 2).toString() + “px“;
img.style.height = (img3H - 1).toString() + “px“;
img.style.left = (img3L + 6.5).toString() + “px“;
img.style.width = (img3W - 1.5).toString() + “px“;
img.style.height = (img4H - 2).toString() + “px“;
img.style.left = (img4L + 5).toString() + “px“;
img.style.width = (img4W - 3).toString() + “px“;
img.style.height = (img5H + 2).toString() + “px“;
img.style.left = (img5L + 5).toString() + “px“;
img.style.width = (img5W + 3).toString() + “px“;
//alert(img.style.left);
if(i》19){
clearInterval(hide);
reset();
roll(’l’);
isRunning = ’false’;
}
}
var isRunning;
function move(direction){
//alert(isRunning);
if(isRunning != ’udefined’ && isRunning == ’true’)
return;
frequency = 20;
if(navigator.userAgent.indexOf(“MSIE“)》0) {
frequency = 15;
}
if(isFirefox=navigator.userAgent.indexOf(“Firefox“)》0){
frequency = 20;
}
i = 0;
if(direction == ’r’){
cur = cur + 1;
img.style.left = “640px“;
hide = setInterval(“right()“, frequency);
isRunning = ’true’;
}
if(direction == ’l’){
cur = cur - 1;
img.style.left = “-90px“;
var pos = position - 1;
if(pos 《 0)
pos = pos + ad.length;
img.src = ad[pos].Photo;
hide = setInterval(“left()“, frequency);
isRunning = ’true’;
}
if(cur 》 (ad.length - 1))
cur = 0;
if(cur 《 0)
cur = ad.length - 1;
//alert(cur);
adname.href = ad[cur].url;
if(navigator.userAgent.indexOf(“Firefox“)》0){
adname.textContent = ad[cur].name;
adtel.textContent = ad[cur].phone;
adaddr.textContent = ad[cur].address;
adprice.textContent = ad[cur].price;
adtime.textContent = ad[cur].time;
} else {
adname.innerText = ad[cur].name;
adtel.innerText = ad[cur].phone;
adaddr.innerText = ad[cur].address;
adprice.innerText = ad[cur].price;
adtime.innerText = ad[cur].time;
}
}
function moveC(direction){
if(isRunning != ’true’){
move(direction);
clearInterval(movec);
}
}
function moveD(direction){
move(direction);
if(’r’ == direction){
movec = setInterval(“moveC(’r’)“,5);
} else {
movec = setInterval(“moveC(’l’)“,5);
}
}
function reset(){
img.style.width = “70px“;
img.style.height = “50px“;
img.style.left = “10px“;
img.style.width = “100px“;
img.style.height = “75px“;
img.style.left = “110px“;
img.style.width = “140px“;
img.style.height = “105px“;
img.style.left = “240px“;
img.style.width = “100px“;
img.style.height = “75px“;
img.style.left = “410px“;
img.style.width = “70px“;
img.style.height = “50px“;
img.style.left = “540px“;
img.style.width = “10px“;
img.style.height = “10px“;
img.style.left = “-90px“;
}
autoplay = setInterval(“move(’r’)“,2000);
function openNewPage(){
window.open(ad[cur].url);
}
《/script》
《!-- 滚动房源广告结束 --》
《/body》
《/html》
-js图片特效
求javascript的图片展示特效
我空间有，给你找下！
《!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN“》
《html》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“》
《title》insert 《/title》
《script language=“javascript“》
var arr=new Array(“img1.jpeg“,“img2.jpeg“,“img3.jpeg“,“img4.jpeg“,“img5.jpeg“,“img6.jpeg“,“img7.jpeg“,“img8.jpeg“,“img9.jpeg“,“img10.jpeg“);
var arr1=new Array(“img9.jpeg“,“img1.jpeg“,“img2.jpeg“,“img3.jpeg“,“img4.jpeg“,“img5.jpeg“,“img6.jpeg“,“img7.jpeg“,“img8.jpeg“);
var length=9;
var len=arr.length;
var newarr=new Array();
function roll(){
//var len=arr.length;
if(newarr.length==0){
}else{
arr=newarr;
}
for(var i=0;i《length;i++){
var div=document.getElementById(“div“+(i+1));
if(i==0){
div.innerHTML=“《img style=’width:20px;height:80px’src=’“+arr[i+1]+“’ onclick=’’/》“;
}else if(i==1||i==length-2){
div.innerHTML=“《img style=’width:40px;height:80px’src=’“+arr[i+1]+“’ onclick=’’/》“;
}else if(i==2||i==length-3){
div.innerHTML=“《img style=’width:60px;height:80px’src=’“+arr[i+1]+“’ onclick=’’/》“;
}else if(i!=length-1){
div.innerHTML=“《img style=’width:80px;height:80px’src=’“+arr[i+1]+“’ onclick=’’/》“;
}else{
div.innerHTML=“《img style=’width:20px;height:80px’src=’“+arr+“’ onclick=’’/》“;
}
}
var temp=arr;
//alert(temp);
arr.shift();
newarr=arr;
//alert(newarr.length);
newarr[len-1]=temp;
//alert(newarr.length);
/*for(var i=0;i《newarr.length;i++){
alert(newarr[i]);
}*/
}
function rollBack(){
//var len=arr.length;
if(newarr.length==0){
}else{
arr=newarr;
}
for(var i=0;i《length;i++){
var div=document.getElementById(“div“+(i+1));
if(i==0){
div.innerHTML=“《img style=’width:20px;height:80px’src=’“+arr[len-1]+“’ onclick=’’/》“;
}else if(i==1||i==length-2){
div.innerHTML=“《img style=’width:40px;height:80px’src=’“+arr[i-1]+“’ onclick=’’/》“;
}else if(i==2||i==length-3){
div.innerHTML=“《img style=’width:60px;height:80px’src=’“+arr[i-1]+“’ onclick=’’/》“;
}else if(i!=length-1){
div.innerHTML=“《img style=’width:80px;height:80px’src=’“+arr[i-1]+“’ onclick=’’/》“;
}else if(i==length-1){
div.innerHTML=“《img style=’width:20px;height:80px’src=’“+arr[i-1]+“’ onclick=’’/》“;
}
}
var temp=arr[len-1];
//alert(temp);
arr.pop();
arr.reverse();
arr[len-1]=temp;
newarr=arr.reverse();
/*for(var i=0;i《newarr.length;i++){
alert(newarr[i]);
}*/
}
《/script》
《body》
《table》
《tr》
《td》《div id=“div1“》《img style=“width:20px;height:80px“src=“img1.jpeg“ onclick=““/》《/div》《td》
《td》《div id=“div2“》《img style=“width:40px;height:80px“src=“img2.jpeg“ onclick=““/》《/div》《td》
《td》《div id=“div3“》《img style=“width:60px;height:80px“src=“img3.jpeg“ onclick=““/》《/div》《td》
《td》《div id=“div4“》《img style=“width:80px;height:80px“src=“img4.jpeg“ onclick=““/》《/div》《td》
《td》《div id=“div5“》《img style=“width:80px;height:80px“src=“img5.jpeg“ onclick=““/》《/div》《td》
《td》《div id=“div6“》《img style=“width:80px;height:80px“src=“img6.jpeg“ onclick=““/》《/div》《td》
《td》《div id=“div7“》《img style=“width:60px;height:80px“src=“img7.jpeg“ onclick=““/》《/div》《td》
《td》《div id=“div8“》《img style=“width:40px;height:80px“src=“img8.jpeg“ onclick=““/》《/div》《td》
《td》《div id=“div9“》《img style=“width:20px;height:80px“src=“img9.jpeg“ onclick=““/》《/div》《td》
《/tr》
《tr》
《td colspan=“4“ align=“left“》《input type=“button“value=“next“ onclick=“roll()“/》《/td》
《td colspan=“5“align=“right“》《input type=“button“value=“previous“ onclick=“rollBack()“/》《/td》
《tr》
《/table》
《/body》
《/html》
图片你自己替换下！
-js
