zoukankan      html  css  js  c++  java
  • jquer 带左右按钮滚动图片 点击显示大图

    <style>
    ul{ list-style:none; padding:0px; margin:0px;}
    li{ list-style:none; padding:0px; margin:0px;}
    .big_pic{ width:300px; height:300px; overflow:hidden; padding-bottom:20px;}
    #pic_box{ width:510px; height:200px; overflow:hidden;}
    .pic_bon_left{ width:10px; cursor:pointer; height:200px; vertical-align:middle; float:left}
    .pic_cen{ float:left; width:480px; padding:5px; overflow:hidden;}
    .pic_cen ul{ list-style:none; overflow:hidden; height:160px;}
    .pic_cen ul li{ list-style:none; width:100px; height:160px; float:left; padding-right:10px;}
    .pic_cen ul li img{ width:96px; height:160px;}
    .pic_bon_right{ width:10px; cursor:pointer; height:200px; vertical-align:middle; float:right}
    </style>
    <div class="big_pic"><img src="img/1.jpg" id="bigimg" /></div>
    <div id="pic_box">
    <div class="pic_bon_left"><</div>
    <div class="pic_cen">
      <ul>
          <li><img src="img/1.jpg" /></li>
          <li><img src="img/2.jpg" /></li>
          <li><img src="img/3.jpg" /></li>
          <li><img src="img/4.jpg" /></li>
          <li><img src="img/5.jpg" /></li>
          <li><img src="img/6.jpg" /></li>
        </ul>
    </div>
    <div class="pic_bon_right">></div>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
    var prev=$(".pic_bon_left");
    var next=$(".pic_bon_right");
    var img=$(".pic_cen ul");
    var flag="left";
    var ad;
    var w=$(".pic_cen ul li").outerWidth(true); //outerWidth(options)获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效
          
          $(".pic_cen ul li").click(function(){
          $src=this.getElementsByTagName("img")[0].src;
          $("#bigimg").attr("src",$src);
          });
          
           next.click(function(){
                img.animate({"margin-left":-w},function(){
                img.find("li").eq(0).appendTo(img);   //在被选元素img 结尾(仍位于内部) 加入加'eq(0):第一个'li
                img.css({"margin-left":0});
                });
                var flag="left";
           });
           
           prev.click(function(){
                img.find('li:last').prependTo(img);   //在被选元素img 开头(仍位于内部) 加入最后一个li
                img.css({"margin-left":-w});
                img.animate({"margin-left":0});
                var flag="right";
             });
        
          
          $("#pic_box").hover(function(){
          clearInterval(ad);
          },function(){
          ad=setInterval(function(){flag == "left" ? next.click() : prev.click()},3000);      
          }).trigger("mouseleave");     
    
    });
    </script>
  • 相关阅读:
    LC.225. Implement Stack using Queues(using two queues)
    LC.232. Implement Queue using Stacks(use two stacks)
    sort numbers with two stacks(many duplicates)
    LC.154. Find Minimum in Rotated Sorted Array II
    LC.81. Search in Rotated Sorted Array II
    LC.35.Search Insert Position
    前后端分离:(一)
    Redis基本使用(一)
    GIT篇章(二)
    GIT篇章(一)
  • 原文地址:https://www.cnblogs.com/vania/p/3319043.html
Copyright © 2011-2022 走看看