在HTMLDivElement上封裝方法createTurnPage()；功能;使得傳入的圖檔按照某一寬高空氣内輪播；
如arr=['img1.jpg','img2.jpg','img3.jpg','img4.jpg'];
div.createTurnPage(arr,700,300);可以讓arr裡的圖檔在width = 700 px ;height = 300 px的框裡輪播；
1.build.js --->在div内建立所需的完善的html結構：
function buildHtml(obj,targetWidth, targetHeight){
obj.className = 'wrapper';
obj.style.width = targetWidth + 'px';
obj.style.height = targetHeight + 'px';
var ul = document.createElement("ul");
obj.appendChild(ul);
ul.className = "sliderPage";
var len = arr.length;
for(var i = 0;i <= len; i++){
var li = document.createElement('li');
var img =document.createElement('img');
img.style.width = '100%';
img.style.height = '100%';
if(i == len){
img.src = arr[0];
}
else img.src= arr[i];
li.appendChild(img);
li.style.width = targetWidth + 'px';
li.style.height = targetHeight + 'px';
ul.appendChild(li);
ul.style.width = targetWidth * (len+1) + 'px';
ul.style.height = targetHeight + 'px';
}
var div1 = document.createElement('div');
div1.className = 'btn leftBtn';
obj.appendChild(div1);
div1.innerHTML='<';
var div2 = document.createElement('div');
div2.className='btn rightBtn';
obj.appendChild(div2);
div2.innerHTML='>';
var div3 = document.createElement('div');
div3.className = 'sliderIndex';
for(var i = 0;i < len; i++){
var span = document.createElement('span');
if(i == 0){
span.className = 'active';
}
div3.appendChild(span);
}
obj.appendChild(div3);
}
2.css樣式：
*{
padding:0px;
margin: 0px;
list-style: none;
}
.wrapper{
position:relative;
margin: 0px auto 0px;
overflow:hidden;
}
.wrapper .sliderPage{
position: absolute;
left: 0px;
top: 0px;
}
.wrapper .sliderPage li{
float: left;
}
.wrapper .btn{
position: absolute;
top: 50%;
margin-top: -20px;
color: #fff;
background-color:#000;
text-align: center;
line-height: 40px;
width: 40px;
height: 40px;
opacity: 0.1;
cursor: pointer;
}
.wrapper .btn:hover{
opacity: 0.5;
}
.wrapper .leftBtn{
left:15px;
}
.wrapper .rightBtn{
right: 15px;
}
.wrapper .sliderIndex{
position: absolute;
width:100%;
bottom: 15px;
text-align: center;
cursor: pointer;
}
.wrapper .sliderIndex span{
display: inline-block;
width: 12px;
height:12px;
background-color:#fff;
border-radius: 50%;
margin-right: 10px;
}
.wrapper .sliderIndex .active{
background-color:#f40;
}
3.封裝漸進移動方法：
//封裝獲得非行間樣式的屬性
function getStyle (obj, attr){//求得某對象中某屬性的值
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, false)[attr];
}
}
//封裝把某對象obj的屬性漸進為目标屬性(json裡)的方法
function startMove(obj, json, callback){
clearInterval(obj, obj.timer);
var isSpeed,sur
obj.timer=setInterval(function(){
var bStop = true;
for(var attr in json){ //周遊所有屬性
if(attr == 'opacity'){
sur = parseFloat(getStyle(obj, attr)) * 100;//得到目前的透明度并*100
}else{
sur = parseInt(getStyle(obj, attr));
}
isSpeed = (json[attr] - sur) / 7;
isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
if(attr == 'opacity'){
obj.style.opacity = (sur + isSpeed) / 100;//設定新的透明度
}else {
obj.style[attr] = sur + isSpeed + 'px';
}
if(Math.floor(Math.abs(json[attr]-sur))!=0){
bStop = false;
}
}
if(bStop){
clearInterval(obj.timer);
typeof callback == 'function' ? callback() : '';
}
},30)
}
4.輪播實作：
HTMLDivElement.prototype.createTurnPage = function(arr,targetWidth,targetHeight){
buildHtml(div ,targetWidth ,targetHeight);
var timer = null;
var sliderPage = document.getElementsByClassName('sliderPage')[0];
var moveWidth = sliderPage.children[0].offsetWidth;//每次需要移動的距離
var num = sliderPage.children.length-1;//圖檔種類數
var leftBtn = document.getElementsByClassName('leftBtn')[0];
var rightBtn = document.getElementsByClassName('rightBtn')[0];
var allSpan = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
var lock = true;
var index = 0;
leftBtn.onclick = function(){
autoMove ('right->left');
}
rightBtn.onclick = function(){
autoMove('left->right');
}
for(var i = 0;i < allSpan.length; i++){
(function(myIndex){
allSpan[i].onclick = function(){
if(lock){
lock = false;
clearTimeout(timer);
index = myIndex;
startMove(sliderPage, {left: - index * moveWidth},function(){
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
})
}
}
})(i)
}
function autoMove(directive){
if(lock){
lock = false;
clearTimeout(timer) ;
if(!directive || directive =='left->right'){
index ++;
startMove(sliderPage,{left:sliderPage.offsetLeft - moveWidth},function(){
if(sliderPage.offsetLeft == - num*moveWidth){//每播完整顯示最後一張圖，瞬間讓ul複位
sliderPage.style.left = '0px';
index = 0;
}
timer = setTimeout (autoMove,1500);
lock = true;
changeIndex(index);
});
}else if(directive == 'right->left'){
if(sliderPage.offsetLeft == 0){
sliderPage.style.left = - num * moveWidth + 'px';
index = num;
}
index --;
startMove(sliderPage, {left:sliderPage.offsetLeft + moveWidth},function(){
timer = setTimeout(autoMove,1500);
lock = true;
changeIndex(index);
})
}
}
}
function changeIndex(_index){
for(var i = 0; i < allSpan.length; i ++){
allSpan[i].className = '';
}
allSpan[_index].className = 'active';
}
timer = setTimeout(autoMove,1500);
}
5.html：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>輪播模型</title>
<link rel="stylesheet" href="index.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div></div>
<script src="./move.js"></script>
<script src="./build.js"></script>
<script src="./turnPage.js"></script>
<script>
div = document.getElementsByTagName('div')[0];
var arr=["images/img1.jpg","images/img2.jpg","images/img3.jpg","images/img4.jpg","./images/img2.jpg"];
div.createTurnPage(arr,700,300);
</script>
</body>
</html>
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)