每天学点jQuery（四）

最新推荐文章于 2015-12-24 21:25:04 发布

BeyondQqiang

最新推荐文章于 2015-12-24 21:25:04 发布

阅读量1.1k

点赞数

分类专栏： Jquery学习文章标签： jQuery JavaScript

本文链接：https://blog.csdn.net/BeyondQqiang/article/details/8948450

版权

Jquery学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

通过前面的一些介绍和学习，如果你有很很认真的去练习的话，并且你有以前学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哈哈~

每天说一句，祝：积极的心态生活，专研于计算机并为之努力。

-----------------------------------------------------------------------------------------------------------平凡人的挣扎（看《中国合伙人》有感）

BeyondQqiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每天学点jQuery（四）

通过前面的一些介绍和学习，如果你有很很认真的去练习的话，并且你有以前学javascript的基础（你懂得如何用原生的js去写一些基本的网页特效），那么综合一下用jQuery写出一个小的图片展示的特效是绝对没有问题的。那么，这篇文章我就贴出我写的一个小的特效，这个特效用到的技巧全是前三篇文章里面说到的，而且最重要的部分基本都集中在第三篇文章中。下面是这个特效的简介：1，通过顶部的左右
复制链接

扫一扫