图片滚动-磊哥

html
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
">

   

       

           
• 

           
• 

           
• 

           
• 

       

   

   

       

           

           

           

       

   

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)

转载于:https://www.cnblogs.com/xiaoleidiv/archive/2013/06/16/3138827.html