当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript 不间断的图片滚动并可点击

javascript 不间断的图片滚动并可点击

2019年07月29日  | 移动技术网IT编程  | 我要评论
css:
复制代码 代码如下:

<style type="text/css">
.rollbox
{
width: 704px;
overflow: hidden;
padding: 12px 0 5px 6px;
}
.rollbox .leftbotton
{
height: 52px;
width: 19px;
background: url(jt.gif) no-repeat 11px 0;
overflow: hidden;
float: left;
display: inline;
margin: 25px 0 0 0;
cursor: pointer;
background-color:blue;
color:white;
}
.rollbox .rightbotton
{
height: 52px;
width: 20px;
background: url(jt.gif) no-repeat -8px 0;
overflow: hidden;
float: left;
display: inline;
margin: 25px 0 0 0;
cursor: pointer;
background-color:blue;
color:white;
}
.rollbox .cont
{
width: 663px;
overflow: hidden;
float: left;
}
.rollbox .scrcont
{
width: 10000000px;
}
.rollbox .cont .pic
{
width: 132px;
float: left;
text-align: center;
}
.rollbox .cont .pic img
{
padding: 4px;
background: #fff;
border: 1px solid #ccc;
display: block;
margin: 0 auto;
}
.rollbox .cont .pic p
{
line-height: 26px;
color: #505050;
}
.rollbox .cont a:link, .rollbox .cont a:visited
{
color: #626466;
text-decoration: none;
}
.rollbox .cont a:hover
{
color: #f00;
text-decoration: underline;
}
.rollbox #list1, .rollbox #list2
{
float: left;
}
</style>

html代码
复制代码 代码如下:

<div class="rollbox">
<div class="leftbotton" onmousedown="isl_goup()" onmouseup="isl_stopup()" onmouseout="isl_stopup()">
<<<<<
</div>

<div class="cont" id="isl_cont">
<div class="scrcont">
<div id="list1">
<!-- 图片列表 begin -->
<div class="pic">
<a href="####">
<img src="//www.jb51.net/images/logo.gif" width="109" height="87" /></a>
<a href="####">商品1</a>
</div>
<div class="pic">
<a href="####">
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a>
<a href="####">商品2</a>
</div>
<div class="pic">
<a href="####">
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a>
<a href="####">商品3</a>
</div>
<div class="pic">
<a href="####">
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a>
<a href="####">商品4</a>
</div>
<div class="pic">
<a href="####">
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a>
<a href="####">商品5</a>
</div>
<div class="pic">
<a href="####">
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a>
<a href="####">商品6</a>
</div>
<div class="pic">
<a href="####">
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a>
<a href="####">商品7</a>
</div>
<!-- 图片列表 end -->
</div>
<div id="list2">
</div>
</div>
</div>

<div class="rightbotton" onmousedown="isl_godown()" onmouseup="isl_stopdown()" onmouseout="isl_stopdown()">
>>>>>>
</div>
</div>

js代码
复制代码 代码如下:

//速度(毫秒)
var speed = 10;
//每次移动(px)
var space = 5;
//每次翻页宽度
var pagewidth = 132;
//整体移位(px)
var fill = 0;
//是否自动移动，true 移动，false 不移动
var movelock = false;
//移动时间对象
var movetimeobj;
//上翻 下翻 变量，当comp小于0 为上翻动 反之为下翻动
var comp = 0;
//上下移动对象
var autoplayobj = null;
//将div list1中的所有元素分配给 div list2中
getobj("list2").innerhtml = getobj("list1").innerhtml;
//向左移动
getobj('isl_cont').scrollleft = fill;
//给div isl_cont 绑定鼠标移动在div上方时候的事件，该事件是清除自动播放的，当鼠标移动到div图片上时候将取消自动播放
getobj("isl_cont").onmouseover = function(){ clearinterval(autoplayobj); }
//给div isl_cont 绑定鼠标移开div上方时候的时间，该事件是绑定自动播放的，当鼠标移开div图片上时候将又开始自动时间间隔自动播放
getobj("isl_cont").onmouseout = function(){ autoplay();}
//第一次进来默认绑定为自动播放
autoplay();
/*
获取指定html对象
*/
function getobj(objname){
//判断当前页面中是否存在有效的元素标记,document.getelementbyid兼容火狐
if(document.getelementbyid)
{
return eval('document.getelementbyid("'+objname+'")')
}
else
{
return eval('document.all.'+objname)
}
}
/*
自动滚动
*/
function autoplay(){
//清除以前绑定的间隔时间滚动
clearinterval(autoplayobj);
//重新绑定间隔时间滚动，setinterval()方法是绑定在指定的时间执行，clearinterval()方法是清除指定的时间绑定对象
autoplayobj = setinterval('isl_godown();isl_stopdown();',5000);
}
/*
上翻开始
*/
function isl_goup(){
//如过当前为自动播放将不执行下面代码
if(movelock)
return;
//清除以前绑定的间隔时间滚动
clearinterval(autoplayobj);
movelock = true;
//在指定的时间中自动往左侧移动
movetimeobj = setinterval('isl_scrup();',speed);
}
/*
上翻停止
*/
function isl_stopup(){
//清除以前绑定的间隔时间滚动
clearinterval(movetimeobj);
//判断当前论显图片的div做边的变距是否是第一个商品图片,不等于0不是第一个，反之等于第一张图片
if(getobj('isl_cont').scrollleft % pagewidth - fill != 0)
{
//div左边距移动
comp = fill - (getobj('isl_cont').scrollleft % pagewidth);
//开始移动
compscr();
}else
{
movelock = false;
}
//自动播放
autoplay();
}
/*
上翻动作
*/
function isl_scrup(){
//如过当前图片的大div左边距小于0那么它的边距等于自身边距加上左边的点击按钮的宽度
if(getobj('isl_cont').scrollleft <= 0)
{
getobj('isl_cont').scrollleft = getobj('isl_cont').scrollleft + getobj('list1').offsetwidth;
}
//往左侧移动
getobj('isl_cont').scrollleft -= space ;
}
/*
下翻
*/
function isl_godown(){
//清除以前绑定的间隔时间滚动
clearinterval(movetimeobj);
//如过当前为自动播放将不执行下面代码
if(movelock)
return;
//清除自动播放
clearinterval(autoplayobj);
movelock = true;
//下翻方法
isl_scrdown();
//在指定的时间中自动往右侧移动
movetimeobj = setinterval('isl_scrdown()',speed);
}
/*
下翻停止
*/
function isl_stopdown(){
//清除以前绑定的间隔时间滚动
clearinterval(movetimeobj);
//如过当前图片的大div左边距小于0那么它的边距等于自身边距加上左边的点击按钮的宽度
if(getobj('isl_cont').scrollleft % pagewidth - fill != 0 )
{
comp = pagewidth - getobj('isl_cont').scrollleft % pagewidth + fill;
compscr();
}else
{
movelock = false;
}
//开始自动播放
autoplay();
}
/*
下翻动作
*/
function isl_scrdown(){
if(getobj('isl_cont').scrollleft >= getobj('list1').scrollwidth)
{
getobj('isl_cont').scrollleft = getobj('isl_cont').scrollleft - getobj('list1').scrollwidth;
}
getobj('isl_cont').scrollleft += space;
}
/*
左右移动控制处理
*/
function compscr(){
var num;
if(comp == 0)
{
movelock = false;
return;
}
//上翻
if(comp < 0)
{
if(comp < -space)
{
comp += space;
num = space;
}else
{
num = -comp;
comp = 0;
}
getobj('isl_cont').scrollleft -= num;
settimeout('compscr()',speed);
}else //下翻
{
if(comp > space)
{
comp -= space;
num = space;
}else
{
num = comp;
comp = 0;
}
getobj('isl_cont').scrollleft += num;
settimeout('compscr()',speed);
}
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网