<script>
//<!--代码开始-->
var speed = 10;<!--速度控制,数值越大速度越慢-->
var intAWidth = 530;<!--滚动区域宽度-->
var intAHeight = 80;<!--滚动区域高度-->
var direction = "left";<!--滚动方向-->
var collectScroll;
var tab;
var tab1;
var tab2;
var MyMar;
/**
*自动滚动类
*/
function autoScroll(){
this.items = [];
this.addItem = function(adURL,strURL,strBak,intTarget){
var newItem = {};
newItem.adURL = adURL;
newItem.strURL = strURL;
newItem.strBak = strBak;
newItem.intTarget = intTarget;
this.items[this.items.length] = newItem;
}
this.play = function(){
collectScroll = this.items;
scrollHtml();
tab=document.getElementById("demo");
tab1=document.getElementById("demo1");
tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
MyMar=setInterval(Marquee,speed);
}
}
/**
*页面滚动类
*/
function scrollHtml(){
var imgHtml = "";
for(var i=0;i<collectScroll.length;i++){
var a = collectScroll[i];/*这个地方有些网站上贴的代码少了【i】 */
imgHtml += "<a href=\""+a.strURL+"\" target=\""+a.intTarget+"\"><img src=\""+a.adURL+"\" alt=\""+a.strBak+"\" border=\"0\" /></a>";
}
var b,c,d;
if(direction == "left" || direction == "right"){
b = "<div id=\"indemo\" style=\"float: left;width: 800%\">";
c = " style=\"float: left\"";
d = "</div>";
}else{
b = "";
c = "";
d = "";
}
document.writeln("<div id=\"demo\" onmouseover=\"clearInterval(MyMar)\" onmouseout=\"MyMar=setInterval(Marquee,speed)\" style=\"overflow:hidden; width:"+intAWidth+"px;height:"+intAHeight+"px\">");
document.writeln(b+"<div id=\"demo1\""+c+">");
document.writeln(imgHtml);
document.writeln("</div><div id=\"demo2\""+c+">"+d+"</div></div>");
}
/**
*滚动方向
*/
function Marquee(){
if(direction == "top"){
if(tab2.offsetTop-tab.scrollTop<=0){
tab.scrollTop-=tab1.offsetHeight;
}else{
tab.scrollTop++;
}
}else if(direction == "down"){
if(tab1.offsetTop-tab.scrollTop>=0)
tab.scrollTop+=tab2.offsetHeight;
else{
tab.scrollTop--;
}
}else if(direction == "left"){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth;
else{
tab.scrollLeft++;
}
}else if(direction == "right"){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth;
else{
tab.scrollLeft--;
}
}
}
var theAutoScroll= new autoScroll();
theAutoScroll.addItem("img/yjqx.jpg","qiangxian.asp","维修抢险","_blank");// img/yjqx.jpg
theAutoScroll.addItem("img/sqwd1.jpg","shouqiwangdian.asp","售气网点","_blank");
theAutoScroll.addItem("img/pegc1.jpg","pepipe.asp","PE管材","_blank");
theAutoScroll.addItem("img/rqj.jpg","ranqiju.asp","燃具经营","_blank");
<!--此处可以继续添加图片-->
theAutoScroll.play();
<!--代码结束-->
</script>
分享到:
相关推荐
在图片无缝滚动中,CSS可以用来设置图片的定位(positioning)、过渡(transitions)和动画(animations)。例如,我们可以通过绝对定位使图片叠加在一起,然后利用CSS3的`animation`属性创建一个平滑的滚动效果。...
"图片向左无缝滚动"是一个利用JavaScript技术实现的功能,它能够让一组图片在水平方向上连续不断地滚动,给人一种不间断的视觉感受。这个功能尤其适用于展示产品序列、新闻更新或者任何需要连续显示信息的场景。 ...
3. JavaScript代码:创建一个定时器,根据需要的滚动速度调整时间间隔,然后改变图片的位置使其看起来在滚动。 ```javascript var slider = document.querySelector('.slider'); var images = slider....
在网页设计中,"不间断无缝滚动图片"是一种常见的视觉效果,它通过JavaScript或者CSS3等技术实现,使得图片能够连续不断地、平滑地从一端滚动到另一端,给人一种连贯且无中断的视觉体验。这种效果常用于网站的轮播图...
在现代网页设计中,无限循环的无缝滚动是一种常见的动画效果,尤其是在列表或者新闻滚动模块中。使用CSS3实现这一效果,不仅可以提升用户体验,而且可以减少JavaScript的使用,简化前端代码。CSS3中提供的一些关键...
2. **无缝滚动**:无缝滚动是网页设计中的一种效果,使得内容(如图片)在滚动时没有明显的断点,仿佛一直在平滑移动。这种效果可以增加用户体验,尤其在展示产品或信息时更为吸引人。 3. **实现方法**:使用jQuery...
4. **jQuery实现滚动**:编写JavaScript代码,使用jQuery选择器选取图片容器,设置定时器控制滚动速度,通过修改容器的`margin-left`属性来实现图片的平滑移动。 ```javascript $(document).ready(function() { var...
- `js`:JavaScript代码通常放在这里,可能包含jQuery库以及无缝循环滚动插件的源代码。 - `css`:CSS样式表,用于定义元素的外观和布局,以及滚动动画的样式。 通过分析这些文件,我们可以了解插件的工作原理,并...
下面是一段简化的JavaScript代码示例,展示了如何实现图片无缝滚动: ```javascript var wrap = document.getElementById('wrap'); var content = document.getElementById('content'); var list = content....
以上就是原生JavaScript实现无缝滚动的基本思路和代码示例。在实际应用中,可能还需要考虑其他因素,如性能优化(例如使用节流或防抖函数)、自适应布局、触摸设备支持等。通过不断实践和调整,你可以创建出符合项目...
本文将深入探讨“kxbdSuperMarquee.js”这一JavaScript库,它提供了无缝滚动的效果,使得滚动元素在到达终点后能平滑地返回起点,形成一种循环滚动的视觉体验。 一、kxbdSuperMarquee.js简介 kxbdSuperMarquee.js...
4. **无缝滚动**:当图片滚动到最后一张时,使用负偏移量将第一张图片移动到末尾,反之亦然,从而实现无缝循环的效果。 此外,压缩包中的"Untitled-1.html"很可能是示例的HTML文件,它包含了页面结构和Jquery脚本的...
在网页设计中,动态效果是吸引用户注意力的重要手段之一,其中图片的无缝滚动效果就是一种常见且实用的设计。本文将详细讲解如何使用jQuery库来实现一个可控的图片向左向右无缝滚动的效果。 首先,我们需要了解...
这通常涉及到创建一个新的图片实例,将其位置设置为当前图片的边界之外,然后逐渐调整位置以形成无缝滚动效果。 5. **优化性能**:为了提高性能和减少重绘,可以使用CSS3的`transform`属性进行位移,而不是直接更改...
jQuery kxbdMarquee 是一款基于JavaScript库jQuery的插件,专为实现网页内容的无缝滚动效果而设计。这种滚动效果通常用于新闻标题、广告横幅或其他需要连续展示但空间有限的区域,使得信息能以循环不间断的方式呈现...
- **CSS样式设置**:为容器和列表设置合适的样式,确保图片可以水平排列,并设置隐藏溢出的内容,实现无缝滚动的视觉效果。 - **JavaScript逻辑实现**:利用jQuery编写控制滚动的函数。首先初始化需要控制的参数,...
通过学习这个源码,开发者不仅可以了解如何实现文字无缝滚动,还可以深入理解jQuery的动画机制,这对提升网页动态效果的开发能力非常有帮助。同时,这也为自定义其他类型的滚动效果提供了基础,比如图片轮播、标题...
无缝滚动是一种常见的网页特效,用于展示连续且平滑过渡的...无缝滚动不仅可以应用于图片列表,还可以扩展到其他内容的滚动展示,如文本或自定义元素。通过理解其工作原理,我们可以灵活地将其应用到各种网页设计中。
接下来,我们编写JavaScript代码监听页面滚动事件。可以使用`window.onscroll`或jQuery的`$(window).scroll()`函数: ```javascript window.onscroll = function() { // 在这里检查客服元素的位置 }; $(document)...
在网页设计中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了JavaScript代码的编写,尤其是在处理DOM操作、动画效果和事件处理等方面。本主题聚焦于利用jQuery来创建一种特殊的图片滚动特效——“slide”...