代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin:0 auto;padding: 0;}
#LB_div{overflow:hidden;position: relative;}
#LB_span{background: #000;display: block;position: absolute;}
#LB_span img{float: left;}
#LB_zuo,#LB_you:hover{cursor:none;}
#LB_ul{list-style: none;display: block;position:absolute;left: 50%; top: 80%;transform: translate(-50%,0);}
/*#LB_ul li{float:left;text-align: center;background: gold;border-radius:50%;width: 20px;height: 20px;}*//*这行是小圆点的代码*/
#LB_ul li{background: transparent;display: inline-block;padding-top:4px;box-sizing:border-box}/*这行是小图片的代码*/
#LB_ul li+li{margin-left: 8px;}
#LB_ul li:hover{cursor:pointer;background: goldenrod;}
#LB_zuo{position: absolute; background: #fff;width: 10%; height: 100%;left:0;opacity: 0;}
#LB_you{position: absolute; background: #fff;width: 10%; height: 100%;right:0;opacity: 0;}
#LB_left,#LB_right{position: absolute;width: 50px;display: none;}
#LB_left,#LB_right:hover{cursor:none;}
</style>
</head>
<body>
<div id="LB_div">
<span id="LB_span">
<img src="img/IMG_20160421_205146.jpg"/>
<img src="img/IMG_20160421_205146.jpg"/>
<img src="img/IMG_20160421_205146.jpg"/>
<img src="img/IMG_20160421_205146.jpg"/>
<img src="img/IMG_20160421_205146.jpg"/>
<img src="img/IMG_20160421_205146.jpg"/>
<img src="img/IMG_20160421_205146.jpg"/>
<img src="img/IMG_20160421_205146.jpg"/>
<img src="img/IMG_20160421_205146.jpg"/>
</span>
<p id="LB_zuo"></p>
<p id="LB_you"></p>
<img src="img/Cristal_Intense_072.png" id="LB_left"/>
<img src="img/Cristal_Intense_069.png" id="LB_right"/>
<ul id="LB_ul"></ul>
</div> <script type="text/javascript" src="js/Xing_js.js" ></script>
<script>
var arr=document.querySelectorAll("#LB_span img");
var div=document.querySelector("#LB_div");
var span=document.querySelector("#LB_span");
var zuo=document.querySelector("#LB_zuo");
var you=document.querySelector("#LB_you");
var ul=document.querySelector("#LB_ul");
var jiantou_L=document.querySelector("#LB_left")
var jiantou_r=document.querySelector("#LB_right") var b=0; if(arr.length!=0){//判断有没有图 //根据所有图片长度设置span的长度
span.style.width=(arr.length*arr[0].width)+"px";
span.style.left="0px";
span.style.transition="0.5s"; //根据图片设置div的长宽
div.style.width=arr[0].width+"px";
div.style.height=arr[0].height+"px"; // console.log(arr[0].width);
//根据图片数量设置小圆点
for(var i=1;i<=arr.length;i++){
var li=document.createElement("li"); var img=document.createElement("img");//中间这段是小图片的代码
img.src=arr[i-1].src;
img.setAttribute("style","width: "+parseInt(arr[0].width)*0.1+"px;height"+parseInt(arr[0].height)*0.1+"px;display: inline-block;")
li.appendChild(img); li.setAttribute("onClick","yuan("+i+")");
ul.appendChild(li);
} //根据每个li的margin-left来设置ul的宽度
var li_arr=document.querySelectorAll("li");
for(var x=0;x<li_arr.length;x++){
b+=parseInt(Xing_getCSS(li_arr[x],"marginLeft"));
ul.style.width=parseInt(arr[0].width)*0.1*(arr.length)+b+"px";
} //正span移动
var i=0;
function zheng(){
i++;
if(i==arr.length){i=0;};
span.style.left="-"+arr[0].width*i+"px";
biao(i);
return i;
} //负span移动
function fu(b){
b--;
if(b==-1){b=arr.length-1;}
span.style.left="-"+arr[0].width*b+"px";
biao(b);
return b;
} //小圆点被单击
function yuan(m){
i=m-2;
zheng();
} //小圆点标亮
function biao(d){
var li=ul.childNodes;
for(var x=0;x<arr.length;x++){
if(x==d){
li[x].style.background=Xing_RandomColor();
}else{
li[x].style.background="transparent"
}
} } //两键被单击时
you.onclick=function(){
i=zheng();
}
zuo.onclick=function(){
i=fu(i);
} zuo.onmouseover=function(){//左右两边的白边和指针跟随
this.style.opacity="0.4";
this.onmousemove=function(e){
var x=e.layerX;
var y=e.layerY;
jiantou_L.style.display="block"
jiantou_L.style.left=x+5+"px";
jiantou_L.style.top=y+5+"px";
}
this.onmouseout=function(){
jiantou_L.style.display="none"
this.style.opacity="0";
}
} you.onmouseover=function(){
this.style.opacity="0.4";
this.onmousemove=function(e){
var x=e.layerX;
var y=e.layerY;
jiantou_r.style.display="block"
jiantou_r.style.left=x+5+"px";
jiantou_r.style.top=y+5+"px";
}
this.onmouseout=function(){
jiantou_r.style.display="none"
this.style.opacity="0";
}
} //定时器
var ding=setInterval("zheng(true)",1000);
div.onmouseover=function(){//鼠标hover停止
clearInterval(ding);
div.onmouseout=function(){//鼠标移除
ding=setInterval("zheng(true)",1000);
}
} }else{
div.setAttribute("style","border: 1px solid #000;width:300px;height:300px;text-align: center;")
div.innerHTML="请放入轮播图图片";
} </script>
</body>
</html>
自封装js：
//获取id---------------------------------------------------------
function Xing_id(x){
return document.getElementById(x);
} //刷新页面---------------------------------------------------------
function Xing_ShuaXinYeMian(){
location.reload();
} //选取class，注意返回数组---------------------------------------------------------
function Xing_Class(x){
return document.getElementsByClassName(x); } //封装随机颜色-------------------------------------------------------
function Xing_RandomColor(){
var sum="";
var shuzu2=['a','b','c','d','e','f','0','1','2','3','4','5','6','7','8','9'];
for(var i=1;i<=3;i++){
var int2=parseInt(Math.random()*shuzu2.length);
sum+=shuzu2[int2];
}
var sum2="#"+sum;
sum="";
return sum2; //返回随机的三位16进制rgb颜色
} //随机验证码---------------------------------------------------------
function Xing_RandomYanZhengMa(n){ //传入:要返回几个验证码数
var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
var tmp = '';
for(var i=0;i<n;i++)
tmp += str.charAt(Math.round(Math.random()*str.length));
return tmp; //返回数组
} //封装选择质数的选择器---------------------------------------------------------
function Xing_ZhiShuXuanZe(arguments){//传入数组，一个或多个
var hehe=[];
for(var i=0;i<arguments.length;i++){
if(arguments[i]%2!=0&&arguments[i]%3!=0&&arguments[i]%5!=0&&arguments[i]!=1||arguments[i]==3||arguments[i]==2||arguments[i]==5&&arguments[i]!=0){
hehe.push(arguments[i]);
}
}
return hehe //返回所有质数的数组
} //找字符串中倒数第n次出现的字符---------------------------------------------------
function Xing_lastStr(char,y,str,b){//char:要找的字符，y:倒数第几位,//str:字符串
var b=0;
if(b==true){
for(var i=str.length-1;i>=0;i--){
if(str[i]==char){
b++;
if(b==y){
return i;//返回其下标
}
}
}
}else{
for(var i=0;i<str.length;i++){
if(str[i]==char){
b++;
if(b==y){
alert("正")
return i;//返回其下标
}
}
}
}
} //获取外部或头部css样式----------------------------------------------------
function Xing_getCSS(BQ,gao){//BQ:传入的标签 gao:要找的样式
return window.getComputedStyle(BQ)[gao]; //返回该样式的值
}
描述：可以根据放入的图片大小自动适应大小，轮播图下方会有小缩略图