61,110
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<title>图片向左滚动</title>
<script type="text/javascript" src="bossma-jscroll.js"></script>
<script type="text/javascript">
window.onload=function(){
//参数依次为:滚动方向,滚动速度,容器ID,容器宽度,容器高度,滚动内容宽度,滚动内容高度,滚动步长
var scroll =new JScroll("left",30,"content",558,165,1674,165,1);
scroll.Start();
};
</script>
</head>
<body>
<div id="title" style="width:100%;height:40px;">图片向左滚动</div>
<div id="content">
<!--
滚动元素内部的水平排列需要自己来写,不要写到容器div(比如这里的id:content)的样式中。
-->
<div style="float:left"><img src="images/1.png" /></div>
<div style="float:left"><img src="images/2.png" /></div>
<div style="float:left"><img src="images/3.png" /></div>
</div>
<div id="foot"></div>
</body>
</html>
<table cellpadding="0" cellspacing="0" width="655px" height="151" class="HomeHotA">
<tr>
<td class="HomeHotTdArowleft">
<span class="pre">
<img src="../Image/home_50_a.gif" /></span></td>
<td class="HomeHottdInco">
<div id="idContainer2" class="ibox">
<div class="showbox">
<ul class="HomeHotUL">
<cc:HKIRepeater ID="rpHomeHot" runat="server">
<ItemTemplate>
<li class="HomeHotli">
<table cellpadding="0" cellspacing="0" width="140px" height="120px" class="center" style="margin-top:15px;">
<tr>
<td class="HomeHotreptd">
<div class="divlblID">
<cc:HKILabel ID="lblID" Text='<%# Eval("ID") %>' runat="server" />
</div>
<div class="HomeHotDivImgText" align=center>
<div class="HomeHotDivImgTexts">
<cc:HKIImage ID="img0" runat="server" Width="120px" Height="100px" />
</div>
<div class="divpartnos">
<%# Eval("PartNo")%>
</div>
</div>
</td>
</tr>
</table>
</li>
</ItemTemplate>
</cc:HKIRepeater>
</ul>
</div>
</div>
</td>
<td class="HomeHotTdArowright">
<span class="next">
<img src="../Image/home_53_a.gif" /></span></td>
</tr>
</table>
<script src="../Script/jquery-1.4.2.min.js">
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
//变量
var $cur = 1;//初始化显示的版面
var $i = 4;//每版显示数
var $len = $('.showbox>ul>li').length;//计算列表总长度(个数)
var $pages = Math.ceil($len / $i);//计算展示版面数量
var $w = $('.ibox').width();//取得展示区外围宽度
var $showbox = $('.showbox');
var $num = $('span.num li')
var $pre = $('span.pre')
var $next = $('span.next');
var $autoFun;
//调用自动滚动
autoSlide();
//向前滚动
$pre.click(function(){
if (!$showbox.is(':animated')) { //判断展示区是否动画
if ($cur == 1) { //在第一个版面时,再向前滚动到最后一个版面
$showbox.animate({
left: '-=' + $w * ($pages - 1)
}, 100); //改变left值,切换显示版面,500(ms)为滚动时间,下同
$cur = $pages; //初始化版面为最后一个版面
}
else {
$showbox.animate({
left: '+=' + $w
}, 200); //改变left值,切换显示版面
$cur--; //版面累减
}
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
}
});
//向后滚动
$next.click(function(){
if (!$showbox.is(':animated')) { //判断展示区是否动画
if ($cur == $pages) { //在最后一个版面时,再向后滚动到第一个版面
$showbox.animate({
left: 0
}, 100); //改变left值,切换显示版面,500(ms)为滚动时间,下同
$cur = 1; //初始化版面为第一个版面
}
else {
$showbox.animate({
left: '-=' + $w
}, 200);//改变left值,切换显示版面
$cur++; //版面数累加
}
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
}
});
//数字点击事件
$num.click(function(){
if (!$showbox.is(':animated')) { //判断展示区是否动画
var $index = $num.index(this); //索引出当前点击在列表中的位置值
$showbox.animate({
left: '-' + ($w * $index)
}, 200); //改变left值,切换显示版面,500(ms)为滚动时间
$cur = $index + 1; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1
$(this).addClass('numcur').siblings().removeClass('numcur'); //为当前点击加上高亮样式,并移除同级元素的高亮样式
}
});
//停止滚动
clearFun($showbox);
clearFun($pre);
clearFun($next);
clearFun($num);
//事件划入时停止自动滚动
function clearFun(elem){
elem.hover(function(){
clearAuto();
}, function(){
autoSlide();
});
}
//自动滚动
function autoSlide(){
$next.trigger('click');
$autoFun = setTimeout(autoSlide, 5000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效
}
//清除自动滚动
function clearAuto(){
clearTimeout($autoFun);
}
});
</script>