jQuery打造淘宝展示效果和淘宝轮播图
2016-09-08 本文已影响942人
编程小飞侠
淘宝展示效果
效果地址：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>
