js图片滚动效果时间可随意设定当鼠标移上去时停止

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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>图片滚动</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 1000px;
}

#demo img {
border: 10px solid #F2F2F2;
}

#indemo {
float: left;
width: 800%;
}

#demo1 {
float: left;
}

#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/小美景1.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景2.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景3.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景4.jpg" border="0" />
</a>
<a href="#"><img src="images/小美女4.jpg" border="0" />
</a>
<a href="#"><img src="images/小美女2.jpg" border="0" />
</a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed=50;
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>
</body>
</html>
(0)

相关推荐

  • javascript页面上使用动态时间具体实现

    复制代码 代码如下: <!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=&qu

  • js双色时间效果代码

    TIMER TIMER [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js实现动态显示时间效果

    话不多说,请看代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>时间显示器</title> </head> <body> <div id="d"></div> <script type="text/javascript"> var nowT

  • 纯JS实现动态时间显示代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <script language="javascript">

  • JavaScript实现同步于本地时间的动态时间显示方法

    本文实例讲述了JavaScript实现同步于本地时间的动态时间显示方法.分享给大家供大家参考.具体分析如下: 动态显示时间的例子非常简单,了解JavaScript之后就是几行的代码便能够完成的事情, 但是对于一些未接触过JavaScript的人来说,几乎很大工程的样子,然后在网上苦苦寻觅代码,之后在茫茫的html代码中寻求不到,最终得不到要领. 一.基本目标 实现一个随同客户端(浏览者机器上的)时间的网页文本时间,使用最短的代码. 二.制作过程 复制代码 代码如下: <!DOCTYPE html

  • JS 时间显示效果代码

    复制代码 代码如下: function settime() { var myyear,mymonth,myweek,myday,mytime,mymin,myhour,mysec; var mydate=new Date(); myyear=mydate.getFullYear(); mymonth=mydate.getMonth(); myday=mydate.getDate(); myhour=mydate.getHours(); mymin=mydate.getMinutes(); mys

  • JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享

    要实现类似功能,用JS就可以,实现方法如下: 一.javascript函数实现:实例1: 复制代码 代码如下: //JavaScript函数:var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;var halfamonth = day * 15;var month = day * 30;function getDateDiff(dateTimeStamp){var now = new Date().getTime()

  • 仅2行代码的javascript按指定格式显示日期时间效果

    在蓝色理想学习了N年,今天第一次发点自己的原创,因为我曾为解决该问题花了不少时间,主要是网络上找到的代码要么非常烦琐,要么不能通用或格式只能固定几个,所以我专门对这个问题进行了研究,最终优化到只有2行代码,非常精简.主要是用到了JSON.正则和eval 函数,如果有什么问题欢迎大家指正. 感谢zhanyuzai 的优化,经测试2行代码没有发现问题,现在已更新过来 /// /// 格式化显示日期时间 /// /// 待显示的日期时间,例如new Date() /// 需要显示的格式,例如yyyy-

  • js显示动态时间的方法详解

    本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的

  • js图片滚动效果时间可随意设定当鼠标移上去时停止

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • JS无缝滚动效果实现方法分析

    本文实例讲述了JS无缝滚动效果实现方法.分享给大家供大家参考,具体如下: 效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向左运动的效果 3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0.向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度).(拉的瞬间很快,用户察觉不到,造成一种无

  • jquery中$.fn和图片滚动效果实现的必备知识总结

    前言 图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery.IIFE.setInterval等基础以及$.fn用法: jquery中$.fn用法 $.fn是jquery的命名空间,如果对jquery源码有过学习,就不难发现源码中有如下代码: jquery.fn=jquery.prototype={ init:function(selector,context){ /* *code */ } } 所以说jquery.fn也就是jque

  • jQuery+css实现图片滚动效果(附源码)

    源码下载 bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间距,默认为0. auto:是否自动滚动,默认为false. auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒. auto_dir:自动滚动的方向,默认为next,你可以试下prev. next_image:向右滚方向按钮图片,可以用CSS设

  • 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此

  • 标准的js无缝滚动效果

    本文实例为大家分享了js无缝滚动效果实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> #warp{ width: 1200px; height: 300px; overflow: hidden; margin:100p

  • 基于vue.js无缝滚动效果

    一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(

  • 微信小程序实现图片滚动效果示例

    本文实例讲述了微信小程序实现图片滚动效果.分享给大家供大家参考,具体如下: 效果:左右滑动可以切换展示图片 代码: <!--pages/test/test.wxml--> <!-- 组件 --> <swiper> <swiper-item wx:for="{{imgUrls}}"> <image src='{{item}}' width="335" height="150" mode='wid

  • 常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <-----> </head> <body> <!--向下滚动代码开始--> <div id="colee" style="overflow:hidden;height:253px;width:410px;"> <div id="colee1"> <p><img src=&quo

  • 简单实现js无缝滚动效果

    本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vert

随机推荐