滚轮事件
原生的js浏览器不兼容
不一样的浏览器会有不同滚动效果。加了插件效果一样。
所以用js的插件mousewheel
eq 等于
cursor poloter 变小手
因为动画不衔接
300ms动画延时
函数节流 短时间触发一次 滚轮划多次
200ms
幻灯片 轮播图
600是图片宽度
动态创建小圆点
（用代码动态生成）each循环
demo
<div id="index_main">
<div class="center_con">
<div class="slide fl">
<ul class="slide_pics">
<li><a href=""><img src="img/taqingcunlunbopic.jpg" alt="幻灯片" /></a></li>
<li><a href=""><img src="img/tianqiyubaolunbopic.jpg" alt="幻灯片" /></a></li>
</ul>
<div class="prev"></div>
<div class="next"></div>
<ul class="points">
</ul>
</div>
</div>
$(function(){
var $li = $('.slide_pics li');
var len = $li.length;//4张
var $prev = $('.prev');//左按钮
var $next = $('.next');//右按钮
var nextli = 0;//将要运动过来的li
var nowli = 0;//当前要离开的li
var timer = null;
//除第一个li，都定位到右侧
$li.not(':first').css({left:980});
//动态创建小圆点
$li.each(function(index){
//创建li
var $sli = $('<li></li>');
//第一个li添加选中样式
if(index == 0){
$sli.addClass('active');
}
//将小圆点的li添加到ul中
$sli.appendTo('.points');
})
$points = $('.points li');
// alert($points.length);//4个小圆点
//小圆点的点击事件
$points.click(function() {
nextli = $(this).index();
//当点击当前张的小圆点时，不做任何操作，防止跳变的Bug
if(nextli == nowli){
return;
}
move();
$(this).addClass('active').siblings().removeClass('active');
});
//左按钮的点击事件
$prev.click(function() {
nextli--;
move();
//改变圆点样式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
//右按钮的点击事件
$next.click(function() {
nextli++;
move();
//改变圆点样式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
});
//针对外层的slide做鼠标进入和离开事件，因为鼠标指针有可能进入到左右翻页和小圆点的范围
//mouseenter使鼠标进入子元素也能清除定时器
$('.slide').mouseenter(function() {
clearInterval(timer);
});
$('.slide').mouseleave(function() {
timer = setInterval(autoplay, 3000);
});
//定时器循环自动播放
timer = setInterval(autoplay, 3000);
//自动播放的逻辑与点击下一张是相同的
function autoplay(){
nextli++;
move();
//改变圆点样式
$points.eq(nextli).addClass('active').siblings().removeClass('active');
}
function move(){
//向右走到第一张，再继续走时
if(nextli < 0){
nextli = len - 1;//将要来的是最后一张
nowli = 0;//要离开的是第一张
$li.eq(nextli).css({left:-980});//把最后一张定位到左侧，准备进入
$li.eq(nowli).stop().animate({left: 980});//离开的第一张走到右侧
$li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
nowli = nextli;//要离开的赋值为刚进入的最后一张
return;//下边是正常情况的，不执行，直接返回
}
//向左走到最后一张，再继续走时
if(nextli > len - 1){
nextli = 0;//将要来的是第一张
nowli = len - 1;//要离开的是最后一张
$li.eq(nextli).css({left:980});//把第一张定位到右侧，准备进入
$li.eq(nowli).stop().animate({left: -980});//离开的最后一张走到左侧
$li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
nowli = nextli;//要离开的赋值为刚进入的第一张
return;//下边是正常情况的，不执行，直接返回
}
if(nextli > nowli){
//马上要进来的这张瞬间移动到右边
$li.eq(nextli).css({left:980});
//当前这张离开
$li.eq(nowli).stop().animate({left: -980});
}else{
//马上要进来的这张瞬间移动到左边
$li.eq(nextli).css({left:-980});
//当前这张离开
$li.eq(nowli).stop().animate({left: 980});
}
//马上要进来的这张走到0的位置
$li.eq(nextli).stop().animate({left: 0});
nowli = nextli;
}
})
