点击按纽让图片滚动的效果,在线等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片</title>
<script language="javascript">

</script>
<style type="text/css">

</style>
</head>
<body>

<DIV class=blk_18><A onmouseup=ISL_StopUp_1() class=LeftBotton
onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href="javascript:void(0);"
target=_self></A>
<DIV class=pcont id=ISL_Cont_1>
<DIV class=ScrCont>
<DIV id=List1_1><A class=pl
href="http://www.lanrentuku.com/"
target=_blank><IMG height=72 alt=20-50元夏装抢疯
src="http://www.baidu.com/img/baidu_logo.gif" width=96>美女小凡最新夏装</A><A class=pl
href="http://www.lanrentuku.com/"
target=_blank><IMG height=72 alt=韩国人气小耳环
src="http://www.baidu.com/img/baidu_logo.gif" width=96>韩国人气小耳环</A><A class=pl
href="http://www.lanrentuku.com/"
target=_blank><IMG height=72 alt=3万6超值装修88平
src="http://www.baidu.com/img/baidu_logo.gif" width=96>3万6超值装修88平</A><A class=pl
href="http://www.lanrentuku.com/"
target=_blank><IMG height=72 alt=牛干巴敲开财富门
src="http://www.baidu.com/img/baidu_logo.gif" width=96>牛干巴敲开财富门</A><A class=pl
href="http://www.lanrentuku.com/"
target=_blank><IMG height=72 alt=4K至7K高性能本本
src="http://www.baidu.com/img/baidu_logo.gif" width=96>4K至7K高性能本本</A><A class=pl
href="http://www.lanrentuku.com/"
target=_blank><IMG height=72 alt=7万装修102平婚房
src="http://www.baidu.com/img/baidu_logo.gif" width=96>7万装修102平婚房</A><A class=pl
href="http://www.lanrentuku.com/"
target=_blank><IMG height=72 alt=最新小车节油为主
src="http://www.baidu.com/img/baidu_logo.gif" width=96>最新小车节油为主</A><A class=pl
href="http://www.lanrentuku.com/"
target=_blank><IMG height=72 alt="热门项目 BT烤翅"
src="http://www.baidu.com/img/baidu_logo.gif" width=96>热门项目 BT烤翅</A><A class=pl
href="http://www.lanrentuku.com/"
target=_blank><IMG height=72 alt=流行T恤+裤装
src="http://www.baidu.com/img/baidu_logo.gif" width=96>要显瘦就这么穿！</A> </DIV>
<DIV id=List2_1></DIV></DIV></DIV><A onmouseup=ISL_StopDown_1()
class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1()
href="javascript:void(0);" target=_self></A></DIV>
<SCRIPT type=text/javascript>

</SCRIPT>

</body>
</html>
JQuery版
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>JQuery-4</title>
        <style type="text/css">
            * {
                margin: 0 auto;
                padding: 0;
            }

            body {
                font-size: 12px;
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            }

            .img-head {
                width: 502px;
                height: 15px;
                padding: 9px 0;
                border-left: 1px solid #ccc;
                border-right: 1px solid #ccc;
                background: url(images/ks_cl.gif) -20px 0px repeat-x;
            }

            .img-head span {
                float: left;
                color: #454545;
                margin: 0 3px;
            }

            .img-channel {
                float: left;
                font-size: 10px;
            }

            .img-prev {
                width: 21px;
                height: 15px;
                cursor: pointer;
                background: url(images/prev.gif) no-repeat;
            }

            .img-next {
                width: 21px;
                height: 15px;
                cursor: pointer;
                background: url(images/next.gif) no-repeat;
            }

            .img-content {
                width: 492px;
                height: 85px;
                margin-top: 2px;
                padding: 0 5px;
                overflow: hidden;
                position: relative;
                border: 1px solid #ccc;
            }

            .img-list {
                width: 1992px;
                overflow: hidden;
                position: absolute;
            }

            .img-focus {
                float: left;
                width: 498px;
            }

            .img-focus img {
                width: 70px;
                height: 70px;
                margin: 5px;
                float: left;
                border: 1px solid #ccc;
            }

            .txt-weight {
                font-size: 12px;
                font-weight: bold;
            }
        </style>
        <script type="text/javascript" src="jquery-1.3.2.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                var $imgList = $('.img-list');
                var $imgfocus = $('.img-focus');
                var $page = $('.img-channel > span');
                var n = 1;
                var focus_Width = $imgfocus.width();//分类长度
                //向前运动
                $('.img-next').click(function(){

                    if (n == $imgfocus.length) {//在最后一个面板继续向前时，跳转至第一个面板
                        $imgList.animate({
                            left: '0px'
                        }, 800);
                        n = 1;
                    }
                    else {
                        $imgList.animate({
                            left: '-=' + focus_Width
                        }, 800);
                        n++;
                    }
                    $page.eq(n - 1).addClass('txt-weight').siblings().removeClass('txt-weight');
                });
                //向后运动
                $('.img-prev').click(function(){
                    if (n == 1) {//在第一个面板继续向后时，跳转至最后一个面板
                        $imgList.animate({
                            left: '-=' + (focus_Width*($imgfocus.length-1))
                        }, 800);
                        n=$page.length;
                    }
                    else {
                        $imgList.animate({
                            left: '+=' + focus_Width
                        }, 800);
                        n--;
                    }
                    $page.eq(n - 1).addClass('txt-weight').siblings().removeClass('txt-weight');
                });
            })
        </script>
    </head>
    <body>        <div class="img-head">
            <span class="img-prev"><<</span>
            <div class="img-channel">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </div>
            <span class="img-next">>></span>
        </div>
        <div class="img-content">
            <div class="img-list">
                <div class="img-focus">
                    <img src="http://bq.qqwen.com/uploads/allimg/090623/14424632I-3.gif" alt=""/>
                    <img src="http://bq.qqwen.com/uploads/allimg/090623/14424632I-3.gif" alt=""/>
                    <img src="http://bq.qqwen.com/uploads/allimg/090623/14424632I-3.gif" alt=""/>
                    <img src="http://bq.qqwen.com/uploads/allimg/090623/14424632I-3.gif" alt=""/>
                    <img src="http://bq.qqwen.com/uploads/allimg/090623/14424632I-3.gif" alt=""/>
                    <img src="http://bq.qqwen.com/uploads/allimg/090623/14424632I-3.gif" alt=""/>
                </div>
                <div class="img-focus">
                    <img src="http://www.mfqq.com/upimg/userup/0802/11200021F41.gif" alt=""/>
                    <img src="http://www.mfqq.com/upimg/userup/0802/11200021F41.gif" alt=""/>
                    <img src="http://www.mfqq.com/upimg/userup/0802/11200021F41.gif" alt=""/>
                    <img src="http://www.mfqq.com/upimg/userup/0802/11200021F41.gif" alt=""/>
                    <img src="http://www.mfqq.com/upimg/userup/0802/11200021F41.gif" alt=""/>
                    <img src="http://www.mfqq.com/upimg/userup/0802/11200021F41.gif" alt=""/>
                </div>
                <div class="img-focus">
                    <img src="http://www.qqfacebox.com/BiaoQin/UploadFiles_1237/200901/20090117121600930.gif" alt=""/>
                    <img src="http://www.qqfacebox.com/BiaoQin/UploadFiles_1237/200901/20090117121600930.gif" alt=""/>
                    <img src="http://www.qqfacebox.com/BiaoQin/UploadFiles_1237/200901/20090117121600930.gif" alt=""/>
                    <img src="http://www.qqfacebox.com/BiaoQin/UploadFiles_1237/200901/20090117121600930.gif" alt=""/>
                    <img src="http://www.qqfacebox.com/BiaoQin/UploadFiles_1237/200901/20090117121600930.gif" alt=""/>
                    <img src="http://www.qqfacebox.com/BiaoQin/UploadFiles_1237/200901/20090117121600930.gif" alt=""/>
                </div>
                <div class="img-focus">
                    <img src="http://www.cgw88.com/images/UploadFile/2008920215823138.gif" alt=""/>
                    <img src="http://www.cgw88.com/images/UploadFile/2008920215823138.gif" alt=""/>
                    <img src="http://www.cgw88.com/images/UploadFile/2008920215823138.gif" alt=""/>
                    <img src="http://www.cgw88.com/images/UploadFile/2008920215823138.gif" alt=""/>
                    <img src="http://www.cgw88.com/images/UploadFile/2008920215823138.gif" alt=""/>
                    <img src="http://www.cgw88.com/images/UploadFile/2008920215823138.gif" alt=""/>
                </div>
            </div>
        </div>
    </body>
</html>
我这也是网上找的，不滚动就把控制滚动的函数清空:
function AutoPlay_1(){}
不过既然是展示  你不能老让那几个显示吧要让所有的图片都有机会被看见
所以自动滚动还是必要的

调试易

点击按纽让图片滚动的效果,在线等

解决方案 »