`
yxgblog
  • 浏览: 38397 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

图片无缝左右滚动

XHTMLCSSHTML 
阅读更多

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#demo { background: #FFF; overflow:hidden; width:980px; margin:8px auto 0 auto;}
#demo img { width:120px; height:119px; padding:1px; border:1px solid #99cc99; margin-right:10px; margin-left:5px;}
#indemo { float:left; width: 980%;}
#demo1 {float: left;}
#demo2 {float: left;}
-->
</style>


</head>

<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>


</body>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

</html>

分享到：
更换颜色点击不同的按钮
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    鼠标感应图片无缝左右滚动JS代码

    "鼠标感应图片无缝左右滚动JS代码"就是一种实现这种效果的技术，它允许用户通过鼠标移动来控制图片的左右滚动，为网站增添动态视觉效果。 无缝滚动通常应用于图片轮播、产品展示或者新闻滚动等场景，它通过...

    marquee图片无缝滚动（上下左右均可）

    "marquee图片无缝滚动（上下左右均可）" 这个标题涉及到一个JavaScript或HTML元素的使用，即`&lt;marquee&gt;`标签，它用于创建一个滚动的效果，通常用于文字或图像的自动滚动。这里的关键词是“无缝滚动”，意味着在滚动...

    图片无缝滚动插件上下左右图片无缝滚动代码.zip

    6. **方向检测**：上下左右滚动需要检测用户滚动的方向。这通常通过比较当前滚动位置和上一次滚动位置来实现，或者利用浏览器提供的滚动事件属性，如`event.deltaY`和`event.deltaX`。 7. **无缝循环**：为实现...

    jquery图片无缝滚动代码左右上下无缝滚动图片

    除了基本的左右滚动，还可以实现上下滚动，只需要调整CSS和jQuery代码中的定位属性即可。此外，还可以添加箭头控制手动滚动，或者添加自动暂停和播放功能，以适应不同场景的需求。 总的来说，"jQuery图片无缝滚动...

    无需点击鼠标感应图片无缝左右JS滚动代码.zip

    综上所述，这个压缩包提供了一套实现网页图片无缝左右滚动的JavaScript代码，并且通过鼠标感应来触发滚动，提高了用户体验。用户在使用时，需要注意按照“使用须知.txt”中的指示进行操作，并结合其他可能的资源文件...

    js图片左右无缝滚动用鼠标控制图片滚动

    在图片无缝滚动中，JavaScript负责处理用户的鼠标事件（如点击、移动）并根据这些事件更新图片的显示状态。 2. **DOM操作**：Document Object Model (DOM)是HTML和XML文档的结构表示，JavaScript通过DOM API可以...

    带滚动条无缝左右滑动图片效果

    "带滚动条无缝左右滑动图片效果"是一个常见的功能，它为用户提供了一种流畅、直观的方式来浏览一系列图片，同时保持界面的简洁和高效。这个功能常见于产品展示、相册应用或者任何需要连续展示多个图像的场景。 首先...

    图片左右无缝滚动JS代码

    【标题】图片左右无缝滚动JS代码 在网页设计中，图片滚动效果是一种常见的动态展示方式，可以吸引用户的注意力并提供视觉上的吸引力。"图片左右无缝滚动JS代码"是指使用JavaScript编程语言实现的一种特效，它允许...

    横向无缝左右滚动的JS图片展示代码

    在网页设计中，为了吸引用户的注意力并提供良好的用户体验，一种常见的技术是实现横向无缝左右滚动的图片展示。这种效果能够使图片库或轮播图在水平方向上无间断地循环滚动，给予用户流畅的视觉体验。在这个场景下，...

    左右无缝滚动图片

    【描述】"无缝滚动 jquery 左右滚动 滚动图片 兼容所有主浏览器 请放心使用"表明这个技术是基于jQuery库实现的，并且支持主流的浏览器，包括Chrome、Firefox、Safari、Edge和Internet Explorer等。这意味着开发者...

    可以左右移动横向无缝滚动的JS图片展示

    本文将深入探讨如何使用JavaScript实现一个可以左右移动的横向无缝滚动图片展示的效果。 首先，我们需要理解无缝滚动的概念。无缝滚动是指在用户滚动页面时，内容能够平滑过渡，没有明显的中断或跳跃感，就像一个...

    鼠标感应图片无缝左右JS滚动代码.zip

    【标题】"鼠标感应图片无缝左右JS滚动代码.zip" 是一个包含JavaScript代码的资源包，主要用于实现一种交互式的图片滚动效果。这种效果使得用户在网页上通过鼠标悬停就能实现图片的平滑、无缝左右滚动，增加了用户...

    jQuery图片左右无缝滚动特效代码

    jQuery图片左右无缝滚动特效是一种常见的网页动态效果，用于展示多张图片并营造出平滑、连贯的浏览体验。这种特效通常应用于网站的幻灯片、产品展示或相册等部分，可以提升用户体验，使页面更具吸引力。在这个...

    文字图片无缝滚动

    【文字图片无缝滚动】是一种常见的网页动态效果，用于在有限的空间内展示大量文字或图片，通过不断滚动的方式，使得信息能够连续、平滑地呈现，提高用户体验。在本主题中，我们将深入探讨如何使用JavaScript来实现...

    图片无缝左右+上下滚动

    【图片无缝左右+上下滚动】是一种常见的网页设计技术，它为用户提供了一种流畅且吸引人的浏览体验，尤其适用于展示图像集合或产品展示等场景。这种技术通常基于JavaScript库或者CSS3动画来实现，使得用户在浏览多张...

    Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip

    3. **支持上下左右滚动**：通常图片滚动插件只支持横向滚动，但imgscroll同时支持垂直滚动，这为网页设计提供了更大的灵活性，可以根据页面布局选择合适的滚动方向。 4. **依赖jQuery**：jQuery是一个广泛使用的...

    jquery图片无缝滚动插件上下左右图片无缝滚动代码

    标题中的“上下左右图片无缝滚动代码”表明我们要讨论的是一个可以支持四个方向滚动的插件。实现这种效果通常包括以下步骤： 1. **选择器与元素集合**：使用jQuery的选择器选取需要滚动的图片容器，例如`$("#image...

Magicbox
Global site tag (gtag.js) - Google Analytics