图片滚动-磊哥 - xiaoleilei

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=utf-8" />
<title>图片滚动</title>
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.7.1.js" ></script>
</head>

<body>
<div class="box">
    <div id="pics">
        <ul>
            <li id="lambo1"><a href="" title="" target="_blank"><img src="images/l (1).jpg" /></a></li>
            <li id="lambo2"><a href="" title="" target="_blank"><img src="images/l (2).jpg" /></a></li>
            <li id="lambo3"><a href="" title="" target="_blank"><img src="images/l (3).jpg" /></a></li>
            <li id="lam"><a href="" title="" target="_blank"><img src="images/l (1).jpg" /></a></li>
        </ul>
    </div>
    <div id="nums">
        <ul>
            <li><a href="#lambo1" title="" target="_blank" class="active"></a></li>
            <li><a href="#lambo2" title="" target="_blank"></a></li>
            <li><a href="#lambo3" title="" target="_blank"></a></li>
        </ul>
    </div>
</div>
</body>
<script src="js/tab.js"></script>
</html>
css
/*基本设置*/

body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/

div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/

ul,li,ol{list-style:none;}/*去除列表符号*/

img{border:none;}/*去除图片按钮边框*/

a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}

.box{ width:600px; height:398px; box-shadow: 0px 0px 30px #000;
                -moz-box-shadow: 0px 0px 30px #000;
                -webkit-box-shadow: 0px 0px 30px #000;
                background:#F99;
                margin:20px auto;
                position:relative;
                }
#pics{ width:600px; height:398px; overflow:hidden;}
#pics ul{width:2400px;}
#pics ul li{ float:left;}

#nums{ width:65px; height:15px; position:absolute; bottom:5px; right:0;}
#nums ul li a{display:block; width:15px; height:15px; float:left; background:#900; margin-right:5px; border-radius:15px;-moz-border-radius:15px; -webkit-border-radius:15px;}
#nums ul li a:hover,#nums ul li a.active{ background:#FC3;}

js
var index = 1;
setInterval(function () {
    $("#pics").animate({
        scrollLeft: 600*index
    }, 1000, function () {
        if (index == 4) {
            index = 1;
            $("#pics").scrollLeft(0);
        }

    });
    $("#nums li a").removeClass("active");
    $("#nums li:eq(" + index % 3 + ") a").addClass("active")

    index++;

}, 2000)

posted on 2013-06-16 13:53 xiaoleilei 阅读(170) 评论(0) 收藏举报

刷新页面返回顶部