<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<script?src="jquery.min.js"></script>
????<style>
?*{
????????????margin:?0;
?padding:?0;
?color:white;
?font-weight:?bold;
?}
????????.slidebox{
????????????width:500px;
?height:?300px;
?background-color:?pink;
?margin:?30px?auto?0;
?overflow:?hidden;
?position:?relative;
?}
????????.content{
????????????position:?absolute;
?display:?block;
?width:?1500px;
?height:?300px;
?left:?0;
?top:?0;
?}
????????.content{
????????????list-style:?none;
?}
????????.content?li{
????????????float:?left;
?width:?500px;
?height:?300px;
?background-color:?#00bbee;
?}
????????.select{
????????????display:?block;
?width:?100%;
?height:?30px;
?position:?absolute;
?bottom:?50px;
?text-align:?center;
?list-style:?none;
?}
????????.select?li{
????????????font-size:?50px;
?display:?inline-block;
?cursor:?pointer;
?}
????????.lt{
????????????position:?absolute;
?left:?20px;
?top:135px;
?font-size:?30px;
?cursor:?pointer;
?}
????????.gt{
????????????position:?absolute;
?right:?20px;
?bottom:135px;
?font-size:?30px;
?cursor:?pointer;
?}
????????.select?li,.lt,.gt{
????????????opacity:?0.6;
?}
????????.lt:hover,.gt:hover{
????????????opacity:?1;
?}
????????.select?li.active{
????????????opacity:?1;
?}
????</style>
</head>
<body>
????<div?class="slidebox">
????????<ul?class="content">
????????????<li?style="background-color:?#00ee00"></li>
????????????<li?style="background-color:?#95B8E7"></li>
????????????<li?style="background-color:?goldenrod"></li>
????????</ul>
????????<ul?class="select">
????????????<li?id="li1"?class="active">.</li>
????????????<li?id="li2">.</li>
????????????<li?id="li3">.</li>
????????</ul>
????????<a?class="lt"><</a>
????????<a?class="gt">></a>
????</div>
</body>
<script>
?$(function(){
????????$(".gt").click(function(){
????????????var?imgpos=parseInt($(".content").css("left"));
?imgpos-=500;
?if(imgpos<-1000){imgpos=0}
????????????$(".content").css("left",imgpos);
?indexFun();
?});
?$(".lt").click(function(){
????????????var?imgpos=parseInt($(".content").css("left"));
?imgpos+=500;
?if(imgpos>0){imgpos=-1000}
????????????$(".content").css("left",imgpos);
?indexFun();
?});
?var?slideFun=function(){
????????var?imgpos=parseInt($(".content").css("left"));
?imgpos-=500;
?if(imgpos<-1000){imgpos=0}
????????$(".content").css("left",imgpos);
?indexFun();
?};
?var?indexFun=function(){
????????????var?imgpos=parseInt($(".content").css("left"));
?if(imgpos==0){
????????????????$("#li1").addClass("active").siblings().removeClass("active");
?}else?if(imgpos==-500){
????????????????$("#li2").addClass("active").siblings().removeClass("active");
?}else{
????????????????$("#li3").addClass("active").siblings().removeClass("active");
?}
????????}
????var?timer=setInterval(slideFun,1000);
?$(".slidebox").hover(
????????????function(){
????????????????clearInterval(timer);
?},function(){
???????????????clearInterval(timer);
?timer=setInterval(slideFun,1000);
?});
?var?listbtn=$(".select?li");
?listbtn.each(function(){
????????????var?index=$(this).index();
?$(this).hover(function(){
????????????????$(this).addClass("active").siblings().removeClass("active");
?$(".content").css("left",-index*500);
?})
????????})
????})
</script>
</html>
寫的好復雜，這里的js怎樣精簡并提高可復用性
qq_sU_4
2016-07-26 12:34:15
