jQuery打造淘寶展示效果和淘寶輪播圖

weixin_33716557發表於2016-09-08
jQuery

淘寶展示效果

效果地址：http://www.sunyimin.cn/web22.0/14jq.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>淘寶展示圖</title>
<script src="js/jquery-1.12.3.min.js" ></script>
<script>
  $(document).ready(function(){   
       var $img = $('img');
       var arrPos = [];
       var blankIndex = 8;
       var prevIndex = -1;
       var arr = [
              [1,3],
              [0,2,4],
              [1,5],
              [0,4,6],
              [1,3,5,7],
              [2,4,8],
              [3,7],
              [4,6,8],
              [5,7]
         ];
    // 通過佈局轉化  將浮動佈局轉為絕對定位佈局
     $img.each(function(i,elem){
       arrPos.push( [ $(elem).position().left , $(elem).position().top ] );//儲存各個img的left值和top值
  });
   $img.each(function(i,elem){
    $(elem).css('position','absolute');
    $(elem).css('left',arrPos[i][0]);
    $(elem).css('top',arrPos[i][1]);        //給每個img加上絕對定位，並賦上left值和top值
  });  
    $img.each(function(i,elem){
    $(elem).attr('_index',i);      //給各個img添上索引值
  });
  
  function move(){
        var nowArr = arr[blankIndex];
        var filterArr = [];    
    for(var i=0;i<nowArr.length;i++){
      if( nowArr[i] != prevIndex ){
        filterArr.push(nowArr[i]);
      }
    }
    var nowIndex = filterArr[ Math.floor(Math.random()*filterArr.length) ];    
           prevIndex = blankIndex;  
    var iLeft = blankIndex%3 * 200;
    var iTop = Math.floor(blankIndex/3) * 200;
    var tmp = '';   
    $img.each(function(i,elem){  
         if( $(elem).attr('_index') == nowIndex ){
               $(elem).animate({ left : iLeft, top : iTop },1000,function(){          
                       tmp = blankIndex;
                       blankIndex = nowIndex;
                       $(elem).attr('_index' , tmp);
                       move();
             });
         }   
    });    
  }  
     move();
  })
</script>
<style type="text/css">
 body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0;}
em{ font-style:normal;}
li{list-style:none;}
a{text-decoration:none;}
img{border:none;vertical-align:top;}
table{border-collapse;}
textarea{ resize:none; overflow:auto;} 

#box{width:600px;height:600px;border: 1px solid #000;position: relative;margin:200px auto;}
#box img{width:200px;height:200px;float: left;}     
</style>
</head>
<body>
  <div id="box">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
    <img src="img/3.jpg">
    <img src="img/4.jpg">
    <img src="img/5.jpg">
    <img src="img/6.jpg">
    <img src="img/7.jpg">
    <img src="img/8.jpg">
  </div>
</body>
</html>

淘寶輪播圖

效果地址：http://www.sunyimin.cn/web23.0/15jq.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>淘寶輪播圖</title>
  <style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0;}
em{ font-style:normal;}
li{list-style:none;}
a{text-decoration:none;}
img{border:none;vertical-align:top;}
table{border-collapse;}
textarea{ resize:none; overflow:auto;} 

#wrap{width:470px;height:150px;border:1px solid #000;margin: 200px auto;position: relative;overflow: hidden;}
#wrap .list1{width:470px;height:150px;position: relative;}
#wrap .list1 li{width:470px;height:150px;position: absolute;}
#wrap .list2 {position: absolute;right:4px;bottom:4px;}
#wrap .list2 li{width:20px;height:20px;background: #fff;color:#ff6600;float: left;line-height: 20px;text-align: center;margin: 4px;cursor: pointer;}
#wrap .list2 .active{color:#fff;background:#ff6600;}   
</style>
<script src="js/jquery-1.12.3.min.js" ></script>
<script>
  $(document).ready(function(){
            $('.list1 li').slice(1,5).css('left','470px');
             var prevIndex=0;
            var timer=null;
     $('.list2 li').on('mouseover',function(){
                clearTimeout(timer);
      timer=setTimeout($.proxy(function(){     //工具函式$.proxy() 改變函式的this指向
       $(this).attr('class','active').siblings().attr('class','');
         if( prevIndex<$(this).index()){      //往左走
                 $('.list1 li').eq($(this).index()).css('left','470px');
                 $('.list1 li').eq(prevIndex).animate({left:-470},500);
         }else if(prevIndex>$(this).index()){  //往右走
                 $('.list1 li').eq($(this).index()).css('left','-470px');
                 $('.list1 li').eq(prevIndex).animate({left:470},500);         
         }
          $('.list1 li').eq($(this).index()).animate({left:0},500);
                 prevIndex=$(this).index();
         },this),500)
     })
  })
</script>
</head>
<body>      
   <div id="wrap">
     <ul class="list1">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
        <li><img src="images/5.jpg"></li>
     </ul>
     <ul class="list2">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
     </ul>
   </div>
</body>
</html>

相關文章