本文目录一览：
寻网页中JS实现的图片切换特效
我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去，也就是onMouseOver。是停不下来的，会一直滚下去，因为无论怎么样都是鼠标碰触事件。所以我强烈建议用点击事件,onclick。
js css image都是调用的。我都写到页面里了，你自己改下。图片地址我没改。本地测试的。自己换成你的图片。
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
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');"/-js相册特效
img id="imgMiddleLeft" class="imgBorder" style="height:75px; width:100px; left:110px; bottom:5px;" onClick="clearInterval(autoplay);move('l');"/-js相册特效
img id="imgBig" class="imgBorder" style="height:105px; width:140px; left:240px; bottom:5px;" onClick="openNewPage();"/-js相册特效
img id="imgMiddleRight" class="imgBorder" style="height:75px; width:100px; left:410px; bottom:5px;" onClick="clearInterval(autoplay);move('r');"/-js相册特效
img id="imgSmallRight" class="imgBorder" style="width:70px; height:50px; left:540px; bottom:5px;" onClick="clearInterval(autoplay);moveD('r');"/-js相册特效
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[0] = new AdItem('images/1.jpg','#'); ad[1] = new AdItem('images/2.jpg','#'); ad[2] = new AdItem('images/3.jpg','#'); ad[3] = new AdItem('images/4.jpg','#'); ad[4] = new AdItem('images/5.jpg','#'); ad[5] = new AdItem('images/6.jpg','#'); ;-js相册特效
var img = new Array();
img[0] = document.getElementById("imgSmallLeft");
img[1] = document.getElementById("imgMiddleLeft");
img[2] = document.getElementById("imgBig");
img[3] = document.getElementById("imgMiddleRight");
img[4] = document.getElementById("imgSmallRight");
img[5] = document.getElementById("imgHidden");
var position = 0;
for(i=0;iimg.length;i++){
img[i].src = ad[i].Photo;
}
var cur = 2;
adname.href = ad[2].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; iimgLength; i++){
start = start + 1;
if(start (dataLength-1))
start = start - dataLength;
img[i].src = ad.Photo;
}
position = position + 1;
if(position (dataLength-1))
position = position - dataLength;
}
if('l' == direction){
var a = true;
for(var i=0; iimgLength; 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.Photo;
if(start == (dataLength-1)){
start = -1;
}
}
position = position - 1;
if(position 0)
position = position + dataLength;
}
}
function right(){
i++;
var img0H = parseFloat(img[0].style.height);
var img0W = parseFloat(img[0].style.width);
var img0L = parseFloat(img[0].style.left);
var img1H = parseFloat(img[1].style.height);
var img1W = parseFloat(img[1].style.width);
var img1L = parseFloat(img[1].style.left);
var img2H = parseFloat(img[2].style.height);
var img2W = parseFloat(img[2].style.width);
var img2L = parseFloat(img[2].style.left);
var img3H = parseFloat(img[3].style.height);
var img3W = parseFloat(img[3].style.width);
var img3L = parseFloat(img[3].style.left);
var img4H = parseFloat(img[4].style.height);
var img4W = parseFloat(img[4].style.width);
var img4L = parseFloat(img[4].style.left);
var img5H = parseFloat(img[5].style.height);
var img5W = parseFloat(img[5].style.width);
var img5L = parseFloat(img[5].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[0].style.height = (img0H - 2).toString() + "px";
img[0].style.left = (img0L - 5).toString() + "px";
img[0].style.width = (img0W - 3).toString() + "px";
img[1].style.height = (img1H - 1).toString() + "px";
img[1].style.left = (img1L - 5).toString() + "px";
img[1].style.width = (img1W - 1.5).toString() + "px";
img[2].style.height = (img2H - 1.5).toString() + "px";
img[2].style.left = (img2L - 6.5).toString() + "px";
img[2].style.width = (img2W - 2).toString() + "px";
img[3].style.height = (img3H + 1.5).toString() + "px";
img[3].style.left = (img3L - 8.5).toString() + "px";
img[3].style.width = (img3W + 2).toString() + "px";
img[4].style.height = (img4H + 1).toString() + "px";
img[4].style.left = (img4L - 6.5).toString() + "px";
img[4].style.width = (img4W + 1.5).toString() + "px";
img[5].style.height = (img5H + 2).toString() + "px";
img[5].style.left = (img5L - 5).toString() + "px";
img[5].style.width = (img5W + 3).toString() + "px";
//alert(img[1].style.width);
if(i19){
clearInterval(hide);
reset();
roll('r');
isRunning = 'false';
}
}
function left(){
i++;
var img0H = parseFloat(img[0].style.height);
var img0W = parseFloat(img[0].style.width);
var img0L = parseFloat(img[0].style.left);
var img1H = parseFloat(img[1].style.height);
var img1W = parseFloat(img[1].style.width);
var img1L = parseFloat(img[1].style.left);
var img2H = parseFloat(img[2].style.height);
var img2W = parseFloat(img[2].style.width);
var img2L = parseFloat(img[2].style.left);
var img3H = parseFloat(img[3].style.height);
var img3W = parseFloat(img[3].style.width);
var img3L = parseFloat(img[3].style.left);
var img4H = parseFloat(img[4].style.height);
var img4W = parseFloat(img[4].style.width);
var img4L = parseFloat(img[4].style.left);
var img5H = parseFloat(img[5].style.height);
var img5W = parseFloat(img[5].style.width);
var img5L = parseFloat(img[5].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[0].style.height = (img0H + 1).toString() + "px";
img[0].style.left = (img0L + 5).toString() + "px";
img[0].style.width = (img0W + 1.5).toString() + "px";
img[1].style.height = (img1H + 1.5).toString() + "px";
img[1].style.left = (img1L + 6.5).toString() + "px";
img[1].style.width = (img1W + 2).toString() + "px";
img[2].style.height = (img2H - 1.5).toString() + "px";
img[2].style.left = (img2L + 8.5).toString() + "px";
img[2].style.width = (img2W - 2).toString() + "px";
img[3].style.height = (img3H - 1).toString() + "px";
img[3].style.left = (img3L + 6.5).toString() + "px";
img[3].style.width = (img3W - 1.5).toString() + "px";
img[4].style.height = (img4H - 2).toString() + "px";
img[4].style.left = (img4L + 5).toString() + "px";
img[4].style.width = (img4W - 3).toString() + "px";
img[5].style.height = (img5H + 2).toString() + "px";
img[5].style.left = (img5L + 5).toString() + "px";
img[5].style.width = (img5W + 3).toString() + "px";
//alert(img[1].style.left);
if(i19){
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[5].style.left = "640px";
hide = setInterval("right()", frequency);
isRunning = 'true';
}
if(direction == 'l'){
cur = cur - 1;
img[5].style.left = "-90px";
var pos = position - 1;
if(pos 0)
pos = pos + ad.length;
img[5].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[0].style.width = "70px";
img[0].style.height = "50px";
img[0].style.left = "10px";
img[1].style.width = "100px";
img[1].style.height = "75px";
img[1].style.left = "110px";
img[2].style.width = "140px";
img[2].style.height = "105px";
img[2].style.left = "240px";
img[3].style.width = "100px";
img[3].style.height = "75px";
img[3].style.left = "410px";
img[4].style.width = "70px";
img[4].style.height = "50px";
img[4].style.left = "540px";
img[5].style.width = "10px";
img[5].style.height = "10px";
img[5].style.left = "-90px";
}
autoplay = setInterval("move('r')",2000);
function openNewPage(){
window.open(ad[cur].url);
}
/script
!-- 滚动房源广告结束 --
/body
/html
请教:js图片移动特效
不是很简单一两句话能说清楚地，需要HTML, CSS和javascript的配合。我大概说下做法，你需要自己写写试试看
首先把你的div设置style为overflow hidden
然后在div里面再添加一个div，假设叫做imgcontainer，在里面存放所有图片，图片以float: left方式显示，每个图片的宽度你是知道的，这样图片的个数*每个图片的宽度（必要的话再加上图片之间的间隔）设置为imgcontainer的总宽度。然后把div的宽度设置为显示3个图片的宽度。这样就可以保证只显示3个图片，多余的图片看不到。-js相册特效
然后在点击左右2个按钮的时候添加事件，每点击一次，让imgcontainer的marginLeft增加或减少一个图片的宽度（同样必要的时候加上图片之间的间隔距离），这样就使得图片列表在左右移动了。
下面是我的一个例子，跟你的需求可能不完全一样，大概做下参考：
HTML片段
div id="pagecontent" class="pagecontent"
div id="nav_thumbs_prev" class="disabled" onclick="NavThumbsPrev()"/div
div id="photolist_container"
ol id="photolist" class="photolist"
lifigure onclick="ViewPhoto(this,'aaaaa')"div class="samplecontainer"img src="./img/singularity.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"aaaaa/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'bbbbb')"div class="samplecontainer"img src="./img/pyre.jpg" onload="DrawSampleImage(this);" border="0" /divfigcaption class="imagename"bbbbb/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'cccc')"div class="samplecontainer"img src="./img/newborn.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"cccc/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'dddd')"div class="samplecontainer"img src="./img/pyre.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"dddd/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'eeee')"div class="samplecontainer"img src="./img/singularity.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"eeee/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'ffff')"div class="samplecontainer"img src="./img/pyre.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"ffff/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'gggg')"div class="samplecontainer"img src="./img/newborn.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"gggg/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'hhhh')"div class="samplecontainer"img src="./img/pyre.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"hhhh/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'iiii')"div class="samplecontainer"img src="./img/newborn.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"iiii/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'jjjj')"div class="samplecontainer"img src="./img/singularity.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"jjjj/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'kkkk')"div class="samplecontainer"img src="./img/newborn.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"kkkk/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'llll')"div class="samplecontainer"img src="./img/pyre.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"llll/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'mmmm')"div class="samplecontainer"img src="./img/singularity.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"mmmm/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'nnnn')"div class="samplecontainer"img src="./img/pyre.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"nnnn/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'oooo')"div class="samplecontainer"img src="./img/singularity.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"oooo/figcaption/figure/li-js相册特效
lifigure onclick="ViewPhoto(this,'pppp')"div class="samplecontainer"img src="./img/pyre.jpg" onload="javascript:DrawSampleImage(this);" border="0" /divfigcaption class="imagename"pppp/figcaption/figure/li-js相册特效
/ol
/div
div id="nav_thumbs_next" onclick="NavThumbsNext()"/div
/div
CSS部分
.photolist_container {
margin: 0;
/*Firefox*/
width: -moz-calc(100% - 30px);
/*chrome safari*/
width: -webkit-calc(100% - 30px);
/*Standard */
width: calc(100% - 30px);
float: left;
height: 140px;
overflow: hidden;
}
ol.photolist {
background-color: black;
margin: 0;
margin-left: 1px;
padding: 0;
list-style: none;
height: auto;
padding: 0;
display: block;
height: 125px;
}
ol.photolistli {
margin: 0;
margin-left: -1px;
padding: 4px;
text-align:center;
display:inline;
float: left;
border: 1px solid #FF6699;
width: 100px;
}
#photolist figure {
margin: 0;
padding: 0;
text-align:center;
border: 1px solid #000000;
cursor: pointer;
}
.samplecontainer {
height: 100px;
width: 100px;
text-align: center;
margin: 0;
padding: 0;
border: 0;
display: table-cell;
vertical-align: middle;
}
.samplecontainerimg {
margin: 0;
padding: 0;
border: 0;
vertical-align:middle;
}
Javascript部分
function MovePhotoList(size) {
var photolist = document.getElementById("photolist");
var marginLeft = 1;
if (photolist.style.marginLeft != "")
marginLeft = parseInt(photolist.style.marginLeft);
marginLeft = marginLeft + size;
if (marginLeft (document.getElementById("photolist_container").offsetWidth - photolist.offsetWidth))-js相册特效
{
marginLeft = document.getElementById("photolist_container").offsetWidth - photolist.offsetWidth;-js相册特效
document.getElementById("nav_thumbs_next").setAttribute("class", "disabled");
}
else
{
document.getElementById("nav_thumbs_next").setAttribute("class", "enable");
}
if (marginLeft 1)
{
marginLeft = 1;
document.getElementById("nav_thumbs_prev").setAttribute("class", "disabled");
}
else
{
document.getElementById("nav_thumbs_prev").setAttribute("class", "enable");
}
photolist.style.marginLeft = marginLeft + "px";
}
function NavThumbsPrev() {
var nav_thumbs_prev = document.getElementById("nav_thumbs_prev");
if (nav_thumbs_prev.getAttribute("class") != "disabled") {
MovePhotoList(56);
}
}
function NavThumbsNext() {
var nav_thumbs_next = document.getElementById("nav_thumbs_next");
if (nav_thumbs_next.getAttribute("class") != "disabled") {
MovePhotoList(-56);
}
}
关于jquery laryer.js 使用按钮调用相册弹出事件
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlejQuery实现的点击图片放大且在当前页面查看原图丨芯晴网页特效丨CsrCode.Cn/title
style type="text/css"
div, ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#Over {
position: absolute;
width: 100%;
z-index: 100;
left: 0px;
top: 0px;
}
.img {
width:90%;
background-color: #FFF;
height: 90%;
padding: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
.content {
text-align: center;
width: 200px;
height:150px;
margin-right: auto;
margin-left: auto;
}
.EnlargePhoto {
cursor: pointer;
}
.TempContainer {
position: absolute;
z-index: 101;
margin-right: 0px;
margin-left: 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
/style
/head
script type="text/javascript" src="/images/jquery-1.6.2.min.js"/script
script type="text/javascript"
$(document).ready(function(e) {
var ImgsTObj = $('.EnlargePhoto');//class=EnlargePhoto的都是需要放大的图像
if(ImgsTObj){
$.each(ImgsTObj,function(){
$(this).click(function(){
var currImg = $(this);
CoverLayer(1);
var TempContainer = $('div class=TempContainer/div');
with(TempContainer){
appendTo("body");
css('top',currImg.offset().top);
html('img border=0 src=' + currImg.attr('src') + '');
}
TempContainer.click(function(){
$(this).remove();
CoverLayer(0);
});
});
});
}
else{
return false;
}
//====== 使用/禁用蒙层效果 ========
function CoverLayer(tag){
with($('#Over')){
if(tag==1){
css('height',$(document).height());
css('display','block');
css('opacity',0.9);
css("background-color","#000");
}
else{
css('display','none');
}
}
}
});
/script
body
div class="content"
IMG class="img EnlargePhoto" src="/images/m03.jpg"br /br /
IMG class="img EnlargePhoto" src="/images/m04.jpg"br /br /
/div
/body
/html
br第一次运行本代码，请刷新一下本页面先~~br所需js文件：a href="/images/jquery-1.6.2.min.js" target=_blankjquery-1.6.2.min.js/abrhrp align="center"font color=black本特效由 a href="" target="_blank"芯晴网页特效/a丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者/font/p-js相册特效
网页设计中如何批量将图片制作成网页相册？
二维数组分页，或js读取为数组，也可以实现【静态分页】。
Picasa可以把指定的目录生成一个HTML相册。
第一步，选择需要导出为相册的文件夹
第二步，选择尺寸，相册外观
生成后的页面
如果你想把相册做的很美观，这个就可能需要你动动手了。
一些动态编程语言（如asp或php）有file操作系统，可以读取遍历指定目录的文件，通过他们，可以无需修改程序，仅仅是网目标文件中添加删除图片，即可实现网页中图片列表的更新。
另外，有不少专门的图库相册js插件的，当然，也有flash的。去搜下牛图库，或懒人图库，代码一大把。
什么是JS特效
JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。
比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。
扩展资料：
能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。-js相册特效
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。-js相册特效
