JavaScript实现图片无缝滚动：全方位教程

4星 · 超过85%的资源需积分: 4 132 浏览量更新于2024-12-25 收藏 5KB TXT 举报

本文档主要介绍了如何使用JavaScript在HTML页面中实现图片的无缝滚动效果，支持水平和垂直方向。首先，页面使用了`<%@pagelanguage="java"import="java.util.*"pageEncoding="GB18030"%>`的JavaServer Pages (JSP) 标签，表明该页面是基于JSP技术构建的，并设置了编码格式为GB18030。在页面的`<head>`部分，我们看到了相关的CSS链接 `<link rel="stylesheet" type="text/css" href="styles.css">`，这表示有一个名为"styles.css"的外部样式表文件，用于定义页面的样式。接下来的JavaScript代码部分主要负责图片的滚动功能： 1. `vargoDown=true; function changeUp() { ... }` 和 `function changeDown() { ... }` 这两个函数分别控制图片向上和向下滚动，通过设置变量`goDown`来决定滚动的方向。当`goDown`为true时，图片向下滚动；反之，向上滚动。 2. `function Circle() { ... }` 是核心滚动函数，根据`goDown`的值判断滚动到顶部还是底部，然后相应地调整`circleImg.scrollTop`的值，实现了无缝滚动效果。如果`goDown`为true，当滚动到顶部时，将滚动位置设置为最后一行的底部；反之亦然。 3. `var Interval = setInterval(Circle, 10);` 和 `function imgStop() { clearInterval(Interval); }`、`function imgGo() { Interval = setInterval(Circle, 10); }` 这些代码片段设置了定时器，使得图片每10毫秒执行一次`Circle`函数，从而达到连续滚动的效果。`imgStop()`函数用于停止滚动，而`imgGo()`则重新启动滚动。 4. 在表格的鼠标悬停事件`onMouseOver="chang"`中，可能有一个`chang`函数未显示，但推测可能是为了在用户鼠标悬停时改变图片滚动的行为或者样式。总结来说，这个代码示例展示了如何利用JavaScript在div容器内创建一个可以水平和垂直方向无缝滚动的图片轮播效果，用户可以通过按钮或鼠标操作来控制滚动的开始和停止。页面的样式和交互逻辑主要由`styles.css`和这些JavaScript函数实现。对于想要学习如何在网页上实现图片无缝滚动效果的开发者来说，这是一个实用的代码示例。

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>

<html>
<head>
<title>right</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
//-----垂直方向无缝滚动
var goDown=true;

function changeUp(){
goDown=false;
Circle();
}
function changeDown(){
goDown=true;
Circle();
}

function Circle(){
if(goDown){
if(circleImg.scrollTop==0){
circleImg.scrollTop=circleImg.scrollHeight-circleImg.offsetHeight;
}else{
circleImg.scrollTop--;
}
}else{
if(circleImg.scrollTop==circleImg.scrollHeight-circleImg.offsetHeight){
circleImg.scrollTop=0;
}else{

剩余6页未读，继续阅读

李占宏

粉丝: 1
资源: 4

JavaScript实现图片无缝滚动：全方位教程

JS+DIV无缝滚动代码

js div实现左右滚动 无缝接 ，比 marquee强

DIV无缝滚动

div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

使用Javascript简单实现图片无缝滚动

Javascript 实现图片无缝滚动

原生javascript实现图片无缝滚动效果

DIV+CSS实现横向无缝图片滚动效果

javascript实现左右控制无缝滚动

javascript实现的上下无缝滚动效果

最新资源

js div实现左右滚动无缝接，比 marquee强