JS实现全屏横向多图滑动效果

3星 · 超过75%的资源需积分: 46 70 浏览量更新于2024-09-14 收藏 6KB TXT 举报

本文档介绍了一种利用JavaScript实现的横向多幅图片滚动效果，适用于多种浏览器版本，包括IE7.8，但需要注意在IE7.8中存在一个CSS小问题，不过这个问题相对容易修复。这个滚动代码并非原创，作者提醒读者在使用时尊重他人的劳动成果。首先，HTML结构部分采用了标准的DOCTYPE声明，以及`<html>`、`<head>`、`<meta>`、`<title>`标签，定义了页面的基本元数据和字符编码。`<style>`标签包含了CSS样式，主要定义了一个名为`rollBox`的容器类，其属性包括宽度（704px）、溢出隐藏、内边距和浮动布局等，确保图片滚动区域的整洁布局。 `rollBox`容器包含左右两个导航按钮，分别使用`.LeftBotton`和`.RightBotton`类，它们通过CSS背景图片实现箭头效果，并设置鼠标悬停时的光标图标。这两个按钮的宽度分别为19px和20px，高度为52px，且位于滚动区域下方，间距为25px。 `rollBox.Cont`类定义了图片的实际显示区域，宽度为530px，用于容纳多幅图片。为了实现无缝滚动，`.ScrCont`类设置了非常大的宽度（10000000px），实际上这是一个技巧，当用户滑动鼠标时，会创建视觉上的无限滚动效果。每个图片元素使用`.pic`类进行样式定义，宽度为132px，浮动左对齐，居中显示，同时设置了外边距和边框以增强视觉效果。`.picimg`类是图片的实际元素，设置了内边距、白色背景、灰色边框和居中对齐，确保图片显示清晰且有良好的视觉过渡。总结来说，这个代码展示了如何使用JavaScript和CSS来创建一个美观且功能丰富的横向图片滚动展示，适合用在网页设计中，特别是那些需要连续展示多张图片并提供左右切换导航的场景。尽管存在兼容性问题，但通过简单的调整，可以使之在更多浏览器环境下正常工作。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS控制左右切换鼠标可控的无缝图片滚动代码 - www.webdm.cn</title>
<style type="text/css">

</style>
</head>
<body>
<div class="rollBox">
<div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
<div class="Cont" id="ISL_Cont">
<div class="ScrCont">
<div id="List1">


<div class="pic">

剩余5页未读，继续阅读

黑崎一壶

粉丝: 0
资源: 2

JS实现全屏横向多图滑动效果

vue实现轮播图（滚动切换，无缝切换，自动切换，循环无回滚等）

vue2简单封装轮播图组件

基于swiper的3d跑马灯轮播图，原生js

焦点导航横向滑动网页模板

程序天下:JavaScript实例自学手册

《程序天下：JavaScript实例自学手册》光盘源码

JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

100多个JQuery效果示例（实例）div+css+javascrpit

网页广告代码大全：js实现的各种广告效果合集

JS网页广告代码集锦：120种创意实现

最新资源