jQuery实现图⽚渐⼊渐出切换展⽰效果
在这之前我们先看看我们要做的效果是什么样的：
jquery在线图片我们要图⽚在过“⼀定时间”后⾃动切换，在右下⾓处有⼩⽅块似数字1,2,3,4，这些数字是根据图⽚的个数⾃动出现的，当⿏标经过的时候数字颜⾊有⼀定的变化；
下⾯我们来看看具体怎么实现。
第⼀步：先写简单的html页⾯
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.js" ></script>
<script type="text/javascript" src="scrollPic.js" ></script>
<link rel="stylesheet" href="scrollPic.css">
</head>
<body>
<div class="pic-slider-io">
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
</div>
</body>
</html>
页⾯代码解析：⾸先建⽴scrollPic.html,scrollPic.js,scrollPic.css。⼆话不说先把要的三个基本的⽂件建好；然后把它引⼊到html中在head头部，其中注意
src="../js/jquery.js"
这个代码的意思，“../”表⽰跳出上级⽬录，然后在js⽂件夹下查jquery.js⽂件；
在html页⾯中，我们在body中添加⼀个class为'pic-slider-io'的div，在div中有⼀个ul，li下⾯有四张图⽚，注意：图⽚事先设置好命名，为1.jpg,⽅便在编写scrollPic.js；
先看看这个时候什么都没做的页⾯样式：
可以看到图⽚是⼀原来的⼤⼩平铺在页⾯上的，⼀默认ul li的⽅式展现在页⾯上的；
现在我们要把它放在左下⾓；
第⼆步：编写css样式来控制它
⾸先控制div的展现：
.pic-slider-io{
height : 200px; //设置div的⾼为200px；
width : 800px; //设置div的宽为800px；
float : letf; //float 属性定义元素在哪个⽅向浮动。以往这个属性总应⽤于图像，使⽂本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会⽣成⼀个块级框，⽽不论它本⾝是何种元素。
position : relative; //position 属性规定元素的定位类型.这个属性定义建⽴元素布局所⽤的定位机制。任何元素都可以定位，不过绝对或固定元素会⽣成⼀个块级框，⽽不论该元素本⾝是什么类型。相对定 //位元素会相对于它 overflow : hidden; //overflow 属性规定当内容溢出元素框时发⽣的事情.hidden 内容会被修剪，并且其余内容是不可见的。
}
看⼀下页⾯样式：
看到所有图⽚都在⼀起去了，图⽚的本⾝⼤于div的宽⾼，所以overflow：hidden这个就把其他溢出的就不显⽰了，不过这肯定不是我们想要的，不急继续；
然后，我们现在控制ul的样式：
.pic-slider-io ul{
margin : 0px; //设置上下左右的外边距都为0；
padding : 0px;//设置上下左右的内边距都为0；注意：margin,padding的设置是：上，右，下，左；如margin ： 2px,4px,5px,8px；分别对应的是上，右，下，左；
height : auto; //⾃适应⾼度，浏览器⾃动计算
width : 100%; //宽度为100%
list-style-type : none; //把li的点去掉
float : left;
display : block; //此元素将显⽰为块级元素，此元素前后会带有换⾏符
position : absolute;//⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。
top : 0;
left : 0;
z-index : 98;//z-index 属性设置元素的堆叠顺序。拥有更⾼堆叠顺序的元素总是会处于堆叠顺序较低的元素的前⾯。
}
这个时候图⽚就不显⽰了，页⾯看到的是把左上⾓那个点去掉了；
再次，我们控制li的样式：
.pic-slider-io ul li {
height: auto;
width: 100%;
float: left;
padding: 0px;
margin: 0px;
overflow: hidden;
z-index:1; //这个li层就⽐ul那个叠层更⾼
}
这个样式的设置主要是把li的叠层⾼于ul 就相当于浮在ul上⾯；
最后，我们来看看img的样式：
.pic-slider-io ul li img{
width: 100%;
z-index:1;//设置图⽚和li在同⼀层上，这个应该没问题吧
}
现在我们来看看页⾯成什么样了：
看到，经过样式设置，整个图⽚都显⽰出来了；
第三步：编写scrollPic.js
在编写js的时候，我们要添加右下⽅的图⽚数字显⽰，我们事先把要添加的css写好如下：
.pic-page-btn {//这是在⽗div中的⼦div样式，⽤于显⽰在右下⾓的数字承载模块
float: left;
width: auto;
height: 30px;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 99; //他的叠层⽐⽗级div还要⾼，把这个按钮样式放在图⽚之上
}
.pic-page-btn span{ //这个是设置⼦div的数字样式
height: 30px;
width: 30px;
background-color: #999;
display: block;
float: left;
line-height: 30px;
text-align: center;
color: #FFF;
margin-right: 10px;
cursor:pointer;
}
.pic-page-btn .current {//这是将要设置⿏标滑过改变其背景颜⾊
background-color: #1D5D76;
}
下⾯，我们来看看js的编写，在这⾥不是视频，就不⼀步⼀步的讲了，我把各个解释都注释在js代码中了
js代码：
$(function(){
$.scrollPic = function (options){ //定义了⼀个scrollPic函数，有⼀个传参，⽤于调⽤；
/************************开始整个默认插件参数讲解*******************************/
//整个defaults以花括号包含的是默认的参数，调⽤此插件的只需要修改ele，Time，autoscroll即可；
var defaults={
ele: '.pic-slider-io', //pic-slider-io是⼀个class，css中定义了其样式；
Time : '2000', //Time是定义了滑动的时间；
autoscroll : true //autoscroll设为true表⽰⾃动切换图⽚；
};
/************************结束整个默认插件参数讲解*******************************/
//$.extend({},defaults, option)有{}主要是为了创建⼀个新对象，保留对象的默认值。
var opts = $.extend({}, defaults, options);
//$(opts.ele)可以理解为取这个执⾏，与$('.class1').click()；类似表⽰，然后理解为赋值给PicObject；
//或者这样理解,$(opts.ele)就是$('.pic-slider-io')，只不过（.pic-slider-io是个class作为参数，所以要(opts.ele)来表⽰）；
var PicObject = $(opts.ele);
//PicObject.find('ul')，这个可以理解成$(opts.ele).find('ul')，因为opts.ele其实就是取得的⼀个class，
//相当于$('.pic-slider-io').find('ul')；然后赋值给scrollList，所以整个就⽤scrollList来表⽰他；
var scrollList = PicObject.find('ul');
//同理scrollList.find('li')可以表⽰为$('.pic-slider-io').find('ul').find('li')；所以这个是⼀层⼀层来查的如果你看到html就会更加清晰； var listLi = scrollList.find('li');
//图⽚的命名是1.jpg,2.jpg，这样的，index是⽤来表⽰图⽚的名字的初始化赋值为0；
var index = 0;
//这是定义⼀个picTimer(⾃动切换函数)的函数；
var picTimer;
//⼀个li中包含⼀个图⽚，所以这是查有多少个图⽚，赋值给len；
var len = PicObject.find('li').length;
/*****************开始⾃动切换函数************************/
function picTimer(){
showPic(index);//调⽤showPic(index)函数(在下⾯)
index++;
if(index == len){//如果index的值等于len，就表⽰从第⼀张图⽚到最后⼀张图⽚切换完了，然后是index赋值为0重新开始
index=0;
}
}
/*****************结束⾃动切换函数************************/
//setInterval() ⽅法可按照指定的周期（以毫秒计）来调⽤函数或计算表达式。
//setInterval() ⽅法会不停地调⽤函数，直到 clearInterval() 被调⽤或窗⼝被关闭
//此判断为如果autoscroll为true，则不停的调⽤picTimer函数，以Time的速度调⽤
if(opts.autoscroll){
var time = setInterval(picTimer,opts.Time);
}
/*****************开始动画函数************************/
function showPic(index){//定义动画函数
//listLi是到第⼀个li，然后隐藏他，listLi在var listLi = scrollList.find('li')；已经介绍了
listLi.hide();
//fadeIn() ⽅法使⽤淡⼊效果来显⽰被选元素，假如该元素是隐藏的。siblings()⽅法是遍历。
listLi.eq(index).fadeIn(500).siblings().hide();
//到paging对应的css样式，如果与当前的index⼀致，则添加class为current的css样式，否则就移除。
PicObject.find(paging).eq(index).addClass('current').siblings().removeClass('current');
}
/*****************结束动画函数************************/
//这是在class为pic-slider-io的div中添加⼀个class为pic-page-btn的⼦div。
//主要是设置右下⾓数字的承载
PicObject.append('<div class="pic-page-btn"></div>');
//在这个class为pic-page-btn的⼦div中添加图⽚张数对应的数字个数，1,2,3，，，，，
//从这可以看出来，数字不是⾃⼰⼀个个添得，是根据li的个数，也就是图⽚的个数⾃动⽣成的
for( i=1;i<=len;i++){
PicObject.find('.pic-page-btn').append('<span>'+i+'</span>');
}
/
/这个就是和上⾯讲listLi⼀样的
var paging = PicObject.find('.pic-page-btn span');
//为相应的右下⾓的数字改变其背景颜⾊
paging.eq(index).addClass('current');
}
});
在这我们差不多完成了图⽚的切换，
然后我们在html中先调⽤默认的看⼀看：
调⽤⽅式：
<script type="text/javascript">
$(function(){
$.scrollPic();
});
</script>
看⼀下界⾯显⽰：
看箭头所⽰，说明可以⾃动切换了图⽚；
可是我们还有当⿏标在右下⾓1,2,3,4上滑过的时候，可以切换图⽚，所以我们就在js中加个事件就可以了：
//⿏标经过1、2、3、4的效果
PicObject.find(paging).mouseover(function(){
index = PicObject.find(paging).index($(this));
showPic(index); //调⽤showPic(index)函数。
});
//⿏标经过1、2、3、4的效果
//清除计时器
//当⿏标悬浮在1,2,3,4上⾯的时候，就相当于要切换图⽚了
//所以我们就要清除计时器，重新来过了
PicObject.hover(function(){
clearInterval(time);//这个是相对于setInterva()的；
},function(){
if(opts.autoscroll){
time = setInterval(picTimer,opts.Time);
}else{
clearInterval(time);
}
});
把这段代码加如到js中，加到什么位置就不要说了吧！加到
paging.eq(index).addClass('current');
后⾯就可以了；
这样整个这个图⽚切换的⼀个插件就算完成了；
如果需要调⽤函数，可以修改ele,Timer,autoscroll.
看⼀下带参数使⽤插件：
<script type="text/javascript">
$(function(){
$.scrollPic({
ele: '.pic-slider-io', //插件应⽤div
Time:'3000', //⾃动切换时间
autoscroll:true, //设置是否⾃动渐变
});
});
</script>
好了，整个插件的讲述就算是完成了，希望⼤家可以从中学到知识，如有不⾜，还望谅解！（最后说⼀句，在整个js的编写时，最好在$(function(){})；的最前⾯加个分号，防⽌与其他js冲突）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论