本文实例讲述了jQuery实现的无缝广告图片左右滚动功能。分享给大家供大家参考，具体如下：
先是写了一个此功能的jQuery插件,但是一时写不出如何使用鼠标进行滚动方向的切换,于是又写了另一个可以实现切换的版本...
原理:
1.把滚动的内容复制2份放到原内容左右,这样无论向左右滚动都不会出现断掉的情况
2.改变内容样式的left值实现滚动效果,向左或向右滚动一个内容的长度后,还原并继续滚动,这样看起来就像无缝一直滚动的样子了(视觉上的效果,^_^)
3.鼠标放上去则clearInterval,移开后继续setInterval
4.移动效果写成一个方法,切换方向时调用一次即可
<style>
* { margin:0; padding:0;}
ul { list-style:none; margin:0; padding:0;}
img { border:none;}
.bar {
margin:0 auto;
width:800px; height:48px; overflow:hidden;
line-height:48px; border:2px solid #EEE;}
.bar a.a_left,
.bar a.a_right{
float:left;
width:11px; height:48px;
background:url(a_left.png) no-repeat left center;}
.bar a.a_right { float:right; background-image:url(a_right.png);}
.bar_wrap { float:left; position:relative; width:776px; height:48px; white-space:nowrap; overflow:hidden;}
.bar_inner { position:relative; height:48px; line-height:48px; left:0; width:2880px; white-space:nowrap;}
.bar_inner ul { height:48px; overflow:hidden; float:left; width:960px;}
.bar_inner ul li{ float:left;}
.bar_inner ul li a{ padding:0 16px; display:block; height:48px; line-height:48px;}
</style>
<body>
<div class="bar">
<a href="#" class="a_left"></a>
<div class="bar_wrap">
<div class="bar_inner">
<ul>
<li><a href="#" title="" ><img src="/UploadFiles/2021-04-02/pic.png">
var scrollBar = function(){
this.step = 14;
this.speed = 100;
this.inner = $(".bar_inner");
this.wrap = $(".bar_wrap");
this.ini = 0;
this.pos = "l";
this.s ;
}
scrollBar.prototype = {
check : function(){
return this.inner.width() < this.wrap.width() "left",- this.inner.width()/3 + "px");
}
},
run : function(pos){
if (! this.check()){ return;}
if( this.ini == 0) {this.init();}
this.ini = 1;
this.pos = pos;
var that = this;
var f = function(){
if(that.pos == "l"){
var l = parseInt( that.inner.css("left") ) - that.step;
that.inner.css("left",l + "px");
//console.log(l);
if ( parseInt(that.inner.css("left")) <= -( that.inner.width()/ 3 * 2) ){
that.inner.css("left",- that.inner.width() /3 + "px");
}
}
else {
var l = parseInt( that.inner.css("left") ) + that.step;
that.inner.css("left",l + "px");
//console.log( l );
if( parseInt(that.inner.css("left")) >= 0 ){
that.inner.css("left", - that.inner.width()/3 + "px");
}
}
}
if(this.s) {clearInterval(that.s);};
this.s = setInterval( f ,that.speed);
that.inner.hover(
function(){ clearInterval(that.s);},
function(){clearInterval(that.s); that.s = setInterval( f ,that.speed); }
)
}
}
var s = new scrollBar();
s.run("r");
$(".a_left").mouseover(function(){
clearInterval( s.s);
s.run("l");
})
$(".a_right").mouseover(function(){
clearInterval( s.s);
s.run("r");
})
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。