<Meta charset="utf-8">

图片的高和宽*/ height: 350px; border: 1px solid red; position: relative;/*以这一张图的边框为基准位置*/ overflow: hidden;/* 将超过这个长宽高的部分隐藏 */ } .wrap ul{ width: 2000px;/*列表的行是四张图片的宽度*/ position: absolute;/* 防止图片溢出 */ left: 0; top: 0; } .wrap ul li { float: left;/* 将四张图片紧挨着横着排列 */ width: 500px; } .wrap ol{ position: absolute; bottom: 10px; right:10px; } .wrap ol li{ float: left;/* 达到 横着排列 的目的*/ width: 16px; height: 16px; line-height: 16px; text-align: center;/* 字体在列元素中举重显示 */ color: #fff; background: #000; border: 1px solid yellow; margin-right: 3px;/* 列与列之间的距离 */ cursor: pointer; } .wrap ol li.current{ background: #fff; color:#000; } .wrap .introduce{ width:400px ; height: 30px; line-height: 30px; background: rgba(0,0.5); /* 达到透明显示的作用；或者用“opacity:0.5 ; filter: alpha(opacity = 50);” */ color: #fff; position: absolute; bottom: 0; left: 0; }

获取 行； var ali = $('.wrap ul li'); //获取 列； var numLi = $('.wrap ol li');//获取数字的 列； var aliWidth = $('.wrap ul li').eq(0).width(); //获取单张图片的宽度； var _now = 0;//这个控制数字样式的计数器 var _now2 = 0;//这个是控制图片运动距离的计数器 var timeId; //定时器的开关 var aimg = $('.wrap ul img');//获取wrap中img元素 var op = $('.wrap p') //获取wrap中p元素

numLi.click(function() { //鼠标点击触发的函数；
var index = $(this).index(); //如果点击第一张图片，index=0；
_now = index;
//不管_now还是_now2都要和点击时index同步；
_now2 = index;
var imgAlt = aimg.eq(_now).attr('alt');//获取 _now时刻的的alt值
op.html(imgAlt); //并将atl值显示

$(this).addClass('current').siblings().removeClass();
//数字样式 的 增和删；
oul.animate({'left':-aliWidthindex},500);
//图片的移动，行元素的左侧距离wrap的左侧-500index
});

function slider(){
if (_now==numLi.size()-1) { //当滚动到第四张图片的时候
ali.eq(0).css({ //通过定位的方法将第一张移到最后一张；
'position':'relative','left':oul.width()
});
_now=0;
}
else{
_now++; //如果没达到第四张，那就将_new+1；
}
_now2++; //图片控制计数器 +1；
numLi.eq(_now).addClass('current').siblings().removeClass(); //数字样式 的 增和删；
var imgAlt = aimg.eq(_now).attr('alt'); //获取 _now时刻的的alt值
op.html(imgAlt); //并将atl值显示
oul.animate({'left':-aliWidth_now2},500,function(){
//图片的移动，行元素的左侧距离wrap的左侧-500now2
if (_now==0) {
ali.eq(0).css('position','static');
oul.css('left',0);
_now2=0;
}
});
}

timeId = setInterval(slider,1500);
//每1500ms，自动切换图片
//鼠标点击图片则停止计时器，停止“自动切换图片”；离开则继续定时器切换图片
// $('.wrap').mouSEOver(function(event) {
// clearInterval(timeId);
// });

// $('.wrap').mouSEOver(function(event) {
// timeId = setInterval(slider,1500);
// });

$('.wrap').hover(function() {
clearInterval(timeId);

},function() {
timeId = setInterval(slider,1500);

});
});

获取 _now时刻的的alt值 op.html(imgAlt); //并将atl值显示

图片的移动，行元素的左侧距离wrap的左侧-500*index

图片运动距离的计数器

属性 oul.css('left',0);//当去完relative之后，要还原ul的“left”值为0； _now2=0;

图片的移动，行元素的左侧距离wrap的左侧-500*now2 //根据一组css执行属性动画 if (_now==0) { ali.eq(0).css('position',0); _now2=0; //当_now为0的时候，_now2也应该还原回去为0； } });