HTML：
解析：
一.样式要点
（1）父元素需要加上overflow:hidden;这样超出图片才能不显现
（2）父元素需要加上position:relative;图片列表加上position:absolute;让图片列表的定位基于父元素
（3）图片列表的z-index:1;箭头和按钮的z-index:2;这样箭头和按钮就会覆盖在图片列表上面
（4）箭头初始是不显示的，鼠标移进去，箭头才显示
`
/* 默认隐藏箭头 /
.arrow {display: none;}
/ 鼠标移入轮播组件时，显示箭头 */
container:hover .arrow { display: block;}
（5）鼠标移到箭头上透明度发生变化
.arrow { cursor: pointer; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}`
二．js分析
原理：
父元素设置overflow：hidden；让他超出部分隐藏，再通过设置图片列表的left值来显示对应位置的图片
无限滚动的技巧：滚动到最后1张图时，向后滚动，立马把图片列表拉回第一张图的位置，在第一张图往前滚，立马把图片列表拉回最后一张图的位置
1．封装函数
这样的话，
document.getElementById('container');
就可以写成$('container');
2.动态生成按钮圆点
3.左右箭头切换
思路：
1）向左，向右切换，每次的差值是一个图片的宽度，传参数为正负一个图片的宽度
功能相似，可以封装成一个函数
2.）问题是我们怎么才能判断我们当前的图片是第几张呢，我们可以设定指针为当前图片current=1,左击当current=1时current=slideNum;否则current-1; 右击当current=slideNum时current=1;
3.无限滚动效果
原理：每次点击都要做个判断，把它拉到正确位置。
切换图片函数
思路：1.图片切换，比如从第一张切换到第二张，要把left值变为-初始left值一张图片的宽度，
思路：2.图片切换方向分为向左和向右，方向不同符号相反,向右的话为负，向左的话为正;这样可以传入一个参数值
思路：3.向左，向右切换，每次的差值是一个图片的宽度，传参数为正负一个图片的宽度
思路：4.设定图片的列表的初始left值为0，而当图片在最后一张图片时向右切换，图片应该切换到第一张图片上，当图片在第一张图片时向左切换，图片应该切换到最后一张图片上，这是固定的，与传入的参数无关，我们可以写在图片切换函数里，图片切换看的是位置的变化，判断位置临界点0和-listimgwidth(slideNum-1)，newleft>0,处于第一张图上，newleft<-listimgwidth(slideNum-1),处于最后一张图上
4.按钮高亮函数
（1） 需要提前设置按钮第一个圆点初始高亮，当前图片序号对应的小圆点高亮
（2） 对应的按钮圆点高亮之前，我们需要把其他的按钮按钮圆点关掉
思路：通过一个for循环去查找lunbo_button下的按钮，将他的每一个元素class为空
5.按钮切换图片
思路：我们之前箭头切换图片是一张一张的切换的，每一张图片都比前一张图片的偏移量加了一张图片的宽度，
我们首先确定的是知道当前高亮的图片的指针，点击按钮切换图片时我们可以获取按钮的索引值，然后要计算偏移量（指针差*一张图片）
关键点：（1）获取按钮的索引值，切换图片之后不要忘了更新图片的当前指针
6.自动循环播放
每个3s切换一次：
可以设置个定时器，让它每隔3s运行下右箭头点击事件。
鼠标移到图片上，图片不再自动轮播。鼠标从图片上移除，图片继续自动轮播。
写两个函数，运行定时器和清除定时器。
当鼠标移到图片上，清除定时器。
定时器函数。鼠标从图片上移除，运行定时器函数。
拓展：
问：
这两个截图的代码有什么区别？
第一张图的代码，onmouseover跟onmouseout函数都可以执行（onmouseout函数是图片自动轮播，onmouseover是鼠标放上去之后停止轮播。）；
第二张图的代码，图片可以自动轮播，但是鼠标放上去之后，图片没有停止轮播。
autoplay（）跟autoplay有什么区别？
答：
1）如果直接autoplay (); 像下图
表示的是立即执行，不管你前面的条件有没有被触发。
2）但是如果写成 function () { autoplay ();}，
就表示，你前面的条件执行了， 就开始执行函数， 函数就是里面的autoplay ();
3） 只用autoplay，
类似指针，指向的是autoplay ();这个函数， 就是满足条件下会运行函数。
关键点：
把函数名写全了， 就变成了立即执行
条件式的， 前面都要加function(){你要加的函数}， 或者只写一个函数名， 后面不要括号（前提是， 你的函数里面没有参数）
讲到这里这个基本的轮播图就写得差不多了，如果想效果好一点，可以在轮播图的基础上加些效果。比如：淡入淡出效果，滑动动画效果，百叶窗效果，破碎玻璃等等.提示下：把这些效果做成函数，需要时直接调用函数会不会方便点…….
三.附录
附1(js代码）：
<script type="text/javascript">
//效果：左右图片切换，按钮高亮，点击按钮切换
window.onload = function () {
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
var container =$('container');
var list = $('list');
var listimg = $('list').getElementsByTagName('img');
var listimgwidth = listimg[0].offsetWidth;
var slideNum = listimg.length;
var prev = $('prev');
var next = $('next');
var current = 1; //当前图片指针（从1开始）
list.style.left=0;
//js动态添加按钮圆点
var dot=document.createElement("ul")
dot.setAttribute("id","lunbo_button");
dot.setAttribute("class","lunbo_button");
for(i=0;i<slideNum;i++){
var dotli=document.createElement("li");
//dotspan.innerText=i+1;//带数字的按钮
dot.appendChild(dotli);
}
container.appendChild(dot);
//图片高亮函数
var buttons= $('lunbo_button').getElementsByTagName('li');
buttons[0].className = 'on';
//小圆点高亮函数,需要注意的是我们需要先取消所有按钮的高亮，再让当前图片序号对应的小圆点高亮
function showButton() {
for (var i = 0; i < slideNum ; i++) {
buttons[i].className = '';
}
buttons[current-1].className = 'on';
}
//思路：向左，向右切换，每次的差值是一个图片的宽度，传参数为正负一个图片的宽度
prev.onclick=function(){
if(current==1){//重要重要！！！！！判断语句里的等于要写成==
current=slideNum;
}
else{
current-=1;
}
showButton();
switchpic(+parseInt(listimgwidth));
}
//向右切换
next.onclick=function(){
if(current==slideNum){
current=1;
}
else{
current+=1;
}
showButton();
switchpic(-parseInt(listimgwidth));
}
//切换图片函数
function switchpic(offset){
var newleft=parseInt(list.style.left)+offset;
list.style.left=newleft+"px";
if(newleft>0){
list.style.left=-listimgwidth*(slideNum-1)+"px";
}
else if(newleft<-listimgwidth*(slideNum-1)){
list.style.left=0;
}
}
//按钮切换代码
for(i=0;i<slideNum;i++){
buttons[i].index = i;
buttons[i].onclick=function(){
if(this.className == 'on'){//按下的按钮高亮，代码不继续运行
return;
}
var j = this.index;
switchpic(-(j+1-current)*listimgwidth);
current=j+1;
showButton();//图片切换之后调用小圆点高亮函数
}
};
//自动循环播放代码
timer=0;
function autoplay(){
clearInterval(timer);//开定时器前先清除定时器
timer=setInterval(function(){
next.onclick();
},3000)
}
function stopplay(){
clearInterval(timer);
}
autoplay();
container.onmouseover=stopplay;
container.onmouseout=autoplay;
}
</script>
附2(同一思路的jquery代码）：
<script type="text/javascript">
$(document).ready(function(){
var container =$(".container");
var list = $(".list");
var listimg = $(".list").find("img");
var listimgwidth = listimg.eq(0).width();//获取轮播图片的宽度
var slideNum = listimg.length;
var prev = $(".prev");
var next = $(".next");
var current = 1;
list.css("left",0);
//jquery动态添加按钮圆点
var ulstart = '<ul class="lunbo_button">',
ulcontent = '',
ulend = '</ul>';
for(i=0;i<slideNum;i++){
ulcontent += '<li>' + '</li>';
//ulcontent += '<li>' + (i+1) + '</li>';//带数字的按钮
}
container.append(ulstart+ulcontent+ulend);
//图片高亮函数
var buttons= $(".lunbo_button").find("li");
buttons.eq(0).attr("class", "on");
function showButton() {
buttons.eq(current-1).addClass("on")
.siblings().removeClass("on");
}
//向左
prev.on("click", function() {
if(current==1){
current=slideNum;
}
else{
current-=1;
}
showButton();
switchpic(+parseInt(listimgwidth));
});
//思路：向右切换
next.on("click", function() {
if(current==slideNum){
current=1;
}
else{
current+=1;
}
showButton();
switchpic(-parseInt(listimgwidth));
});
//切换图片函数
function switchpic(offset){
var newleft=parseInt(list.css("left"))+offset;
list.css("left",newleft);
if(newleft>0){
list.css("left",-listimgwidth*(slideNum-1));
}
else if(newleft<-listimgwidth*(slideNum-1)){
list.css("left",0);
}
}
//按钮切换代码
buttons.each(function () {
$(this).on("click", function() {
var j = $(this).index();
switchpic(-(j+1-current)*listimgwidth);
current=j+1;
showButton();//图片切换之后调用小圆点高亮函数
});
});
//自动循环播放代码
timer=0;
function autoplay(){
clearInterval(timer);//开定时器前先清除定时器
timer=setInterval(function(){
next.trigger('click');//！！！！！注意此处写法
},3000)
}
function stopplay(){
clearInterval(timer);
}
autoplay();
container.hover(stopplay, autoplay);
});
</script>
备注知识点：
1）获取或设置元素的宽度
Js
某个元素的宽度： obj.offsetWidth;
某个元素的高度： obj.offsetHeight;
但是要注意的是offsetWidth;取得值是width + padding+border
Jquery
获取或设置元素的宽度：$(obj).width();
获取或设置元素的高度：$(obj).height();
获取或设置元素的宽度：$(obj).innerWidth(); (width + padding)
获取或设置元素的高度：$(obj).innerHeight(); (height + padding)
获取或设置元素的宽度：$(obj).outerWidth(); (width + padding + border)
获取或设置元素的高度：$(obj).outerHeight(); (height + padding + border)
获取或设置元素的宽度：$(obj).outerWidth(true); (width + padding + border + margin)
获取或设置元素的高度：$(obj).outerHeight(true); (height + padding + border + margin)
注意：可获取和设置元素的宽度和高度。获取时，返回number类型；设置时，给方法传入数值类型的参数即可。具体用法：
$(element).width(); //获取元素宽度
$(element).width(200); //设置元素宽度
innerWidth()、innerHight()方法：只能获取，不能设置。
可获取第一个匹配元素的内部宽度和高度，例如获取元素内部宽度时，包括width+padding,不包括border。
outerWidth()、outerHight()方法：只能获取，不能设置。
可获取第一个匹配元素的外部宽度和高度，有两种情况: （用获取元素外部宽度来举例）
1、当方法内部不指定参数或者参数为false时，包括width+padding+margin;
2、当方法内部参数为true时，包括width+padding+border+margin；
css()方法：既可获取，也可设置。
可 以获取和设置元素的宽高（当然也可获取和设置其他css属性，这里只是为了与其他几种设置获取元素宽高的方法做对比），当获取元素的宽高时，返回一个单位 为px的string字符串；当设置元素宽高时，给css()方法传入对象，对象里面包含widthheight属性；具体用法：
$(element).css('width'); //获取元素宽度
$(element).css({'200px',height:'300px'});//设置元素的宽度和高度，也可以不要引号和单位
2）某个元素的上边界到body最顶部的距离
js
某个元素的上边界到body最顶部的距离： obj.offsetTop;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离： obj.offsetLeft;(在元素的包含元素不含滚动条的情况下)
jquery
3）scrollLeft，scrollTop，scrollWidth ，scrollHeight
scrollLeft //元素最左端到窗口最左端的距离
scrollTop //元素最顶端到窗口最顶端的距离
scrollWidth //元素的滚动宽度
scrollHeight //元素的滚动高度
本文为原创，如需转载请注明转载地址，谢谢合作！
本文地址：http://www.cnblogs.com/wanghuih/p/6365085.html