jQuery第二次作业----淘宝精品服装

最新推荐文章于 2018-07-19 21:35:07 发布

酷扬

最新推荐文章于 2018-07-19 21:35:07 发布

阅读量342

点赞数

本文链接：https://blog.csdn.net/aa8869138/article/details/69396364

版权

html 同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

css

26 篇文章 0 订阅

订阅专栏

html css

25 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
ul li button{
width: 70px;
background: pink;
border: 1px solid pink;
height: 28px;
}
.left{
position: absolute;
top:200px;
left:400px;
height: 250px;
}
.right{
position: absolute;
top:200px;
left:670px;
height: 250px;
}
.cen{
width: 198px;
height: 248px;
border:1px solid pink;
position:absolute;
top:200px;
left:470px;
}
</style>
</head>
<body>
<ul class="left">
<li><button>女靴</button></li>
<li><button>雪地靴</button></li>
<li><button>冬裙</button></li>
<li><button>呢大衣</button></li>
<li><button>毛衣</button></li>
<li><button>棉服</button></li>
<li><button>女裤</button></li>
<li><button>羽绒服</button></li>
<li><button>牛仔裤</button></li>
</ul>
<div class="cen"><img src="女靴.jpg" alt=""></div>
<ul class="right">
<li><button>女包</button></li>
<li><button>男包</button></li>
<li><button>登山鞋</button></li>
<li><button>皮带</button></li>
<li><button>围巾</button></li>
<li><button>皮衣</button></li>
<li><button>男毛衣</button></li>
<li><button>男棉服</button></li>
<li><button>男靴</button></li>
</ul>
<script type="text/javascript">
$(function(){

var arr=["女靴.jpg","雪地靴.jpg","冬裙.jpg","呢大衣.jpg","毛衣.jpg","棉服.jpg","女裤.jpg","羽绒服.jpg","牛仔裤.jpg","女包.jpg","男包.jpg","登山鞋.jpg","皮带.jpg","围巾.jpg","皮衣.jpg","男毛衣.jpg","男棉服.jpg","男靴.jpg"],inx;




$(".left li").click(

function(){
var index=$(this).index();

$("img").prop("src",arr[index]);
}
);

$(".right li").click(

function(){
var index=$(this).index()+9;

$("img").prop("src",arr[index]);
}
);


});
</script>
</body>
</html>