切换 - 调试易

在更改panel-container的css的left属性
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>
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
#demo { margin:0 auto; padding:0;position:relative;width:200px; height:200px; overflow:hidden; background:#CCCCCC}
#democontainer {position:absolute;left:0; top:0; width:600px; height:200px}
.d1 {float:left;width:200px;height:200px;}
.d10 { background:#A7D8C6}
.d11 { background:#DAA5D8}
.d12 { background:#DBC7A4}
</style>
<script type="text/javascript">
//<![CDATA[
var speed=2000,lMax=400;
var timer;
function foo(){
var $o=$('#democontainer');
var $w=parseInt($o.data('ilength'));
if($w>=lMax){$w=0}else{$w=$w+200}
$o.data('ilength',$w);
$o.stop(true).animate({'left':'-'+$w+'px'},1000)
}
$(function(){
$('#democontainer').data('ilength',0);
timer=setInterval('foo()',speed);
})
//]]>
</script></head>
<body>
<div id="demo">
<div id="democontainer">
<div class="d1 d10"><div class="d1 d10"></div></div>
<div class="d1 d11"><div class="d1 d11"></div></div>
<div class="d1 d12"><div class="d1 d12"></div></div>
</div></div>
</body>
</html>

切换

解决方案 »