jquery练习
1.多图片展示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多图片展示效果</title>
<link href="zns_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
</head>
<body>
<ul>
<li><img src="images/1.jpg" alt="图片一" longdesc="http://www.zhinengshe.com" /></li>
<li><img src="images/2.jpg" alt="图片二" longdesc="http://www.zhinengshe.com" /></li>
<li><img src="images/3.jpg" alt="图片三" longdesc="http://www.zhinengshe.com" /></li>
<li><img src="images/4.jpg" alt="图片四" longdesc="http://www.zhinengshe.com" /></li>
<li><img src="images/5.jpg" alt="图片五" longdesc="http://www.zhinengshe.com" /></li>
<li><img src="images/6.jpg" alt="图片六" longdesc="http://www.zhinengshe.com" /></li>
<li><img src="images/7.jpg" alt="图片七" longdesc="http://www.zhinengshe.com" /></li>
<li><img src="images/8.jpg" alt="图片八" longdesc="http://www.zhinengshe.com" /></li>
<li><img src="images/9.jpg" alt="图片九" longdesc="http://www.zhinengshe.com" /></li>
</ul>
<script type="text/javascript">
var z=999
$('li').on({
'mouseenter':function(){
z++;
$(this).find('img').stop().animate({
'width':'240px',
'height':'180px',
'marginLeft':'-60px',
'marginTop':'-45px'
},300);
$(this).css({
'position':'relative',
'zIndex':z//需要进行定位
})
},
'mouseleave':function(){
$(this).find('img').stop().animate({
'width':'120px',
'height':'90px',
'marginLeft':'0px',
'marginTop':'0px'
},300);
}
})
</script>
</body>
</html>
展示效果
2.幻灯片-左右滑动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯片左右滑动效果</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="box" id="play">
<p class="prev">«</p>
<p class="next">»</p>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
<li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
</ul>
</div>
<script type="text/javascript">
var Index=0;
//设置ul的宽度为所有li的宽度
$('ul').width($('ul>li').eq(0).width()*$('ul>li').length)
//点击数字发生的变化
$('ol > li').on({
'mousedown':function(){
$('ol > li').removeClass('active');
$(this).addClass('active');
$('ul').stop().animate({
'left':-$(this).index()*$('ul>li').eq(0).width()
},500);
Index=$(this).index();
}
});
//点击鼠标右键
$('.next').on({
'click':function(){
Index++;
if(Index==$('ol > li').length)Index=0;
$('ol > li').removeClass('active');
$('ol >li').eq(Index).addClass('active');
$('ul').stop().animate({
'left':-Index*$('ul>li').eq(0).width()
},500);
},
'mousedown':function(){
return false;//取消双击选中
}
})
//点击鼠标左键
$('.prev').on({
'click':function(){
Index--;
if(Index == -1)Index = $('ol > li').length-1;
$('ol > li').removeClass('active');
$('ol > li').eq(Index).addClass('active');
$('ul').stop().animate({
'left':-Index * $('ul>li').eq(0).width()
},500);
},
'mousedown':function(){
return false;
}
});
//定时执行
setInterval(function(){
Index--;
if(Index == -1)Index = $('ol > li').length-1;
$('ol > li').removeClass('active');
$('ol > li').eq(Index).addClass('active');
$('ul').stop().animate({
'left':-Index * $('ul>li').eq(0).width()
},500);
},3000);
</script>
</body>
</html>
效果展示
3.图片轮换
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三维图片轮换</title>
<link href="zns_style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<ul id="znsRotatePic">
<li class="pic1">
<a href="http://baidu.com/"><img src="images/pic1.gif" alt="pic1" class="unactive" longdesc="http://www.zns.com" width="187" /></a><!-- 208 -->
<span></span>
</li>
<li class="pic2">
<a href="http://google.com/"><img src="images/pic2.gif" alt="pic2" longdesc="http://www.zns.com" width="208" /></a>
<span></span>
</li>
<li class="pic3">
<a href="http://www.zns.com/"><img src="images/pic3.gif" alt="pic3" class="unactive" longdesc="http://www.zns.com" width="187" /></a>
<span></span>
</li>
</ul>
<script type="text/javascript">
var PosX = [];
var PosY = [];
var opa = [];
var ClassNameArr = [];
var imgW = [];
var imgT = [];
$('a').attr('href','javascript:;');
for(var i = 0;i < $('li').length;i++){
PosX.push($('li').eq(i).css('left'));
PosY.push($('li').eq(i).css('top'));
opa.push($('li img').eq(i).css('opacity'));
imgW.push($('li img').eq(i).css('width'));
imgT.push($('li img').eq(i).css('top'));
ClassNameArr.push($('li')[i].className);
};
$('body').on({
'click':function(){
PosX.unshift(PosX.pop());
PosY.unshift(PosY.pop());
ClassNameArr.unshift(ClassNameArr.pop());
opa.unshift(opa.pop());
imgW.unshift(imgW.pop());
imgT.unshift(imgT.pop());
for(var i = 0 ;i < $('li').length;i++){
$('li').eq(i).stop().animate({
'left':PosX[i],
'top':PosY[i]
},500);
};
for(var i = 0;i < $('li img').length;i++){
$('li img').eq(i).stop().animate({
'opacity':opa[i],
'width':imgW[i],
'top':imgT[i]
},500)
};
for(var i = 0;i < $('li').length;i++){
$('li')[i].className = ClassNameArr[i];
}
}
},'.pic3');
$('body').on({
'click':function(){
PosX.push(PosX.shift());
PosY.push(PosY.shift());
opa.push(opa.shift());
ClassNameArr.push(ClassNameArr.shift());
imgW.push(imgW.shift());
imgT.push(imgT.shift());
for(var i = 0 ;i < $('li').length;i++){
$('li').eq(i).stop().animate({
'left':PosX[i],
'top':PosY[i]
},500);
};
for(var i = 0;i < $('li img').length;i++){
$('li img').eq(i).stop().animate({
'opacity':opa[i],
'width':imgW[i],
'top':imgT[i]
},500)
};
for(var i = 0;i < $('li').length;i++){
$('li')[i].className = ClassNameArr[i];
}
}
},'.pic1');
$('body').on({
'click':function(){
alert('你真棒！');
}
},'.pic2')
</script>
</body>
</html>
效果展示
4.图片展示效果
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片展示</title>
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
<link href="style/zns_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="automatic">
<div class="prev_div"></div>
<a class="prev" href="###">
<span class="ico1"></span>
<span class="ico"></span>
<span class="txt"></span>
</a>
<div class="next_div"></div>
<a class="next" href="###">
<span class="ico1"></span>
<span class="ico"></span>
<span class="txt"></span>
</a>
<div class="line"></div>
<ul>
<li class="pos_0"><a href="http://www.zhinengshe.com"><img src="images/8.jpg" width="100" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
<li class="pos_1"><a href="http://www.zhinengshe.com"><img src="images/1.jpg" width="270" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
<li class="pos_2"><a href="http://www.zhinengshe.com"><img src="images/2.jpg" width="510" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
<li class="pos_3"><a href="http://www.zhinengshe.com"><img src="images/3.jpg" width="680" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
<li class="pos_4"><a href="http://www.zhinengshe.com"><img src="images/4.jpg" width="510" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
<li class="pos_5"><a href="http://www.zhinengshe.com"><img src="images/5.jpg" width="270" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
<li class="pos_6"><a href="http://www.zhinengshe.com"><img src="images/6.jpg" width="270" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
<li class="pos_6"><a href="http://www.zhinengshe.com"><img src="images/7.jpg" width="270" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
</ul>
</div>
<script type="text/javascript">
//定义一个变量
var leo = {
'left':[],
'top':[],
'z':[],
'opa':[],
'w':[],
'h':[]
};
//取到所有ul下面的li
var allLi = $('ul > li');
//变量数据并存入数据
for(var i = 0;i < allLi.length;i++){
leo.left.push(allLi.eq(i).css('left'));
leo.top.push(allLi.eq(i).css('top'));
leo.z.push(allLi.eq(i).css('zIndex'));
leo.opa.push(allLi.eq(i).css('opacity'));
leo.w.push(allLi.eq(i).css('width'));
leo.h.push(allLi.eq(i).css('height'));
};
for(var i = 0;i < allLi.length;i++){
allLi.eq(i).css({
'width':leo.w[i],
'height':leo.h[i]
})
};
$('img').width('100%');
//添加开关
var t = true;
$('.prev_div').click(function(){
if(!t)return;
t = false;
leo.left.unshift(leo.left.pop());
leo.top.unshift(leo.top.pop());
leo.z.unshift(leo.z.pop());
leo.opa.unshift(leo.opa.pop());
leo.w.unshift(leo.w.pop());
leo.h.unshift(leo.h.pop());
for(var i = 0;i < allLi.length;i++){
allLi.eq(i).css({
'zIndex': leo.z[i]
});
allLi.eq(i).stop().animate({
'left':leo.left[i],
'top':leo.top[i],
'opacity':leo.opa[i],
'width':leo.w[i],
'height':leo.h[i]
},500,function(){
t = true;
});
}
});
$('.next_div').click(function(){
if(!t)return;
t = false;
leo.left.push(leo.left.shift());
leo.top.push(leo.top.shift());
leo.z.push(leo.z.shift());
leo.opa.push(leo.opa.shift());
leo.w.push(leo.w.shift());
leo.h.push(leo.h.shift());
for(var i = 0;i < allLi.length;i++){
allLi.eq(i).css({
'zIndex': leo.z[i]
});
allLi.eq(i).stop().animate({
'left':leo.left[i],
'top':leo.top[i],
'opacity':leo.opa[i],
'width':leo.w[i],
'height':leo.h[i]
},500,function(){
t = true;
});
}
});
</script>
</body>
</html>
效果展示
