通过前面的一些介绍和学习,如果你有很很认真的去练习的话,并且你有以前学javascript的基础(你懂得如何用原生的js去写一些基本的网页特效),那么综合一下用jQuery写出一个小的图片展示的特效是绝对没有问题的。
那么,这篇文章我就贴出我写的一个小的特效,这个特效用到的技巧全是前三篇文章里面说到的,而且最重要的部分基本都集中在第三篇文章中。下面是这个特效的简介:
1,通过顶部的左右按钮点击可以切换下一屏图片的展示
2,在切换每屏图片的时候最上面的标志点,会根据当前屏出现在不同的位置上
3,可读性:基于过程开发,可自由变换,但前提是你可以看的懂代码的每个部分
4,每屏展示的图片数可自定义:当你只想修改每屏显示的图片个数的时候js代码仅需要修改这一处即可,但css样式需要稍做变动。
特效截图如下:
特效代码如下:
<!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>jQuery图片展示</title>
<style type="text/css">
boty,div,img,ul,li,p,font{ margin:0; padding:0;}
.clear{ clear:both;}
.v_show{ width:800px; margin:0 auto;}
.v_caption{ height:30px;}
.v_caption .caption_title{ float:left;}
.caption_title font{ font-weight:bolder;}
.v_caption .highlight_tip{ float:left; margin-left:10px;}
.highlight_tip span{ color:#000;}
.highlight_tip .current_tip{ color:#0C9;}
.v_caption .change_but{ float:left; margin-left:20px;}
.v_content{width:840px; overflow:hidden; height:320px;border:1px solid #F33; text-align:center; position:relative;}
.v_content ul.v_content_list_ul{ position:absolute; left:0; top:0;}
.v_content ul li{ float:left; list-style:none; padding:5px;}
</style>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<div class="caption_title"><font>图片展示</font></div>
<div class="highlight_tip">
<span class="current_tip">●</span>
<span>●</span>
<span>●</span>
</div>
<div class="change_but">
<span class="prev">←</span>
<span class="next">→</span>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="v_content">
<ul class="v_content_list_ul">
<li><a href=""><img src="./img/111.jpg" /></a><p>1</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>2</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>3</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>4</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>5</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>6</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>7</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>8</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>5</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>6</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>7</p></li>
<li><a href=""><img src="./img/111.jpg" /></a><p>8</p></li>
</ul>
</div>
</div>
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var oContent = $("ul.v_content_list_ul"); //获取ul对象
var iLiOffsetWidth = $("ul.v_content_list_ul li:first-child").innerWidth(); //获取li的实际宽度
var iLiNum = $("ul.v_content_list_ul li").length; //获取li的个数
var iSize = 4; //每屏展示的个数,一定要能整除li的个数
//标记总共有几屏
var iPageNum = iLiNum / iSize;
var iCur = 0; //标记上面的span标记
//改变ul的宽度使得所有的li都排成一行
oContent.css("width", iLiOffsetWidth*iLiNum);
//获取左按钮
$(".change_but .prev").click(function() {
if ( oContent.is(":animated") ) { //当ul处于动画中的时候则不再添加动画
return false;
}
var iLeft = oContent.position().left; //获取ul的Left坐标
if ( iLeft <= -( (iPageNum-1) * iLiOffsetWidth * iSize ) ) {
return false;
}
iCur++;
if ( iCur > iPageNum ) {
iCur = iPageNum;
}
$(".highlight_tip span:eq("+(iCur)+")").addClass("current_tip").siblings().removeClass("current_tip");
var iNewLeft = "+="+-(iLiOffsetWidth * iSize) + "px"
oContent.stop(true).animate({"left": iNewLeft}, "slow");
return false;
});
//获取右按钮
$(".change_but .next").click(function() {
if ( oContent.is(":animated") ) { //当ul处于动画中的时候则不再添加动画
return false;
}
var iLeft = oContent.position().left; //获取ul的Left坐标
if ( iLeft >= 0 ) {
return false;
}
iCur--;
if ( iCur < 0 ) {
iCur = 0;
}
$(".highlight_tip span:eq("+(iCur)+")").addClass("current_tip").siblings().removeClass("current_tip");
var iNewLeft = "+="+(iLiOffsetWidth * iSize) + "px"
oContent.stop(true).animate({"left": iNewLeft}, "slow");
return false;
});
});
</script>
</body>
</html>
欢迎大家自己尝试修改开发,同时你有什么问题可以在下面留言提问。另外呢,对于用jQuery操作DOM的时候感觉好多人还是不熟悉,那么下一篇文章呢,我就会对用jQuery操作DOM做一个总结,大家期待吧!O(∩_∩)O哈哈~
每天说一句,祝:积极的心态生活,专研于计算机并为之努力。
-----------------------------------------------------------------------------------------------------------平凡人的挣扎(看《中国合伙人》有感)