jQuery实现的图片轮播

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2014-11-13   阅读次数: 28   查看权限: 游客查看

jQuery实现的图片轮播

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery实现的图片轮播</title>
    <style type="text/css">
        ul,li,h4,ol{margin: 0;padding: 0;list-style: none}
        .index_focus{margin-top: 25px;}.index_focus_banner{width: 591px;height:220px;margin-left: 0;float: left;overflow: hidden;position: relative;}
        .index_focus_banner a,.index_focus_banner img{width:100%;height:100%;display: block;border: none}.index_focus_banner a{position: absolute}
        .index_focus_banner ol{position: absolute;top:150px;left:0;width:100%;text-align:center;z-index:3}
        .index_focus_banner ol li{display:inline-block;*display:inline;*zoom:1;font-size:0;width: 20px;height: 7px;margin:10px 3px;background-color:#717171;opacity: 0.7;filter:alpha(opacity=70);cursor: pointer}
        .index_focus_banner ol .on{background-color: #fff}
        .index_focus_banner h4{background-color:rgba(0,0,0,0.5);background:transparent\9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)\9;z-index:3;width:100%;height:42px;position:absolute;left:0;bottom:0;padding-left:10px;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;font:20px/42px "Microsoft YaHei";color: #fff;}
    </style>
    <script type="text/javascript" src="http://down.scscms.com/scs/pic/jquery-1.6.4.min.js"></script>  
</head>
<body>

<div class="index_focus_banner">
    <a href="#"><img src="http://down.scscms.com/scs/pic/1.jpg" alt="标题1" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题2" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题3" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/4.jpg" alt="标题4" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/1.jpg" alt="标题5" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题6" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题7" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/4.jpg" alt="标题8" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题9" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题10" /></a>
    <h4></h4>
</div>
<div class="index_focus_banner">
    <a href="#"><img src="http://down.scscms.com/scs/pic/1.jpg" alt="标题1" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题2" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题3" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/4.jpg" alt="标题4" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/1.jpg" alt="标题5" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/2.jpg" alt="标题6" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/3.jpg" alt="标题7" /></a>
    <a href="#"><img src="http://down.scscms.com/scs/pic/4.jpg" alt="标题8" /></a>
    <h4></h4>
</div>
<script type="text/javascript">
    /*banner*/
    var banner = $(".index_focus_banner").each(function(){
       var _this = $(this),a = _this.find("a").hide(),l = a.size();
       if(l){
           a.first().show();
           $('<ol><li class="on">'+ new Array(l).join("</li><li>")+'</li></ol>').appendTo(_this.data("a",a))
           .hover(function(){_this.data("stop",1)},function(){_this.removeData("stop")}).delegate("li","click",function(){
               !this.className && $(this).siblings().removeAttr("class").end().addClass("on").parent().prev()
.text(a.stop().hide().eq($(this).index()).show().find("img").attr("alt"));
           });
       }
    });
    setInterval(function(){
        banner.each(function(){
            var _this = $(this),a = _this.data("a");
            if(a && !_this.data("stop")){
                var o = a.filter(":visible"),i = a.index(o) + 1;
                i >= a.size() && (i = 0);
                $("h4",_this).text(a.eq(i).css({zIndex:1,display:"block",opacity:0}).animate({opacity:1},1000,function(){
$(this).css({zIndex:0});o.hide()}).find("img").attr("alt"));
                $("ol li",_this).eq(i).addClass("on").siblings().removeAttr("class");
            }
        })
    },4000);
</script>
</body>
</html>

 

关键词: jquery,图片轮播   编辑时间: 2015-1-4 21:27:27

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程