用JQ实现的简单轮播图

来源：互联网发布：最佳睡眠时间知乎编辑：程序博客网时间：2024/06/06 18:31

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>

<script>
var items=["aaa","abc","bac","bab","dda","ddb","cddd","ssa","xxb"];
var index=0;
$(function(){
var temp=new Array();
$("#name").bind("keyup",function(event){
if(event.keyCode!=38&&event.keyCode!=40)
index=0;
temp=new Array();
for(var i=0;i<items.length;i++){
if(items[i].indexOf(this.value)>=0)
temp[temp.length]=items[i];
}

if(!($(this).val()==""||temp.length==0)){
$("#ul1").show();
$("#ul1").html("");
for (var j=0;j<temp.length;j++) {
$("#ul1").append("<li id='li"+j+"' index='"+j+"'>"+temp[j]+"</li>");
}
}else{
$("#ul1").html("");
$("#ul1").hide();
}

if(temp.length>0){
if(event.keyCode==38)
index=index==0?temp.length-1:index-1;
if(event.keyCode==40)
index=index==temp.length-1?0:index+1;
if(event.keyCode==13){
var a1=$("#li"+index).html()
$("#name").val(a1)
$("#ul1").hide();
}
}
$("li").removeClass("li1")
$("#li"+index).addClass("li1")
});

$("li").live("mouseout mouseover keyup",function(){
$("li").removeClass("li1")
index=parseInt( $(this).attr("index"));
$(this).toggleClass("li1");
})

$("li").live("click",function(){

$("#name").val(this.innerHTML)
$("#ul1").hide();
})

})
</script>

<style>
li{
margin-left: -40px;
}
.li1{
background-color: aqua;
}
</style>
<body>
<h1>自动补全</h1>
<div style="margin: auto;width: 400px;">
<input type="text" id="name" size="60"/>

<ul id="ul1" style="border: 1px solid red;display: none;width: 338px;list-style: none;margin-top: 0px;">
</ul>

</div>
</body>
</html>

阅读全文

0 0