JS图片左右滚动

求JS实现左右滚动!在线等!谢谢!<divstyle="height:200px;width:1002px;"><divstyle="float:left;height:... 求JS实现左右滚动! 在线等!谢谢!

<div style="height:200px; width:1002px;">
<div style="float:left; height:200px; width:50px;"><a href="#">鼠标指上后向左移动,离开后停止</a></div>
<div style="float:left; height:200px; width:902px;">这里放图片.求动!</div>
<div style="float:left; height:200px; width:50px;"><a href="#">鼠标指上后向右移动,离开后停止</a></div>
</div>

我这里有格式.麻烦您了! 依然在线等!

悬赏翻倍了!! 展开

 我来答

3个回答

#热议# 什么是淋病？哪些行为会感染淋病？

匿名用户
2010-09-17

展开全部

谢谢了!我马上去试试!

已赞过 已踩过<

评论收起

百度网友596ea4d
2010-09-17 · TA获得超过336个赞

知道小有建树答主

回答量：72

采纳率：0%

帮助的人：93.1万

我也去答题访问个人页

关注

展开全部

<div style="height:200px; width:1002px;">
 <div class='l' style="float:left; height:200px; width:50px;"><a href="#">鼠标指上后向左移动,离开后停止</a></div>
    <div class='nn' style="float:left; height:200px; width:902px; overflow:hidden;">
            <table width="100" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td class="s1">
                    <table width="100" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td><img src="images/zy_19.jpg" width="176" height="102" /></td>
                            <td><img src="images/zy_19.jpg" width="176" height="102" /></td>
                            <td><img src="images/zy_19.jpg" width="176" height="102" /></td>
                            <td><img src="images/zy_19.jpg" width="176" height="102" /></td>
                            <td><img src="images/zy_19.jpg" width="176" height="102" /></td>
                            <td><img src="images/zy_19.jpg" width="176" height="102" /></td>
                           </tr>
                        </table>
                    </td>
                    <td class="s2"></td>
                  </tr>
                </table>
    </div>
    <div class='r' style="float:left; height:200px; width:50px;"><a href="#">鼠标指上后向右移动,离开后停止</a></div>
</div> 

<script>
 function roll(obj,s1,s2,l,r){
      var play;
      s2.html(s1.html());
      function gd(f){
       if(f=='r'){
        if(obj.scrollLeft()>0){
        obj.scrollLeft(obj.scrollLeft()-1);
        }else{
        obj.scrollLeft(s1.width());
        }
       }else{
        if(obj.scrollLeft()<=s1.width()){
        obj.scrollLeft(obj.scrollLeft()+1);
        }else{
        obj.scrollLeft(0);
        }
       }
      }
      l.hover(function(){play=setInterval(gd,20)},function(){clearInterval(play)});
      r.hover(function(){play=setInterval(function(){gd("r")},20)},function(){clearInterval(play)});
     }

$roll($('.nn'),$('.s1'),$('.s2'),$('.l'),$('.r'));
</script>

头部调用jquery 去www.jquery.com下载 

修改完毕 试试吧


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

838
2010-09-17 · TA获得超过366个赞

知道小有建树答主

回答量：188

采纳率：0%

帮助的人：219万

我也去答题访问个人页

关注

展开全部

<html>
<head runat="server">
<title></title>
<script src="js/jquery_1.4.2.min.js"></script>
<style>
.table
{
border: #ccc 4px solid;
overflow: hidden;
width: 880px;
height: 170px;
margin: 10px auto;
clear: both;
background: #f8f8f8;
padding: 0 10px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
.table .marquee
{
display: inline;
float: left;
}
.marquee
{
overflow: hidden;
width: 880px;
line-height: 30px;
}
.marquee li
{
width: 210px;
height: 170px;
text-align: center;
}
.marquee li IMG
{
margin: 10px 5px;
}
.level li
{
float: left;
}
</style>
</head>
<body>
<div class="table scroll_pic">
<div class="marquee level" direction="left" speed="20" step="1" pause="1">
<ul style="width: 14700px" id="showpic">
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
<li><img src="dmhj/images/spa1_t.jpg" width="200" height="150"></li>
</ul>
</div>
</div>

<script type="text/javascript">
/*--通用滚动图盘类--*/
(function ($) {
$.fn.marquee = function (o) {
//获取滚动内容内各元素相关信息
o = $.extend({
speed: parseInt($(this).attr('speed')) || 30, // 滚动速度
step: parseInt($(this).attr('step')) || 1, // 滚动步长
direction: $(this).attr('direction') || 'up', // 滚动方向
pause: parseInt($(this).attr('pause')) || 1000 // 停顿时长
}, o || {});
var dIndex = jQuery.inArray(o.direction, ['right', 'down']);
if (dIndex > -1) {
o.direction = ['left', 'up'][dIndex];
o.step = -o.step;
}
var mid;
var div = $(this); // 容器对象
var divWidth = div.innerWidth(); // 容器宽
var divHeight = div.innerHeight(); // 容器高
var ul = $("ul", div);
var li = $("li", ul);
var liSize = li.size(); // 初始元素个数
var liWidth = li.width(); // 元素宽
var liHeight = li.height(); // 元素高
var width = liWidth * liSize;
var height = liHeight * liSize;
if ((o.direction == 'left' && width > divWidth) ||
(o.direction == 'up' && height > divHeight)) {
// 元素超出可显示范围才滚动
if (o.direction == 'left') {
ul.width(2 * liSize * liWidth);
if (o.step < 0) div.scrollLeft(width);
} else {
ul.height(2 * liSize * liHeight);
if (o.step < 0) div.scrollTop(height);
}
ul.append(li.clone()); // 复制元素
mid = setInterval(_marquee, o.speed);
div.hover(
function () { clearInterval(mid); },
function () { mid = setInterval(_marquee, o.speed); }
);
}
function _marquee() {
// 滚动
if (o.direction == 'left') {
var l = div.scrollLeft();
if (o.step < 0) {
div.scrollLeft((l <= 0 ? width : l) + o.step);
} else {
div.scrollLeft((l >= width ? 0 : l) + o.step);
}
if (l % liWidth == 0) _pause();
} else {
var t = div.scrollTop();
if (o.step < 0) {
div.scrollTop((t <= 0 ? height : t) + o.step);
} else {
div.scrollTop((t >= height ? 0 : t) + o.step);
}
if (t % liHeight == 0) _pause();
}
}
function _pause() {
// 停顿
if (o.pause > 0) {
var tempStep = o.step;
o.step = 0;
setTimeout(function () {
o.step = tempStep;
}, o.pause);
}
}
};
})(jQuery);
$(document).ready(function () {
$(".marquee").each(function () {
$(this).marquee();
});
});
</script>
</body>
</html>
新建页面测试下

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS图片左右滚动

其他类似问题

为你推荐：