Javascript的图片滚动浏览效果代码_slide432代码-优快云博客

本文链接：https://blog.youkuaiyun.com/softwave/article/details/1744905

该代码实现了一个图片滚动功能，用户可以通过鼠标操作左侧或右侧的箭头来滚动预览不同的图片。此功能利用HTML、CSS和JavaScript实现，适用于网页设计中需要展示多张图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个图片滚动的代码，可实现图片随鼠标箭头左右滚动浏览。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<!--

body{

background-image:url('../../http://www.sanda.com.cn/new/images/heading3.gif');

background-repeat:no-repeat;

padding-top:80px;

}

#dhtmlgoodies_slideshow{

width:600px; /* Total width of slideshow */

}

#previewPane{

border:1px solid #CCCCCC;

margin-bottom:10px;

text-align:center;

vertical-align:middle;

padding-top:10px;

background-color:#CCC;

position:relative;

/* CSS HACK */

height: 432px; /* IE 5.x */

height/* */:/**/420px; /* Other browsers */

height: /**/420px;

}

#previewPane img{

line-height:400px;

}

#previewPane #largeImageCaption{ /* CSS styling of image caption below large image */

font-style:italic;

text-align:center;

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */

font-size:0.9em;

}

#galleryContainer{

height:102px; /* Height of the http://www.sanda.com.cn/new/image + 2 */

border:1px solid #CCCCCC;

position:relative;

overflow:hidden;

padding:1px;

/* CSS HACK */

height: 104px; /* IE 5.x - Added 2 pixels for border left and right */

height/* */:/**/102px; /* Other browsers */

height: /**/102px;

}

#arrow_left{

position:absolute;

left:0px;

z-index:10;

background-color: #FFF;

padding:1px;

}

#arrow_right{

position:absolute;

right:0px;

z-index:10;

background-color: #FFF;

padding:1px;

}

#theImages{

position:absolute;

height:100px;

left:40px;

width:100000px;

}

#theImages #slideEnd{

float:left;

}

#theImages img{

float:left;

padding:1px;

filter: alpha(opacity=50);

opacity: 0.5;

cursor:pointer;

border:0px;

}

#waitMessage{

display:none;

position:absolute;

left:200px;

top:150px;

background-color:#FFF;

border:3px double #000;

padding:4px;

color:#555;

font-size:0.9em;

font-family:arial;

}

#theImages .imageCaption{

display:none;

}

-->

</style>

var displayWaitMessage=true; // Display a please wait message while http://www.sanda.com.cn/new/image are loading?

var activeImage = false;

var imageGalleryLeftPos = false;

var imageGalleryWidth = false;

var imageGalleryObj = false;

var maxGalleryXPos = false;

var slideSpeed = 0;

var imageGalleryCaptions = new Array();

function startSlide(e)

{

if(document.all)e = event;

var id = this.id;

this.getElementsByTagName('IMG')[0].src = 'http://www.sanda.com.cn/new/images/' + this.id + '_over.gif';

if(this.id=='arrow_right'){

slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);

slideSpeed = -1*slideSpeedMultiply;

slideSpeed = Math.max(-10,slideSpeed);

}else{

slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);

slideSpeed = 1*slideSpeedMultiply;

slideSpeed = Math.min(10,slideSpeed);

if(slideSpeed<0)slideSpeed=10;

}

function releaseSlide()

{

var id = this.id;

this.getElementsByTagName('IMG')[0].src = 'http://www.sanda.com.cn/new/images/' + this.id + '.gif';

slideSpeed=0;

}

function gallerySlide()

{

if(slideSpeed!=0){

var leftPos = imageGalleryObj.offsetLeft;

leftPos = leftPos/1 + slideSpeed;

if(leftPos>maxGalleryXPos){

leftPos = maxGalleryXPos;

slideSpeed = 0;

}

if(leftPos<minGalleryXPos){

leftPos = minGalleryXPos;

slideSpeed=0;

}

imageGalleryObj.style.left = leftPos + 'px';

}

setTimeout('gallerySlide()',20);

}

function showImage()

{

if(activeImage){

activeImage.style.filter = 'alpha(opacity=50)';

activeImage.style.opacity = 0.5;

}

this.style.filter = 'alpha(opacity=100)';

this.style.opacity = 1;

activeImage = this;

}

function initSlideShow()

{

document.getElementById('arrow_left').onmousemove = startSlide;

document.getElementById('arrow_left').onmouseout = releaseSlide;

document.getElementById('arrow_right').onmousemove = startSlide;

document.getElementById('arrow_right').onmouseout = releaseSlide;

imageGalleryObj = document.getElementById('theImages');

imageGalleryLeftPos = imageGalleryObj.offsetLeft;

imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 80;

maxGalleryXPos = imageGalleryObj.offsetLeft;

minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;

var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');

for(var no=0;no<slideshowImages.length;no++){

slideshowImages[no].onmouseover = showImage;

}

var divs = imageGalleryObj.getElementsByTagName('DIV');

for(var no=0;no<divs.length;no++){

if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;

}

gallerySlide();

}

function showPreview(imagePath,imageIndex){

var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');

if(subImages.length==0){

var img = document.createElement('IMG');

document.getElementById('previewPane').appendChild(img);

}else img = subImages[0];

if(displayWaitMessage){

document.getElementById('waitMessage').style.display='inline';

}

document.getElementById('largeImageCaption').style.display='none';

img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };

img.src = imagePath;

}

function hideWaitMessageAndShowCaption(imageIndex)

{

document.getElementById('waitMessage').style.display='none';

document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];

document.getElementById('largeImageCaption').style.display='block';

}

window.onload = initSlideShow;

</script>

</head>

<body>

<span id="waitMessage">Loading image. Please wait</span>

</div>

</div>

</body>

</html>

【自：http://bbs.blueidea.com/thread-2765245-1-1.html】