网页效果：jquery实现轮播图前沿：轮播图是网站最为常见的网页效果，不管是企业站、个人博客还是门户网站，轮播图效果的应用是十分广泛，主要用来突出网站重要的文章或是专题。轮播图的基本原理基本差不多，都是将图片元素浮动之后进行定时滚动，滚动到最后一张图片时再会到起点，重新开始。还可以添加按键控制和常见的悬停效果。
大家需要了解css的绝对定位和相对定位，以及jquery的hover事件、定时器、动画效果等知识的了解。提醒：不管是要实现什么效果，需要先通过html将效果样式先写出来，再通过事件一一触发jquery效果。
轮播图实现过程：1、新建一个空白项目文件，包含一个img和一个css文件夹，需要滚动的图片放入img文件。2、新建一个HTML文件，在css文件夹新建css文件
3、先插入对应的jquery公共库和对应的css文件4、根据网页效果，写好对应html代码
代码解释：Div+.banner:最外层盒子，包裹所有的元素Ul+.img:包裹图片元素的盒子Div+.icon:包裹对于图片的小图标盒子Div+.left:向左的按键Div+right:向右的按键
思路：1、要实现图片滚动，最外层需要设置为超出隐藏2、图片为向左滚动，需要将所有的图片元素设置为左浮动3、图片对于的小图标、左按键、右按键是固定不动，所以要使用绝对定位和相对定位CSS代码：{padding:0;margin:0;}/所有盒子边框、内边距清零/#banner{
width:500px;/宽度/height:300px;/高度/overflow:hidden;/超出盒子部分隐藏/position:relative;/相对定位/margin:0auto;/居中对其/margin-top:50px;/盒子据顶部距离/border:1pxsolid#5F9EA0;/边框线对应，宽实线颜色/}ulli{list-style:none;}/ulli默认列图标清除/#img{width:500%;/宽度/
height:200px;/高度/}#imgli{float:left;}/左浮动/
#left{position:absolute;/绝对定位/left:0;/据左边的距离/top:130px;/据顶部的距离/}#right{position:absolute;/绝对定位/right:0;/据右边的距离/top:130px;/据顶部的距离/}#icon{
position:absolute;/绝对定位/bottom:15px;/据底部的距离/right:15px;/据右边的距离/}#bannerspan{width:10px;/宽度/height:10px;/高度/background-color:#4E4E54;/盒子背景色/float:left;/左浮动/margin-right:10px;/盒子到右边的距离/border-radius:50%;}/圆角设置/
#icon.on{background-color:#399A91;}/背景色/Html+css效果如图：
jQuery代码：$(function(){varwidth;//滚动宽度varindex=0;//图片的序列号varlen;//图片的个数varadtime;//定时器varimgScroll;//滚动函数width=$("#imgli:first").width();//获取图片li标签的宽度作为滚动宽度，滚动一次的宽度。len=$("#imgli").length;//图片的个数$("#iconspan").mouseover(function(){//鼠标事件，当鼠标移动到那个图片对应的小图标就滚动到那张图片。index=$("#icon>span").index(this);//获取图标的序
列号imgScroll(index);//带参数执行滚动函数});$("#banner").hover(//鼠标hover事件，即移动到上面时，图片滚动停止，鼠标离开滚动继续function(){//对应mouseover事件clearInterval(adtime);//清除定时},function(){//对应mouseout事件adtime=setInterval(www.mqhtz.com//定时设置function(){imgScroll(index);//带参数执行滚动函数index++;//序列号值自加
if(index==len)index=0;//最后一张，再滚动时，滚动到第一张},3000)//3秒执行一次}).trigger("mouseleave");//通过mouseleave事件触发，相当于页面加载就执行！$("#left").mouseup(function(){//鼠标释放执行index+=1//向左+if(index==len)index=0;imgScroll(index);});$("#right").mouseup(function(){//鼠标释放执行
index-=1//向右-if(index==-1)index=len-1;imgScroll(index);});
functionimgScroll(index){//带参数滚动函数$("#img").stop(true,false).animate({//执行动画marginLeft:-widthindex+"px"//滚动},1000);//滚动过程时间为1s$("#iconspan").removeClass("on").eq(index).addClass("on");//图片角标效果对应}})效果思路：1、滚动效果，通过animate动画效果实现，通过改变marginLeft的值，实现滚动的距离
2、鼠标进入停止滚动，离开继续滚动，通过hover事件实现。Hover事件语法：$(selector).hover(inFunction,outFunction)inFunction：对应mouseover事件outFunction：对应mouseout事件3、通过鼠标事件再控制按键效果，实现向左图片滚动切换和向右图片滚动切换代码解释：
$("#imgli:first")：遍历对应li标签的取第一个li元素$("#imgli").length：获取对应li标签的个数$("#icon>span").index(this)：获取当前元素的序列号，第一个为0clearInterval(adtime)：清除定时setInterval(function(){},3000)：定时设置animate({},1000)：动画
removeClass、addClass：移除和添加csseq(index)：按序列号选取对应的元素总结：看不动的代码，直接找到对应的jquery事件，通过手册查看用法。
效果：
|
|
