[经验分享] 图片无缝横向滚动代码，jQuery控制向左向右

奇

671 主题	1 听众	3247 积分

中级设计师

Rank: 5 Rank: 5

纳金币: 324742
精华: 0

电梯直达

楼主

发表于 2011-12-30 19:12:44 |只看该作者 |倒序浏览

一款网页上无缝横向滚动的图片代码，利用jQuery技术控制图片向左、向右来回切换，一般用在网站文章页的尾部，烈火小编建议大家调用一些美女图片，这样可以增加网站的PV浏览量哦。哈哈，你是不是也这样想的？
　　代码特点：
　　1、兼容IE6、7、8，FF，opera，chrome，safari。

　　2、无操作时，图片自动循环滚动，鼠标移到图片上时，停止滚动，移出图片，开始滚动。

　　3、鼠标移到左侧按钮时，图片停止自动滚动，单击按钮，图片向左滚动，鼠标移出，自动滚动开始。
　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。
　　点击查看：网页特效
　　运行演示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>图片无缝滚动代码，向左向右可以控制_烈火网_LIehuo.Net</title>

<script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script>

<style type="text/css">

*{ margin:0; padding:0;}

#box{ border:1px #ccc solid; width:600px; height:200px; overflow:hidden;margin:100px auto 0; position:relative;}

#div{ width:2400px; position:relative;}

#img,#img1{ list-style:none; width:1200px; float:left;}

#img img,#img1 img{width:200px; float:left;}

ul li{ float:left;}

#but{ width:600px; height:30px; margin:0 auto;}

#a{ float:left;}

#b{ float:right;}

#but input{ width:80px; height:30px; font-size:22px; font-weight:bold;}

</style>

</head>

<body>

<div id="box">

<div id="div">

<ul id="img">

<li><img src="/uploads/common/images/liehuonet_400x345_1.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_2.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_3.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_4.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_5.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_6.jpg" /></li>

</ul>

<ul id="img1">

<li><img src="/uploads/common/images/liehuonet_400x345_1.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_2.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_3.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_4.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_5.jpg" /></li>

<li><img src="/uploads/common/images/liehuonet_400x345_6.jpg" /></li>

</ul>

</div>

</div>

<div id="but">

<div id="a"><input type="button" id="but1" value="左移" /></div>

<div id="b"><input type="button" id="but2" value="右移" /></div>

</div>

<script type="text/javascript">

/*获取id节点的函数*/

$(function(){

function getId(id){

return $('#'+id);

}

/*创建图片滚动对象(前四个参数是标签的id)*/

function marquee(divElem,imgElem,lBut,rBut,imgWidth,speed,autoSpeed){//参数含义(包含两组图片的div，包含一组图片的ul，左侧按钮，右侧按钮,图片宽度，单张图片滚动时间，图片滚动间隔时间)

this.box=getId(divElem);

this.img=getId(imgElem);

this.lBut=getId(lBut);

this.rBut=getId(rBut);//获取各个节点

this.imgWidth=imgWidth;

this.speed=speed;

this.autoSpeed=autoSpeed;

this.num=0;//全局变量,用来进行条件控制

var that=this;

/*图片自动滚动函数*/

this.autoGo=function(){

that.num+=that.imgWidth;

that.box.animate({right:"+="+that.imgWidth+"px"},that.speed);

if(that.num>=that.img.width()){

that.num=0;

that.box.animate({right:"0px"},0);

}

}

}

/*对象方法*/

marquee.prototype={

/*图片的自动滚动*/

autoScroll:function(){

var that=this;

auto=setInterval(this.autoGo,this.autoSpeed);

this.box.mouseover(function(){

clearInterval(auto);

});

this.box.mouseout(function(){

auto=setInterval(that.autoGo,that.autoSpeed);

})

this.lBut.mouseover(function(){

clearInterval(auto);

if(that.num==that.img.width()){

that.num=0;

that.box.animate({right:"0px"},0);

}

});

this.lBut.mouseout(function(){

auto=setInterval(that.autoGo,that.autoSpeed);

});

this.rBut.mouseover(function(){

clearInterval(auto);

if(that.num==0){

that.num=that.img.width();

that.box.animate({right:that.img.width()+"px"},0);

}

});

this.rBut.mouseout(function(){

auto=setInterval(that.autoGo,that.autoSpeed);

if(that.num==that.img.width()){

that.num=0;

that.box.animate({right:"0px"},0);

}

});

},

/*单击左侧按钮,图片向左滚动*/

leftScroll:function(){

var that=this;

this.lBut.click(function(){

that.num+=that.imgWidth;

that.box.animate({right:"+="+that.imgWidth+"px"},that.speed);

if(that.num>=that.img.width()){

that.num=0;

that.box.animate({right:"0px"},0);

}

});

},

/*单击右侧按钮,图片向右滚动*/

rightScroll:function(){

var that=this;

this.rBut.click(function(){

that.num-=that.imgWidth;

that.box.animate({right:"-="+that.imgWidth+"px"},that.speed);

if(that.num<=0){

that.num=that.img.width();

that.box.animate({right:that.img.width()+"px"},0);

}

});

}

}

var a=new marquee("div","img","but1","but2",200,300,2000);//初始化对象

a.autoScroll();

a.leftScroll();

a.rightScroll();

});

</script>

</body>

</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43727.html