Js图片无缝滚动，左右循环滚动感应鼠标停止 - 洪越源代码 - 网站素材 - 其它素材
　　　　　　　　　　
您的位置： >>
>> >>Js图片无缝滚动，左右循环滚动感应鼠标停止
本类下载排行
??????????
总下载排行榜
??????????
Js图片无缝滚动，左右循环滚动感应鼠标停止
源码等级：
源码大小：66K
源码语言：简体中文
授权方式：免费版
源码类别：网站素材 /
运行环境：Win9x/NT/2000/XP/2003/
源码更新： 21:46:09
页面刷新： 10:44:36
相关连接：
下载次数：43 次
源码介绍：
Js图片无缝滚动代码，左右循环滚动感应鼠标停止，无需鼠标点击，基于JavaScript代码实现，没有使用其它的JS插件，整体代码简洁，功能实用，网页前端设计经常会遇到图片滚动特效，这一款代码兼容性也是棒棒的，欢迎参考使用。
立即下载：
相关源码：
注意事项：
?注意：本站源码一律只用鼠标左键打开，否则将不能正常下载！
?如果出现该页无法显示,请多试几次；如果总是不能下载,请点击,谢谢!
?请一定升级到最新版[]才能正常解压本站提供的源码；如有其它问题,欢迎发信.
?由于网站服务器承受能力有限,请其他网站不要直接链接我们提供的源码,谢谢!!js实现可控制左右方向的无缝滚动效果
投稿：lijiao
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js实现可控制左右方向的无缝滚动效果,页面中添加了两个按钮，控制图片滚动的方向，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了无缝滚动效果JavaScript代码实现，供大家参考，具体内容如下】
实现代码：
&!DOCTYPE html&
&meta charset="gb2312" /&
&title&zzzz&/title&
margin: 0;
padding:0;
width: 1000
margin: 100
background-color: #
width: 600
height: 100
#wrapper ul {
#wrapper li{
list-style:
#wrapper li img{
width: 150
height: 100
border-radius: 9
input[type=button]{
margin-top: 20
height: 25
line-height: 25
&script type="text/javascript"&
window.onload=function(){
var timer=
var speed=4;
var od=document.getElementById("wrapper");
var au=od.getElementsByTagName('ul')[0];
var ali=au.getElementsByTagName('li');
au.innerHTML=au.innerHTML+au.innerHTML;
au.style.width=ali[0].offsetWidth*ali.length+'px';
timer=setInterval(move,30)
function move(){
if(au.offsetLeft&-au.offsetWidth/2){
au.style.left='0';
if(au.offsetLeft&0){
au.style.left=-au.offsetWidth/2+'px';
au.style.left=au.offsetLeft+speed+'px';
od.onmouseover=function(){
clearInterval(timer);
od.onmouseout=function(){
timer=setInterval(move,30)
document.getElementById("btn1").onclick=function(){
document.getElementById("btn2").onclick=function(){
&div id="wrapper"&
&li&&img src="img/pic4.jpg"/&&/li&
&li&&img src="img/pic3.jpg"/&&/li&
&li&&img src="img/pic2.jpg"/&&/li&
&li&&img src="img/pic1.jpg"/&&/li&
&input type="button" name="" id="btn1" value="向左" /&
&input type="button" id="btn2" value="向右"/&
大家可以参考以下专题进行学习：
以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js实现简单易用的上下无缝滚动效果 - Cosimo - 博客园
1 &!doctype html&
4 &meta charset="utf-8"&
5 &title&&/title&
6 &meta name="description" content=""&
7 &meta name="keywords" content=""&
9 *{margin:0;padding:0}
10 #slide{position:absolute;height:<span style="background-color: #f5f5f5; color: #px;width:<span style="background-color: #f5f5f5; color: #px;color:#FA8E93;overflow:hidden;border:1px solid #ccc}
11 #slide p{height:34px;line-height:34px;overflow:hidden}
12 #slide span{float:right}
13 &/style&
14 &/head&
17 &div id="slide"&
&div id="slide1"&
&p&&span&领取了烈焰双11礼包&/span&1、dqx5***&/p&
&p&&span&领取了烈焰双11礼包&/span&2、s376***&/p&
&p&&span&领取了街机三国双11礼包&/span&3、sdk1***&/p&
&p&&span&领取了烈火战神双11礼包&/span&4、说好〃不沋伤&/p&
&p&&span&领取了街机三国双11礼包&/span&5、说好〃不沋伤&/p&
&p&&span&领取了烈焰双11礼包&/span&6、gao6***&/p&
&p&&span&领取了街机三国双11礼包&/span&7、ando***&/p&
&p&&span&领取了街机三国双11礼包&/span&8、6813***&/p&
&p&&span&领取了烈焰双11礼包&/span&9、lais***&/p&
&div id=slide2&&/div&
32 &script&
var speed=40
var slide=document.getElementById("slide");
var slide2=document.getElementById("slide2");
var slide1=document.getElementById("slide1");
slide2.innerHTML=slide1.innerHTML
function Marquee(){
if(slide2.offsetTop-slide.scrollTop&=0)
slide.scrollTop-=slide1.offsetHeight
slide.scrollTop++
var MyMar=setInterval(Marquee,speed)
slide.onmouseover=function(){clearInterval(MyMar)}
slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
48 &/script&
50 &/body&
51 &/html&
js实现上下无缝滚动效果，代码很简洁。不过css样式上有个需要注意的地方，#slide{position:absolute}。测试发现如果盒子#slide上面还有很多内容的话，滚动效果只会持续一次，不会连续。盒子#slide加上样式position:absolute即可解决。
随笔 - 170当前位置导航：>>&&&&
JS 无缝上下滚动加定高停顿效果
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&&html ns=""&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&&/title&&/head&&body&&scrt type="text/script"&var $ = function (id) {&&& return "string" == typeof id ? document.getElementById(id) :};
var Class = {& create: function() {&&& return function() {&&&&& this.initialize.apply(this, arguments);&&& }& }}
Object.extend = function(destination, source) {&&& for (var operty in source) {&&&&&&& destination[property] = source[property];&&& }&&&}
function addEventHandler(oTarget, sEventType, fnHandler) {&&& if (oTarget.addEventListener) {&&&&&&& oTarget.addEventListener(sEventType, fnHandler, false);&&& } else if (oTarget.attachEvent) {&&&&&&& oTarget.attachEvent("on" + sEventType, fnHandler);&&& } else {&&&&&&& oTarget["on" + sEventType] = fnH&&& }};
var Scroller = Class.create();Scroller.prototype = {& initialize: function(idScroller, idScrollMid, options) {&&& var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);&&& &&& this.heightScroller = oScroller.offsetH&&& this.heightList = oScrollMid.offsetH&&& &&& if(this.heightList &= this.heightScroller)&&& &&& oScroller.style.overflow = "hidden";&&& oScrollMid.appendChild(oScrollMid.cloneNode(true));&&& &&& this.oScroller = oS&&& &&& this.timer =&&& &&& this.SetOptions(options);&&& &&& this.side = 1;//1是上 -1是下&&& switch (this.options.Side) {&&&&&&& case "down" :&&&&&&&&&&& this.side = -1;&&&&&&&&&&&&&&&&&& case "up" :&&&&&&& default :&&&&&&&&&&& this.side = 1;&&& }&&& &&& addEventHandler(oScrollMid , "mouver", function() { oScroll.Stop(); });&&& addEventHandler(oScrollMid , "mouseout", function() { oScroll.Start(); });&&& &&& if(this.options.PauseStep &= 0 || this.options.PauseHeight &= 0) this.options.PauseStep = this.options.PauseHeight = 0;&&& this.Pause = 0;&&& &&& this.Start();& },& //设置默认属性& SetOptions: function(options) {&&& this.options = {//默认值&&&&& Step:&&&&&&&&&&& 1,//每次变化的px量&&&&& Time:&&&&&&&&&&& 20,//速度(越大越慢)&&&&& Side:&&&&&&&&&&& "up",//滚动方向:"up"是上，"down"是下&&&&& PauseHeight:&&& 0,//隔多高停一次&&&&& PauseStep:&&& 1000//停顿时间(PauseHeight大于0该参数才有效)&&& };&&& Object.extend(this.options, options || {});& },& //滚动& Scroll: function() {&&& var iScroll = this.oScroller.scrollTop, iHeight = this.heightList, time = this.options.Time, oScroll = this, iStep = this.options.Step * this.&&& &&& if(this.side & 0){&&&&&&& if(iScroll &= (iHeight * 2 - this.heightScroller)){ iScroll -= iH }&&& } else {&&&&&&& if(iScroll &= 0){ iScroll += iH }&&& }&&& &&& if(this.options.PauseHeight & 0){&&&&&&& if(this.Pause &= this.options.PauseHeight){&&&&&&&&&&& time = this.options.PauseS&&&&&&&&&&& this.Pause = 0;&&&&&&& } else {&&&&&&&&&&& this.Pause += Math.abs(iStep);&&&&&&&&&&& this.oScroller.scrollTop = iScroll + iS&&&&&&& }&&& } else { this.oScroller.scrollTop = iScroll + iS }&&& &&& this.timer = window.setTimeout(function(){ oScroll.Scroll(); }, time);& },& //开始& Start: function() {&&& this.Scroll();& },& //停止& Stop: function() {&&& clearTimeout(this.timer);& }};
window.onload = function(){&&& new Scroller("idScroller", "idScrollMid",{ PauseHeight:25 });}&/script&&style&#idScroller *{margin:0 padding:0}#idScroller{line-height:25width:100%; height:25 overflow: border:1px solid #000000;}#idScroller ul{width:100%}#idScroller li{width:20%;& float: overflow: list-style:}&/style&&div id="idScroller"&& &div id="idScrollMid"&&&& &ul&&&&&& &li&&a href="/"&&/a&&/li&&&&&& &li&&a href="/"&&/a&&/li&&&&&& &li&&a href="/"&&/a&&/li&&&&&& &li&&a href="/"&&/a&&/li&&&&&& &li&&a href="/"&&/a&&/li&&&&&& &li&&a href="/"&&/a&&/li&&&& &/ul&&&& &div style="clear:"&&/div&& &/div&&/div&&/body&&/html&
上一篇： 下一篇：
赞助商链接