对于前端小白来说，能够使用jQuery写出轮播图，是具有重要意义的！

小小的轮播图原理，涉及到许多前端的知识呢，首先布局上，要了解到重要的overflow属性，关于点击的小图标还要明白position属性以及能够熟练的运用。

说白了，简单的轮播原理就是小圈套大圈，然后让他仅仅展示一部分，再给一个周期函数，让他根据时间自己去完成动画效果，可是 大道理人人都懂，“小情绪”难以自控呀！

今天我们分享出完整的轮播教程，顺便来看看这里有哪些需要注意的“小情绪”


首先是html和css部分

义愤填膺上代码：

 

 

<div class="slideShow">
<ul>
<li><a href="#"><img src="pic1.jpg" alt="小"></a></li>
<li><a href="#"><img src="pic2.jpg"></a></li>
<li><a href="#"><img src="pic3.jpg"></a></li>
<li><a href="#"><img src="pic4.jpg"></a></li>
</ul>
<div class="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>

 

 

分析这段代码，结构还是很简单的，就是一个大div里面套了一个装着图片的ul列表和装着门牌号码的导航栏

比这个难一点的是css样式

因为轮播起来轮的就是这个样式  overflow：hidden 蒙蔽了我们的双眼 然后他就开始轮  咳咳 说到哪儿了

哦  css样式

好吧  来 靠近点 看看这css样式

<style>
*{
padding:0 ;
margin: 0;
background-color: #ffcebb;
}
.slideShow{
position: relative;
margin: 100px auto;
height: 200px;
width: 200px;
overflow: hidden;
}
.slideShow ul{
position: relative;
width: 800px;
}
.slideShow ul li{
float: left;
width: 200px;
list-style-type: none;
}
.slideShow .nav{
text-align: center;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
line-height: 18px;
}
.slideShow .nav span{
float: left;
-webkit-user-select:none;
user-select:none;
float: left;
cursor: pointer;
border-radius:9px;
display: inline-block;
width: 18px;
height: 18px;
margin-left: 2px;
color: #fff;
opacity: 0.5;
background-color: rgba(189,17,32,0.7);
}
.slideShow .nav span.active{
opacity: 1;
}
</style>

我习惯竖着写样式，我看好多大神都横着写样式， 这个没比较过两者的优势劣势

 

需要注意的是 我这块为了方便调 直接写在head里面了  放到项目里当然还是需要link引入的

现在这个网页就长成图1那样了 不过 应该是停留在门牌号为1的那个帅哥那块而不是这个3号美女那块

那么问题来了 看黑板  下面就该进入正席了 这段js就是他的发动机 AV8D摇起来

$(document).ready(function(){

//$("body").css({"background","red"});  这段代码先测试一下js文件有没有正确的引入上 起没起效果

说一下思路  首先 你要做出 点击这个动作时候 他门牌号有个样式变化 其次 让他轮播动起来 再后来 让他自动轮播动起来

最后最后 给个悬停事件让他悬停的时候不要动 点穴手！这里有一个思维问题 当我们写好了点击事件之后，怎么让他自动的轮播呢，

那就是写一个周期函数 给条件之后 让他重复我们写好的点击事件  用到的trigger方法


var slideShow = $(".slideShow"),
ul = slideShow.find("ul"),
nav = slideShow.find(".nav span"),
oneWidth = ul.find("li").eq(0).width(),
iNow = 0,
timer = null;//这段代码是说 你得把要准备的东西定义出来 包括 这个大div你得有吧  然后找到图片 图片们的爸爸就是这个ul

 同理 下面的号码牌的爸爸就是nav咯 轮播过程中他移动的距离 就是ul下面的一个li的宽度

当然  表示宽度这需要带上()，为啥呢 因为我们要用到的是属性，  这个很关键 width()才是属性    而width是方法！！！


slideShow.hover(function(){
clearInterval(timer);
},autoPlay)

这个要最后做，相当于咱们做大餐时候的大火收汤 嘻嘻 就是个悬停上面的时候给他点穴 让他恢复平静 

鼠标撤走的时候让他接着运动起来


nav.on("click",function(){
var me = $(this),
index = me.index();
iNow =index;
nav.removeClass("active");
me.addClass("active");
ul.animate({
"left":-oneWidth * iNow
})
});

这个点击事件要开始做 为啥呢 因为它是这个事情最早行动的  

点击它的时候 让他们的门牌号有一个样式变化 就是透明度的改变 原来是暗的 点击之后让它亮起来


autoPlay();
function autoPlay(){
timer = setInterval(function(){
iNow++;
if(iNow>nav.length-1){
iNow = 0;
}
nav.eq(iNow).trigger("click");
},2000);
}
});

难点在这里，他是整个轮播图的发动机啊 设置一个周期函数， 当然里面得做个判定 让他跳到最后一张的时候回到第一张，

还要用trigger方法 重复写好的点击事件

好啦，简单的jQuery 轮播图教程就给大家分享到这  当然 别忘记引用jQuery.js  个人推荐 1.8.3版本的