js图片滚动在一个页面可以多次调用的问题

2015-05-05 04:28:49 179 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›
wg910 wg910 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 + 加入社区
【论文精度】生成式预训练模型——BART（Bidirectional and Auto-Regressive Transformers） ​ BART是一个预训练的seq2seq的去噪自编码（denoising autoencoder）模型，BART以下方式进行训练①用任意的噪声函数(noising function)去破坏文本；②学习一个模型来重建原始文本。它使用一个标准的基于transformer的神经机器翻译架构，可以看作是BERT（双向编码器）、GPT（left-to-right解码器）以及其他预训练方案的推广。 阅读详情
我要在页面里调用这样的js效果8次，样式是一样的怎么能多次调用而没有冲突呢！


var Speed = 10; //速度(毫秒)

var Space = 10; //每次移动(px)

var PageWidth = 305; //翻页宽度

var fill = 0; //整体移位

var MoveLock = false;

var MoveTimeObj;

var Comp = 0;

var AutoPlayObj = null;

GetObj(c).innerHTML = GetObj(b).innerHTML;

GetObj(a).scrollLeft = fill;

GetObj(a).onmouseover = function(){clearInterval(AutoPlayObj);}

GetObj(a).onmouseout = function(){AutoPlay();}

AutoPlay();

function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval



('document.all.'+objName)}}

function AutoPlay(){ //自动滚动

clearInterval(AutoPlayObj);

AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间

}

function ISL_GoUp(){ //上翻开始

if(MoveLock) return;

clearInterval(AutoPlayObj);

MoveLock = true;

MoveTimeObj = setInterval('ISL_ScrUp();',Speed);

}

function ISL_StopUp(){ //上翻停止

clearInterval(MoveTimeObj);

if(GetObj(a).scrollLeft % PageWidth - fill != 0){

Comp = fill - (GetObj(a).scrollLeft % PageWidth);

CompScr();

}else{

MoveLock = false;

}

AutoPlay();

}

function ISL_ScrUp(){ //上翻动作

if(GetObj(a).scrollLeft <= 0){GetObj(a).scrollLeft = GetObj



(a).scrollLeft + GetObj(b).offsetWidth}

GetObj(a).scrollLeft -= Space ;

}

function ISL_GoDown(){ //下翻

clearInterval(MoveTimeObj);

if(MoveLock) return;

clearInterval(AutoPlayObj);

MoveLock = true;

ISL_ScrDown();

MoveTimeObj = setInterval('ISL_ScrDown()',Speed);

}

function ISL_StopDown(){ //下翻停止

clearInterval(MoveTimeObj);

if(GetObj(a).scrollLeft % PageWidth - fill != 0 ){

Comp = PageWidth - GetObj(a).scrollLeft % PageWidth + fill;

CompScr();

}else{

MoveLock = false;

}

AutoPlay();

}

function ISL_ScrDown(){ //下翻动作

if(GetObj(a).scrollLeft >= GetObj(b).scrollWidth){GetObj(a).scrollLeft =



GetObj(a).scrollLeft - GetObj(b).scrollWidth;}

GetObj(a).scrollLeft += Space ;

}

function CompScr(){

var num;

if(Comp == 0){MoveLock = false;return;}

if(Comp < 0){ //上翻

if(Comp < -Space){

   Comp += Space;

   num = Space;



}else{

   num = -Comp;

   Comp = 0;

}

GetObj(a).scrollLeft -= num;

setTimeout('CompScr()',Speed);

}else{ //下翻

if(Comp > Space){

   Comp -= Space;

   num = Space;

}else{

   num = Comp;

   Comp = 0;

}

GetObj(a).scrollLeft += num;

setTimeout('CompScr()',Speed);

}

}







  <div class="img1"><img class="img1" alt="下一幅" width="42" height="60" onMouseOut="ISL_StopDown()" onMouseUp="ISL_StopDown()" onMouseDown="ISL_GoDown()" style="cursor: pointer" src="images/left.png" /></div>

          <div class="img2"><img class="img2" alt="上一幅" width="42" height="60" onMouseOut="ISL_StopUp()" onMouseUp="ISL_StopUp()" onMouseDown="ISL_GoUp()" style="cursor: pointer" src="images/right.png" /></div>

          <div class=rollBox>

            <div id=ISL_Cont class=Cont>

              <div class=ScrCont>

                <div id=List1>

                  <div class=pic >

                    <div class="pic-bj"><a  href="#" ><img src="images/emp-01.jpg"  /></a></div>

                    <div class="txt"  noWrap><a href="#">案例名称</a></div>

                  </div>

                  <div class=pic >

                    <div class="pic-bj"><a  href="#" ><img src="images/emp-01.jpg"  /></a></div>

                    <div class="txt"  noWrap><a href="#">案例名称</a></div>

                  </div>

                  <div class=pic >

                    <div class="pic-bj"><a  href="#" ><img src="images/emp-01.jpg"  /></a></div>

                    <div class="txt"  noWrap><a href="#">案例名称</a></div>

                  </div>

                 <div class=pic >

                    <div class="pic-bj"><a  href="#" ><img src="images/emp-01.jpg"  /></a></div>

                    <div class="txt"  noWrap><a href="#">案例名称</a></div>

                  </div>

                 <div class=pic >

                    <div class="pic-bj"><a  href="#" ><img src="images/emp-01.jpg"  /></a></div>

                    <div class="txt"  noWrap><a href="#">案例名称</a></div>

                  </div>

                  <div class=pic >

                    <div class="pic-bj"><a  href="#" ><img src="images/emp-01.jpg"  /></a></div>

                    <div class="txt"  noWrap><a href="#">案例名称</a></div>

                  </div>

                </div>

                <div id=List2></div>

              </div>

            </div>

          </div>
...全文
Dify插件实战：实时渲染AI生成的HTML/SVG/Canvas代码 在现代Web开发与AI应用集成中，前端渲染技术是实现动态内容展示的核心。其原理在于浏览器引擎解析HTML、CSS、JavaScript等代码，并将其转换为可视化的用户界面。这项技术的价值在于极大提升了开发效率与用户体验，允许开发者快速构建和迭代交互式应用。在AI应用开发领域，尤其是大语言模型（LLM）集成场景，如何将模型生成的**结构化代码**（如描述UI的HTML或数据图表的SVG）实时转化为可视化组件，成为一个关键需求。这直接关系到**Dify**等低代码AI平台能否提供流畅的、所见即所得的交互体验。本 阅读详情

相关推荐

js产品图片可控自动无缝滚动jq

JavaScript语法：避免使用ES6以上的新特性，以免在旧版本浏览器中出错。五、多次调用1. 封装组件：将图片滚动功能封装成一个可复用的组件，可以通过调用特定方法在页面的不同位置实现相同效果。

嗨你我他

精通页面图片滚动特效的JavaScript实现

在当前的网页设计中，图片滚动特效是一个重要的视觉元素，能够显著提升用户的浏览体验和页面的互动性。页面图片滚动特效不仅包括基本的图片切换展示，还涉及到了更为复杂的动画效果，如带倒影的图片切换、3D动画效果、平滑滚动等。本章将概述页面图片滚动特效的定义、分类以及它们在现代网页设计中的重要性，为进一步的技术探讨和实现打下基础。通过探讨和实践这些特效，开发者可以在保持页面性能的同时，为用户提供更为丰富和吸引人的视觉体验。JavaScript 是一种高级的、解释执行的编程语言，它广泛用于网页的前端开发。

大熊小清新

MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类)

**兼容性**：作为一个成熟的JS库，MSClass 应该已经考虑了跨浏览器的兼容性问题，确保在多种环境下都能正常工作。5.

shadowvane

html2canvas案例解决模糊不清及滚动下拉问题（已测试，可直接应用到项目中）

如果页面内容超过视口，可以分多次截取，每次滚动一定的像素，然后合并生成的Canvas图像。2.

fangkeit

js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)

`animateTimeout`用于在动画结束后清空之前的`setTimeout`，避免因为多次连续触发滚轮事件而导致的定时器未被清除的问题。6.

weixin_38667835
评论 3
收藏 已收藏
分享
返回顶部
wg910
wg910
JavaScript 87,984 成员 224,681 内容
+ 加入社区