首页>>Jquery图片>>jQuery图片自动滚动效果 带手动滚动按钮(2014-07-24)

jQuery图片自动滚动效果 带手动滚动按钮

jQuery图片自动滚动效果 带手动滚动按钮
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="indexmaindiv" id="indexmaindiv">  
  2.     <div class="indexmaindiv1 clearfix" >  
  3.         <div class="stylesgoleft" id="goleft"></div>  
  4.         <div class="maindiv1 " id="maindiv1">  
  5.         <ul id="count1">  
  6.             <li>  
  7.                 <div class="playerdetail">  
  8.                     <div class="detailimg"><img src="css/images/areabackground/1.jpg" /></div>  
  9.                     <div class="teanames">乐静老师1</div>  
  10.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  11.                     <a class="checkdetail" href="#"></a>  
  12.                 </div>  
  13.             </li>  
  14.             <li>  
  15.                 <div class="playerdetail">  
  16.                     <div class="detailimg"><img src="css/images/areabackground/2.jpg" /></div>  
  17.                     <div class="teanames">乐静老师2</div>  
  18.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  19.                     <a class="checkdetail" href="#"></a>  
  20.                 </div>  
  21.             </li>  
  22.             <li>  
  23.                 <div class="playerdetail">  
  24.                     <div class="detailimg"><img src="css/images/areabackground/3.jpg" /></div>  
  25.                     <div class="teanames">乐静老师3</div>  
  26.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  27.                     <a class="checkdetail" href="#"></a>  
  28.                 </div>  
  29.             </li>  
  30.             <li>  
  31.                 <div class="playerdetail">  
  32.                     <div class="detailimg"><img src="css/images/areabackground/4.jpg" /></div>  
  33.                     <div class="teanames">乐静老师4</div>  
  34.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  35.                     <a class="checkdetail" href="#"></a>  
  36.                 </div>  
  37.             </li>  
  38.             <li>  
  39.                 <div class="playerdetail">  
  40.                     <div class="detailimg"><img src="css/images/areabackground/5.jpg" /></div>  
  41.                     <div class="teanames">乐静老师5</div>  
  42.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  43.                     <a class="checkdetail" href="#"></a>  
  44.                 </div>  
  45.             </li>  
  46.             <li>  
  47.                 <div class="playerdetail">  
  48.                     <div class="detailimg"><img src="css/images/areabackground/6.jpg" /></div>  
  49.                     <div class="teanames">乐静老师6</div>  
  50.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  51.                     <a class="checkdetail" href="#"></a>  
  52.                 </div>  
  53.             </li>  
  54.             <li>  
  55.                 <div class="playerdetail">  
  56.                     <div class="detailimg"><img src="css/images/areabackground/7.jpg" /></div>  
  57.                     <div class="teanames">乐静老师7</div>  
  58.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  59.                     <a class="checkdetail" href="#"></a>  
  60.                 </div>  
  61.             </li>  
  62.             <li>  
  63.                 <div class="playerdetail">  
  64.                     <div class="detailimg"><img src="css/images/areabackground/8.jpg" /></div>  
  65.                     <div class="teanames">乐静老师8</div>  
  66.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  67.                     <a class="checkdetail" href="#"></a>  
  68.                 </div>  
  69.             </li>  
  70.             <li>  
  71.                 <div class="playerdetail">  
  72.                     <div class="detailimg"><img src="css/images/areabackground/1.jpg" /></div>  
  73.                     <div class="teanames">乐静老师9</div>  
  74.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  75.                     <a class="checkdetail" href="#"></a>  
  76.                 </div>  
  77.             </li>  
  78.             <li>  
  79.                 <div class="playerdetail">  
  80.                     <div class="detailimg"><img src="css/images/areabackground/2.jpg" /></div>  
  81.                     <div class="teanames">乐静老师10</div>  
  82.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  83.                     <a class="checkdetail" href="#"></a>  
  84.                 </div>  
  85.             </li>  
  86.             <li>  
  87.                 <div class="playerdetail">  
  88.                     <div class="detailimg"><img src="css/images/areabackground/3.jpg" /></div>  
  89.                     <div class="teanames">乐静老师11</div>  
  90.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  91.                     <a class="checkdetail" href="#"></a>  
  92.                 </div>  
  93.             </li>  
  94.             <li>  
  95.                 <div class="playerdetail">  
  96.                     <div class="detailimg"><img src="css/images/areabackground/4.jpg" /></div>  
  97.                     <div class="teanames">乐静老师12</div>  
  98.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  99.                     <a class="checkdetail" href="#"></a>  
  100.                 </div>  
  101.             </li>  
  102.             <li>  
  103.                 <div class="playerdetail">  
  104.                     <div class="detailimg"><img src="css/images/areabackground/5.jpg" /></div>  
  105.                     <div class="teanames">乐静老师13</div>  
  106.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  107.                     <a class="checkdetail" href="#"></a>  
  108.                 </div>  
  109.             </li>  
  110.             <li>  
  111.                 <div class="playerdetail">  
  112.                     <div class="detailimg"><img src="css/images/areabackground/6.jpg" /></div>  
  113.                     <div class="teanames">乐静老师14</div>  
  114.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  115.                     <a class="checkdetail" href="#"></a>  
  116.                 </div>  
  117.             </li>  
  118.             <li>  
  119.                 <div class="playerdetail">  
  120.                     <div class="detailimg"><img src="css/images/areabackground/7.jpg" /></div>  
  121.                     <div class="teanames">乐静老师15</div>  
  122.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  123.                     <a class="checkdetail" href="#"></a>  
  124.                 </div>  
  125.             </li>  
  126.             <li>  
  127.                 <div class="playerdetail">  
  128.                     <div class="detailimg"><img src="css/images/areabackground/8.jpg" /></div>  
  129.                     <div class="teanames">乐静老师16</div>  
  130.                     <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>  
  131.                     <a class="checkdetail" href="#"></a>  
  132.                 </div>  
  133.             </li>  
  134.         </ul>  
  135.         </div>  
  136.         <div class="stylesgoright" id="goright"></div>  
  137.     </div>  
  138. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. window.onload = function () {  
  3.     var oBtnLeft = document.getElementById("goleft");  
  4.     var oBtnRight = document.getElementById("goright");  
  5.     var oDiv = document.getElementById("indexmaindiv");  
  6.     var oDiv1 = document.getElementById("maindiv1");  
  7.     var oUl = oDiv.getElementsByTagName("ul")[0];  
  8.     var aLi = oUl.getElementsByTagName("li");  
  9.     var now = -5 * (aLi[0].offsetWidth + 13);  
  10.     oUl.style.width = aLi.length * (aLi[0].offsetWidth + 13) + 'px';  
  11.     oBtnRight.onclick = function () {  
  12.         var n = Math.floor((aLi.length * (aLi[0].offsetWidth + 13) + oUl.offsetLeft) / aLi[0].offsetWidth);  
  13.   
  14.         if (n <= 5) {  
  15.             move(oUl, 'left', 0);  
  16.         }  
  17.         else {  
  18.             move(oUl, 'left', oUl.offsetLeft + now);  
  19.         }  
  20.     }  
  21.     oBtnLeft.onclick = function () {  
  22.         var now1 = -Math.floor((aLi.length / 5)) * 5 * (aLi[0].offsetWidth + 13);  
  23.   
  24.         if (oUl.offsetLeft >= 0) {  
  25.             move(oUl, 'left', now1);  
  26.         }  
  27.         else {  
  28.             move(oUl, 'left', oUl.offsetLeft - now);  
  29.         }  
  30.     }  
  31.     var timer = setInterval(oBtnRight.onclick, 5000);  
  32.     oDiv.onmouseover = function () {  
  33.         clearInterval(timer);  
  34.     }  
  35.     oDiv.onmouseout = function () {  
  36.         timer = setInterval(oBtnRight.onclick, 5000);  
  37.     }  
  38.   
  39. };  
  40.   
  41. function getStyle(obj, name) {  
  42.     if (obj.currentStyle) {  
  43.         return obj.currentStyle[name];  
  44.     }  
  45.     else {  
  46.         return getComputedStyle(obj, false)[name];  
  47.     }  
  48. }  
  49.   
  50. function move(obj, attr, iTarget) {  
  51.     clearInterval(obj.timer)  
  52.     obj.timer = setInterval(function () {  
  53.         var cur = 0;  
  54.         if (attr == 'opacity') {  
  55.             cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);  
  56.         }  
  57.         else {  
  58.             cur = parseInt(getStyle(obj, attr));  
  59.         }  
  60.         var speed = (iTarget - cur) / 6;  
  61.         speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
  62.         if (iTarget == cur) {  
  63.             clearInterval(obj.timer);  
  64.         }  
  65.         else if (attr == 'opacity') {  
  66.             obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';  
  67.             obj.style.opacity = (cur + speed) / 100;  
  68.         }  
  69.         else {  
  70.             obj.style[attr] = cur + speed + 'px';  
  71.         }  
  72.     }, 30);  
  73. }    
  74. </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_386.html