zoukankan      html  css  js  c++  java
  • JQ主页图片划动切换效果

    .wrapper { 726px; float: left; }

    #jiao_dian { 980px; *height: 292px; margin-top: 10px; margin-right: auto; margin-bottom: 0; margin-left: auto; }

    #focus { 726px; height: 280px; overflow: hidden; position: relative; }
    #focus ul { height: 380px; position: absolute; }
    #focus ul li { float: left; 726px; height: 280px; overflow: hidden; position: relative; background: #000; }

    #focus .preNext { 45px; height: 100px; position: absolute; top: 90px; background: url(../images/sprite.png) no-repeat 0 0; cursor: pointer; }
    #focus .pre { left: 0; }
    #focus .next { right: 0; background-position: right top; }

    #focus .btnBg { position: absolute; 726px; height: 20px; left: 0; bottom: 0; background: #000; }
    #focus .btn { position: absolute; 726px; height: 10px; padding: 5px 10px; right: 0; bottom: 0; text-align: right; }
    #focus .btn span { display: inline-block; _display: inline; _zoom: 1; 25px; height: 10px; _font-size: 0; margin-left: 5px; cursor: pointer; background: #fff; }
    #focus .btn span.on { background: #fff; }



    <script type="text/javascript"> $(function() { var sWidth = $("#focus").width(); //获取焦点图的宽度(显示面积) var len = $("#focus ul li").length; //获取焦点图个数 var index = 0; var picTimer; //以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮 var btn = "<div class='btnBg'></div><div class='btn'>"; for(var i=0; i < len; i++) { btn += "<span></span>"; } btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; $("#focus").append(btn); $("#focus .btnBg").css("opacity",0.5); //为小按钮添加鼠标滑入事件,以显示相应的内容 $("#focus .btn span").css("opacity",0.4).mouseenter(function() { index = $("#focus .btn span").index(this); showPics(index); }).eq(0).trigger("mouseenter"); //上一页、下一页按钮透明度处理 $("#focus .preNext").css("opacity",0.2).hover(function() { $(this).stop(true,false).animate({"opacity":"0.5"},300); },function() { $(this).stop(true,false).animate({"opacity":"0.2"},300); }); //上一页按钮 $("#focus .pre").click(function() { index -= 1; if(index == -1) {index = len - 1;} showPics(index); }); //下一页按钮 $("#focus .next").click(function() { index += 1; if(index == len) {index = 0;} showPics(index); }); //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度 $("#focus ul").css("width",sWidth * (len)); //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 $("#focus").hover(function() { clearInterval(picTimer); },function() { picTimer = setInterval(function() { showPics(index); index++; if(index == len) {index = 0;} },4000); //此4000代表自动播放的间隔,单位:毫秒 }).trigger("mouseleave"); //显示图片函数,根据接收的index值显示相应的内容 function showPics(index) { //普通切换 var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果 $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果 } });</script>
    <div id="jiao_dian">  
        <div class="wrapper">
          <div id="focus">
            <ul>
                <li><a target="_blank" href="#" title="登录""><img src="images/jiao_1.png"/></a></li>
                <li><a target="_blank" href="#"><img src="images/jiao_1.png"/></a></li>
                <li><a target="_blank" href="#"><img src="images/jiao_1.png"/></a></li>
                <li><a target="_blank" href="#"><img src="images/jiao_1.png"/></a></li>
                <li><a target="_blank" href="#"><img src="images/jiao_1.png"/></a></li>
            </ul>
    <!--      <div class="btnBg" style="opacity: 0.5;"></div><div class="btn"><span style="opacity: 1;"></span><span style="opacity: 0.4;"></span><span style="opacity: 0.4;"></span><span style="opacity: 0.4;"></span><span style="opacity: 0.4;"></span></div><div class="preNext pre" style="opacity: 0.2;"></div><div class="preNext next" style="opacity: 0.2;"></div>
    -->     
     </div>
        </div>
        
        <div class="an_niu">
            <ul>
                <li><a href="DistanceEducationWeb/PersonRegister.aspx"><img src="images/an_1.png"/></a></li>
                <li><a href="/DistanceEducationWeb/UnitRegister.aspx"><img src="images/an_2.png"/></a></li>
                <li><a href="DistanceEducationWeb/PersonHome.aspx"><img src="images/an_3.png"/></a></li>
                <li><a href="DistanceEducationWeb/payment.aspx"><img src="images/an_4.png"/></a></li>
            </ul>
        </div> 
        <div class="clear"></div>   
      </div>
  • 相关阅读:
    【Azure Redis 缓存】Azure Redis 功能性讨论二
    【Azure Developer】如何用Microsoft Graph API管理AAD Application里面的Permissions
    【Azure 环境】通过Python SDK收集所有订阅简略信息,例如订阅id 名称, 资源组及组内资源信息等,如何给Python应用赋予相应的权限才能获取到信息呢?
    【Azure 应用服务】App Service与APIM同时集成到同一个虚拟网络后,如何通过内网访问内部VNET的APIM呢?
    【Azure 云服务】如何从Azure Cloud Service中获取项目的部署文件
    【Azure Redis 缓存】Azure Redis 异常
    【Azure 微服务】基于已经存在的虚拟网络(VNET)及子网创建新的Service Fabric并且为所有节点配置自定义DNS服务
    【Azure Redis 缓存】遇见Azure Redis不能创建成功的问题:至少一个资源部署操作失败,因为 Microsoft.Cache 资源提供程序未注册。
    【Azure Redis 缓存】如何得知Azure Redis服务有更新行为?
    【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
  • 原文地址:https://www.cnblogs.com/zihunqingxin/p/3201192.html
Copyright © 2011-2022 走看看