純javaScript、jQuery實現(xiàn)個性化圖片輪播【推薦】

更新時間：2017年01月08日 16:06:27 作者：Avenstar

本文主要介紹了純javaScript、jQuery實現(xiàn)個性化圖片輪播的方法，并在文章結(jié)尾附上源碼下載。具有很好的參考價值，下面跟著小編一起來看下吧

純javaScript實現(xiàn)個性化圖片輪播

輪播原理說明<如上圖所示>：

1. 畫布部分（可視區(qū)域）屬性說明：overflow:hidden使得超出畫布部分隱藏或說不可見。position:relative 會導致自身位置的相對變化，而不會影響其他元素的位置、大小的變化。使得使用了position：absolute 元素相對于畫布位置進行定位；

absolute元素脫離了文檔結(jié)構(gòu)，產(chǎn)生破壞性，導致父元素坍塌，float元素也會脫離文檔結(jié)構(gòu)，absolute元素會懸浮在頁面上方，遮擋其他部分顯示，這點和PhotoShop圖層相似，所以要使用z-index控制出現(xiàn)順序

2.輪播注意點：左右無限滾動

prev-button 第一張圖片的前一張是最后一張圖片，

next-button 最后一張圖片的下一張圖片是第一張，

prev-button、next-button位置的偏移是通過設置prev-img-container、next-img-container的left<相對于畫布>屬性值

click-select-show-button區(qū)域，點擊該區(qū)域小圓圈是通過上一次圖片的所在index，當前點擊myIndex, 計算公式：（myIndex-index）*(-圖片的寬度width)

3.動畫過渡注意點：點擊prev-button、next-button、click-select-show-button小圓圈，判定當前是否處于動畫狀態(tài)中

4.定時器setTimeout()、clearTimeout

<實現(xiàn)效果圖>

Css樣式

/**CSS-style**/
/**畫布大小*/
#container { 
 margin:0 auto;
 width: 600px;
 height: 400px;
 overflow: hidden;/*超出畫布部分隱藏*/
 position: relative;/*相對定位*/
 cursor: pointer;
}
/**圖片容器*/
#list { 
 width: 4200px;
 height: 400px; 
 position: absolute; 
 z-index:1;
}
#list img { float: left; }
/**輪播選中按鈕樣式*/
#button { 
 position: absolute; 
 bottom: 25px; 
 left: 175px; 
 width: 250px; 
 z-index: 2; 
}
#button ul li {
 list-style: none;
 width: 15px;
 border-radius: 50%;
 padding: 7.5px;
 height: 15px;
 margin-right: 10px;
 background: green;
 float: left;
 font:15px/15px "microsoft yahei"; 
 text-align: center;
 font-weight: bold;
 color: white;
 cursor: pointer;
}
#button ul li.chos {
 background: orange;
}
#container:hover .arrow{
 display: block;
}
#pre {
 left: 20px;
}
#next {
 right: 20px;
}
/**pre next定位*/
.arrow {
 position: absolute;
 width: 40px;
 height: 40px;
 background: black;
 z-index: 3;
 top: 180px;
 text-decoration: none;
 text-align: center;
 line-height: 40px;
 font-size: 40px;
 color: white;
 opacity: 0.3;
 filter: alpha(opacity=0.3);
 display: none;
}
/**pre next按鈕透明度*/
#container a:hover {
 opacity: 0.7;
 filter: alpha(opacity=0.7);
}

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>純javaScript實現(xiàn)個性化圖片輪播</title>
 <link rel="stylesheet" type="text/css" href="styles/main.css">
 <script type="text/javascript" src="scripts/scroImg.js"></script>
</head>
<body>
 <div id="container">
 <div id="list" style="left:-600px">
  <img src="images/5.jpg">
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  <img src="images/1.jpg">
 </div>
 <div id="button">
  <ul>
  <li index='1'>1</li>
  <li index='2'>2</li>
  <li index='3'>3</li>
  <li index='4'>4</li>
  <li index='5'>5</li>
  </ul>
 </div>
 <a href="#" class="arrow" id="prev"><</a>
 <a href="#" class="arrow" id="next">></a>
 </div>
</body>
</html>

一、javaScript實現(xiàn)圖片輪播

window.onload=function(){
 var container=document.getElementById('container');
 var list=document.getElementById('list');
 var buttons=document.getElementById('button').getElementsByTagName('li');
 var prev=document.getElementById('prev');
 var next=document.getElementById('next');
 var index=1;
 var interval=1000;
 var timer=null;
 var animated=false;
 //next
 next.onclick=function(){
 if (!animated) {
  animate(-600);
 };
 index+=1;
 if (index>5) {
  index=1;
 };
 showButton();
 console.info('next'+index);
 }
 //prev
 prev.onclick=function(){
 if(!animated){
  animate(600);
 }
 index-=1;
 if(index<1){
  index=5;
 }
 showButton();
 console.info('prev'+index);
 }
 //animate
 function animate(offset){
 animated=true;
 var left=parseInt(list.style.left)+offset;
 var animateTime=600;//位移總時間
 var interval=10;//時間間隔
 var speed=offset/(animateTime/interval);//每次位移量
 var go=function(){//animate內(nèi)部函數(shù)
  if ((speed<0 && parseInt(list.style.left)>left) || (speed>0 && parseInt(list.style.left)<left)) {//是否位移
  list.style.left=parseInt(list.style.left)+speed+'px';
  setTimeout(go,interval)
  }else{
  list.style.left=left+'px';
  if (left<-3000) { //最后一張后面
   list.style.left=-600+'px'; //顯示前一張
  };
  if(left>-600){//第一張最前面
   list.style.left=-3000+'px';//顯示最后一張
  }
  animated=false;
  };
 }
 go(); 
 }
 //chos
 function showButton(){
 for (var i = 0; i < buttons.length; i++) {
  buttons[i].className='';
 };
 buttons[index-1].className='chos';
 }
 //buttons-click
 for (var i = 0; i < buttons.length; i++) {
 buttons[i].onclick=function(){
  if(this.className=='chos'){
  return;
  }
  var myIndex=parseInt(this.getAttribute('index'));
  var offset=(myIndex-index)*-600; //偏移量
  animate(offset);
  index=myIndex;//set Index
  showButton();
 }
 };
 function play(){
 timer=setTimeout(function(){
  next.click();
  play();
 },interval)
 }
 function stop(){
 clearInterval(timer);
 }
 play();
 container.onmouseover=function(){
 stop();
 }
 container.onmouseout=function(){
 play();
 }
}

二、jQuery實現(xiàn)圖片輪播

$(function () {
 var container = $('#container');
 var list = $('#list');
 var buttons = $('#container').find('li');
 var prev = $('#pre');
 var next = $('#next');
 var index = 1;
 var len = 5;
 var interval = 3000;
 var timer;
 function animate (offset) {
  var left = parseInt(list.css('left')) + offset;
  if (offset>0) {
  offset = '+=' + offset;
  }
  else {
  offset = '-=' + Math.abs(offset);
  }
  list.animate({'left': offset}, 300, function () {
  if(left > -200){
   list.css('left', -600 * len);
  }
  if(left < (-600 * len)) {
   list.css('left', -600);
  }
  });
 }
 function showButton() {
  buttons.eq(index-1).addClass('chos').siblings().removeClass('chos');
 }
 function play() {
  timer = setTimeout(function () {
  next.trigger('click');
  play();
  }, interval);
 }
 function stop() {
  clearTimeout(timer);
 }
 next.bind('click', function () {
  if (list.is(':animated')) {
  return;
  }
  if (index == 5) {
  index = 1;
  }
  else {
  index += 1;
  }
  animate(-600);
  showButton();
 });
 prev.bind('click', function () {
  if (list.is(':animated')) {
  return;
  }
  if (index == 1) {
  index = 5;
  }
  else {
  index -= 1;
  }
  animate(600);
  showButton();
 });
 buttons.each(function () {
  $(this).bind('click', function () {
   if (list.is(':animated') || $(this).attr('class')=='chos') {
   return;
   }
   var myIndex = parseInt($(this).attr('index'));
   var offset = -600 * (myIndex - index);
   animate(offset);
   index = myIndex;
   showButton();
  })
 });
 container.hover(stop, play);
 play();
});

源碼下載 http://pan.baidu.com/s/1kVfnGF1

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: