【JQuery】点左右箭头，轮换图片展示

最新推荐文章于 2021-03-09 20:08:31 发布

火焰之心

最新推荐文章于 2021-03-09 20:08:31 发布

阅读量1.4k

点赞数

分类专栏： JS或JQuery

本文链接：https://blog.csdn.net/axer0811/article/details/8563290

版权

JS或JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML

<div class="photos_l"><img alt="" src="/images/arrow_l.png" /></div>
<div class="photos">
  <div class="kkkk">
    <div class="kkk">
       <asp:Repeater ID="rptImages" runat="server">
         <ItemTemplate>
            <div class="kk">
               <a href='detail.aspx?p_id=<%#Eval("P_ID") %>'><img alt="" src="<%#Eval("P_Images") %>" /></a>
            </div>
        </ItemTemplate>
      </asp:Repeater>
    </div>
  </div>
</div>
<div class="photos_r"><img alt="" src="/images/arrow_r.png" /></div>

CSS

.list_style1 .photos_l {position:absolute; top:655px; left:18px; cursor:pointer;}
.list_style1 .photos_r {position:absolute; top:655px; right:18px; cursor:pointer;}
.list_style1 .photos {position:absolute; top:535px; left:50px; width:905px; height:303px; overflow:hidden;}
.list_style1 .photos .kkkk{ position:relative; width:99999px;}
.list_style1 .photos .kkk{float:left;}
.list_style1 .photos .kk{float:left; width:170px; height:260px; padding:0px 5px; }

$(window).load(function () { //不用$(document).ready()是为了在数据加载完全后才能把总宽度测量正确
    $(".photos_l").css({ "display": "none" });
    $(".photos_r").css({ "display": "none" });
    list_style1和list_style2的照片左右滚动
    $(".list_style1,.list_style2").one("mouseenter", function () {
        var la = $(this).children(".photos_l");
        var ra = $(this).children(".photos_r");
        var PW = $(this).children(".photos").width();//测得放照片的容器宽度
        var kkkk = $(this).children(".photos").children(".kkkk");
        var kkk = $(this).children(".photos").children(".kkkk").children(".kkk");
        if (kkk.width() > PW) {
            var n = 0;
            ra.css({ "display": "block" });
            ra.click(function () {
                la.css({ "display": "block" });
                var xx = kkkk.offset().left - kkk.offset().left;
                if (xx == PW * n || xx == PW * n - 1) { //这里有个或，是因为IE8测量的宽度会短1个像素
                    kkk.animate({ marginLeft: "-" + PW * (n + 1) + "px" }, function () {
                        if (kkk.width() <= PW * (n + 2)) {
                            ra.css({ "display": "none" });
                        }
                        n = n + 1;
                    });
                }
            });
            la.click(function () {
                ra.css({ "display": "block" });
                var xx = kkkk.offset().left - kkk.offset().left;
                if (xx == PW * n || xx == PW * n - 1) {
                    kkk.animate({ marginLeft: "-" + PW * (n - 1) + "px" }, function () {
                        if (n <= 1) {
                            la.css({ "display": "none" });
                        }
                        n = n - 1;
                    });
                }
            });
        }
    });
});