<div class="banner"><div class="banner_reel"><ul><li><img></li><li><img></li></ul></div></div>
$(function(){
var nums=$(".banner_reel ul li").length //这里获取图片数量
$(".banner").append( //动态添加图片的索引显示
"<div class='banner_num'></div>"
)
for(i=1 i<=nums i++){
var htmls="<span rel='"+i+"'>"+i+"</span>"
$(".banner .banner_num").append(htmls) //这里把1 2 3 这些加进去
}
$(".banner .banner_num").show()
$(".banner .banner_num span:first").addClass("hover") // 给第一个加上一个当前样式
var sliderWidth = $(".banner .banner_reel").width() //获取单个图片宽度
var sliderSum = nums
var sliderReelWidth = sliderWidth * sliderSum // 获取总宽度
$(".banner_reel ul").css({'width' : sliderReelWidth})//给ul加上宽度 让所有图片在一行
//滑动函数
rotate = function(){
var triggerID = $active.attr("rel") - 1
var slider_reelPosition = triggerID * sliderWidth //获取滑动量
$(".banner .banner_num span").removeClass('hover')
$active.addClass('hover')
//Slider Animation
$(".banner .banner_reel ul").animate({
left: -slider_reelPosition //滑动动画
}, 500 )
}
//定时函数
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.banner .banner_num span.hover').next() //设置下一个图片的索引
if ( $active.length === 0) {
$active = $('.banner .banner_num span:first') //默认为第一个
}
rotate() //触发动画
}, 5000) //每隔5秒触发
}
rotateSwitch()
//当鼠标放在图片上面时停止滑动
$(".banner .banner_reel ul").hover(function() {
clearInterval(play)
}, function() {
rotateSwitch()
})
//当鼠标点击图片索引时
$(".banner_num span").click(function() {
$active = $(this)
clearInterval(play)
rotate()
rotateSwitch()
return false
})
})
//这个参考一下就行了 很久以前的了 有些地方不够优化
