加载中…
个人资料
糖炒栗子
糖炒栗子
  • 博客等级:
  • 博客积分:0
  • 博客访问:32,496
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

图片轮播

(2010-04-07 10:49:08)
标签:

杂谈

分类: JS学习班
利用JS写了个图片轮播图,自动跳转。这里调用了一个外部JS效果在里面。<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>就是这个啦。大家可以拷贝下来看一下效果。再把这个调用的去掉再看一下效果。看看去与不去的不同吧。。。。。直接上图。。。
图片轮播

JS代码:
<style type="text/css">
<!--
ul,li { list-style:none; margin:0; padding:0;}
#photoShow { width:490px; height:169px; border:1px solid #000; overflow:hidden; position:absolute;}
#photoShow div { position:absolute;}
#photoShow div img { display:block; width:490px; height:169px;}
#photoShow ul { position:absolute; z-index:6; bottom:5px; right:0; overflow:hidden;}
#photoShow li { width:10px; height:12px; line-height:12px; background:#fff; text-align:center; overflow:hidden; cursor:pointer; float:left; border:1px solid red; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333; margin-right:5px;}
#photoShow li.on { font-weight:bold; color:#fff; background:red;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
<!--
jQuery(function($){
    var div = $("#photoShow > div");
    var img = $("#photoShow > div img");
    var imgHeight = parseInt(img.css("height"));
    var imgNums = img.length;
    $("#photoShow").append("<ul></ul>");
    for(i=1; i<=imgNums; i++){
    $("#photoShow > ul").append("<li>" + i + "</li>");
    }
    var ul =  $("#photoShow ul");
    var li  = $("#photoShow li");
    li.eq(0).addClass("on");
    div.css({"top" : 0});
    var t = 0;
    var p = true;
        function automation(){
            if(p){
                if(t>=imgNums) t=0;
                li.eq(t).addClass("on");
                li.not(li.eq(t)).removeClass();
                div.stop().animate({top : -t*imgHeight}, "slow");
                t++;
            }
        }
        var aaa = setInterval(automation, 1000);
    li.each(function(i){
        $(this).hover(function(){
            t = i;
            p = false;
            $(this).addClass("on");
            li.not($(this)).removeClass("on");
            div.stop().animate({top : -i*imgHeight}, "slow");
        }, function(){
            p = true;
        })
    })
})
-->
</script>


页面代码:
<div id="photoShow">
<div>
<img src="p1.jpg" />
<img src="p2.jpg" />
<img src="p3.jpg" />
<img src="p4.jpg" />
<img src="p5.jpg" />
</div>
</div>

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
后一篇:先项卡
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

    后一篇 >先项卡
      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有