这个JQ写的超级简单，是本人在博客园的第一个博客，希望加油，以后回忆起来，大家都是从菜鸡开始的。加油加油！！！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
#adv{
margin: 10px auto;
width:520px;
height:280px;
/*overflow: hidden;*/
position:relative;
}
#adv li{
position: absolute;
list-style: none;
}
#left{
position: absolute;
left: 0px;
}
#right{
position: absolute;
right: 0px;
top: 38%;
cursor: pointer;
}
#left{
position: absolute;
left: 0px;
top: 38%;
cursor: pointer;
}
</style>
</head>
<body>
<script src="jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
var timer = null;
var curr = 0;
var $imgs
var $advs;
var $bts;
var $left;
var $right;
$(function(){
$imgs= $("#pic1 li");
$advs = $("#adv");
$bts =$("#left,#right");
$left = $("#left");
$right = $("#right");
show(curr);
startTimer();
$advs.hover(function() {
stopTimer();
$bts.css("opacity",1)
}, function() {
startTimer();
$bts.css("opacity",0.3)
});
$left.click(function() {
curr--;
if(curr<0){
curr=$imgs.length-1;
}
show(curr);
});
$right.click(function() {
curr++;
if(curr>=$imgs.length-1){
curr=0;
}
show(curr);
});
})
function startTimer() {
if (timer==null) {
timer = window.setInterval("show()",2000);
}
}
function stopTimer(){
if(timer!=null){
window.clearInterval(timer);
timer = null;
}
}
function show(index){
if(index==undefined){
curr++;
if(curr>=$imgs.length){
curr=0;
}
}else{
curr=index;
}
$imgs.eq(curr).css('display','block').siblings().css('display','none')
}
</script>
<div id="adv">
<ul id="pic1">
<li><img src="T1.jpg"/></li>
<li><img src="T2.jpg"/></li>
<li><img src="T3.jpg"/></li>
<li><img src="T4.jpg"/></li>
<li><img src="T5.jpg"/></li>
</ul>
<ul id="pic2">
<img src="left.png" id="left">
<img src="right.png" id="right">
</ul>
</div>
</body>
</html>
2455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
