<style>
   .ons{
      border-color: #0297dc !important;
      transition:all 0.3s ease 0s;
   }
   #d3{
      position: absolute;
      width: 400px;
      height: 400px;
      margin-left: -20px;
      margin-top: -10px;
      background-size:710px 710px;
      border:5px solid #c2c2c2;
      border-radius: 10px;
      background-color: #fff;
      z-index: 1000;
      display:none;
      background-repeat: no-repeat;
      box-shadow:0px 0px 10px 10px #ddd;
   }
</style>
<!--JavaScript End-->
<script>
   $(document).ready(function(){
      //高亮class ons
      //大图包含在<div class='team-tumb'><img src=''/></div>
      //小图包含在<div class='pro-img'><img src=''/></div>

      var index1s=0;
      var sjTime=2500;
      $(".pro-img img").eq(index1s).addClass('ons');
      var inLength=$(".pro-img img").length;
      //循环改变高亮和大图
      var xHuan=function(){
         $(".pro-img img").removeClass('ons');
         $(".pro-img img").eq(index1s).addClass('ons');
         var imgs=$(".pro-img img")[index1s].src;
         $(".team-tumb img").attr('src',imgs);
      }
      //鼠标点击选择图片
      $('.pro-img img').click(function(){
         index1s=$(this).index()-1;
         xHuan();
         clearInterval(dsq);
         dsq=setInterval(function(){
            index1s++;
            if(index1s==inLength){
               index1s=0;
            }
            xHuan();
         },sjTime)
      })
      //定时器
      var dsq=setInterval(function(){
         index1s++;
         if(index1s==inLength){
            index1s=0;
         }
         xHuan();
      },sjTime)

      //鼠标经过移除定时器
      $(".team-tumb img").mouseover(function(){
         clearInterval(dsq);
      }).mouseout(function(){
         dsq=setInterval(function(){
            index1s++;
            if(index1s==inLength){
               index1s=0;
            }
            xHuan();
         },sjTime)
      })
      //放大镜
      $("#d3").hide();
      if($(window).width()> 768){
         $('.team-tumb img').mousemove(function(){
            img1= $('.team-tumb img').attr('src');
            var x=event.offsetX;
            var y=event.offsetY;
            var s=$('.team-tumb').width();
            var s1=700/s;
            console.log(s1);
            console.log(x);
            console.log(y);
            if(x<=114){
               x=114;
            }else if(x>=260){
               x=260;
            }
            if(y<114){
               y=114;
            }else if(y>260){
               y=260;
            }
            $("#d3").show();
            $("#d3").css({'background-image':'url('+img1+')','background-position':((-x*s1)+200)+'px'+' '+((-y*s1)+200)+'px'})
         }).mouseout(function(){
            $("#d3").hide();
         })
      }
   })
</script>