妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 745|回复: 3

[求助] 幻灯片,左右的按钮怎么和下面的数字对应上啊。

[复制链接]
明哲 发表于 2016-5-30 18:45:22 | 显示全部楼层 |阅读模式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jsGo.js"></script>
<style>
*{padding:0px;margin:0px;}
#p-box{width:520px;height:280px;margin:100px auto;position:relative;border:1px solid red;overflow:hidden;}
#p-box ul{position:absolute;left:0px;top:0px;}
#p-box ul li{float:right;list-style:none;}
#p-box p{margin:0 auto;position:absolute;bottom:4px;left:0px;width:100%;text-align:center;z-index:2;}
img{display:block;}
#p-box p span{border-radius:50%;padding:4px 8px;cursor:pointer;color:#f60;background:#ccc;margin-right:4px;}
#p-box p span.active{background:#F90;color:white}
#p-box a{display:block;position:absolute;opacity:0.5;filter:alpha(opacity:50);width:50px;top:0;font-size:50px;color:red;text-align:center;height:50px;top:10%;background:#ccc;top:115px;display:none;}
#p-box a.l{left:0}
#p-box a.r{right:0}
a{text-decoration:none;}
</style>
</head>

<body>
<div id="p-box">
        <ul>
      <li><img src="img/p1.jpg"></li>
      <li><img src="img/p2.jpg"></li>
      <li><img src="img/p3.jpg"></li>
      <li><img src="img/p4.jpg"></li>
      <li><img src="img/p5.jpg"></li>
    </ul>
    <p>
       <span class="active">1</span>
       <span>2</span>
       <span>3</span>
       <span>4</span>
       <span>5</span>
    </p>
    <a href="javascript:;" class="l"><</a>
    <a href="javascript:;" class="r">></a>
</div>
<script>
window.onload=function(){
        var oBox=document.getElementById("p-box");
        var oUl=oBox.getElementsByTagName("ul")[0];
        var aLi=oUl.getElementsByTagName("li");
        var oP=oBox.getElementsByTagName("p")[0];
        var aSpan=oP.getElementsByTagName("span");
        var iLen=aLi.length;
        var iWidth=aLi[0].offsetWidth;
        var aA=oBox.getElementsByTagName("a");
        var num=0;
        oUl.style.width=aLi[0].offsetWidth*iLen+'px';
        for(var i=0;i<aSpan.length;i++){
                aSpan[i].index=i;
                aSpan[i].onclick=function(){
                        for(var i=0;i<aSpan.length;i++){
                                aSpan[i].className='';
                        }
                        this.className='active';
                        move(oUl,{left:-this.index*iWidth})
                }
               
               
               
        }
        oBox.onmouseover=function(){
                aA[0].style.display='block';
                aA[1].style.display='block';
        }
        oBox.onmouseout=function(){
                aA[0].style.display='none';
                aA[1].style.display='none';
        }
       
}
</script>
</body>
</html>




function getStyle(obj,attr){
        if(obj.currentStyle){
                return obj.currentStyle[attr]
        }else{
                return getComputedStyle(obj,false)[attr]
        }
}
function move(obj,json,fn){
        var bStop=true;
        clearInterval(obj.timer)
        obj.timer=setInterval(function(){
                for(var attr in json){
                        var cur=0;
                        if(attr=='opacity'){
                                cur=Math.round(parseFloat(getStyle(obj,attr))*100);
                        }else{
                                cur=parseInt(getStyle(obj,attr));
                        }
                        var speed=(json[attr]-cur)/6;
                        speed=speed>0?Math.ceil(speed):Math.floor(speed);
                        if(cur!=json[attr]){
                                bStop=false;
                                if(attr=='opacity'){
                                        obj.style.filter='alpha(opacity:'+(cur+speed)+')'
                                        obj.style.opacity=(cur+speed)/100;
                                }else{
                                        obj.style[attr]=cur+speed+'px';
                                }
                        }
                }
                if(bStop){
                        clearInterval(obj.timer)
                        if(fn){
                                fn();
                        }
                }
        },30)
}
回复

使用道具 举报

 楼主| 明哲 发表于 2016-6-1 12:38:20 | 显示全部楼层
不能沉了,呵呵。
回复 支持 反对

使用道具 举报

motao 发表于 2016-6-1 17:57:19 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script src="jsGo.js"></script>
  7. <style>
  8. *{padding:0px;margin:0px;}
  9. #p-box{width:520px;height:280px;margin:100px auto;position:relative;border:1px solid red;overflow:hidden;}
  10. #p-box ul{position:absolute;left:0px;top:0px;}
  11. #p-box ul li{float:right;list-style:none;}
  12. #p-box p{margin:0 auto;position:absolute;bottom:4px;left:0px;width:100%;text-align:center;z-index:2;}
  13. img{display:block;}
  14. #p-box p span{border-radius:50%;padding:4px 8px;cursor:pointer;color:#f60;background:#ccc;margin-right:4px;}
  15. #p-box p span.active{background:#F90;color:white}
  16. #p-box a{display:block;position:absolute;opacity:0.5;filter:alpha(opacity:50);width:50px;top:0;font-size:50px;color:red;text-align:center;height:50px;top:10%;background:#ccc;top:115px;display:none;}
  17. #p-box a.l{left:0}
  18. #p-box a.r{right:0}
  19. a{text-decoration:none;}
  20. </style>
  21. </head>

  22. <body>
  23. <div id="p-box">
  24.         <ul>
  25.       <li><img src="img/p1.jpg"></li>
  26.       <li><img src="img/p2.jpg"></li>
  27.       <li><img src="img/p3.jpg"></li>
  28.       <li><img src="img/p4.jpg"></li>
  29.       <li><img src="img/p5.jpg"></li>
  30.     </ul>
  31.     <p>
  32.        <span class="active">1</span>
  33.        <span>2</span>
  34.        <span>3</span>
  35.        <span>4</span>
  36.        <span>5</span>
  37.     </p>
  38.     <a href="javascript:;" class="l"><</a>
  39.     <a href="javascript:;" class="r">></a>
  40. </div>
  41. <script>
  42. function getStyle(obj,attr){
  43.         if(obj.currentStyle){
  44.                 return obj.currentStyle[attr]
  45.         }else{
  46.                 return getComputedStyle(obj,false)[attr]
  47.         }
  48. }
  49. function move(obj,json,fn){
  50.         var bStop=true;
  51.         clearInterval(obj.timer)
  52.         obj.timer=setInterval(function(){
  53.                 for(var attr in json){
  54.                         var cur=0;
  55.                         if(attr=='opacity'){
  56.                                 cur=Math.round(parseFloat(getStyle(obj,attr))*100);
  57.                         }else{
  58.                                 cur=parseInt(getStyle(obj,attr));
  59.                         }
  60.                         var speed=(json[attr]-cur)/6;
  61.                         speed=speed>0?Math.ceil(speed):Math.floor(speed);
  62.                         if(cur!=json[attr]){
  63.                                 bStop=false;
  64.                                 if(attr=='opacity'){
  65.                                         obj.style.filter='alpha(opacity:'+(cur+speed)+')'
  66.                                         obj.style.opacity=(cur+speed)/100;
  67.                                 }else{
  68.                                         obj.style[attr]=cur+speed+'px';
  69.                                 }
  70.                         }
  71.                 }
  72.                 if(bStop){
  73.                         clearInterval(obj.timer)
  74.                         if(fn){
  75.                                 fn();
  76.                         }
  77.                 }
  78.         },30)
  79. }
  80. </script>
  81. <script>
  82. window.onload=function(){
  83.         var oBox=document.getElementById("p-box");
  84.         var oUl=oBox.getElementsByTagName("ul")[0];
  85.         var aLi=oUl.getElementsByTagName("li");
  86.         var oP=oBox.getElementsByTagName("p")[0];
  87.         var aSpan=oP.getElementsByTagName("span");
  88.         var iLen=aLi.length;
  89.         var iWidth=aLi[0].offsetWidth;
  90.         var aA=oBox.getElementsByTagName("a");
  91.         var num=0;
  92.         oUl.style.width=aLi[0].offsetWidth*iLen+'px';
  93.         for(var i=0;i<aSpan.length;i++){
  94.                 aSpan[i].index=i;
  95.                 aSpan[i].onclick=function(){
  96.                         for(var i=0;i<aSpan.length;i++){
  97.                                 aSpan[i].className='';
  98.                         }
  99.                         this.className='active';
  100.                         move(oUl,{left:-this.index*iWidth});
  101.                                                 num = this.index; //在这操作 num同步
  102.                 }
  103.         }
  104.                 aA[0].onclick = function () {
  105.                                 //操作 num变换  改变图片位置
  106.                 };
  107.                 aA[1].onclick = function () {
  108.                         //操作 num变换  改变图片位置
  109.                 };
  110.         oBox.onmouseover=function(){
  111.                 aA[0].style.display='block';
  112.                 aA[1].style.display='block';
  113.         }
  114.         oBox.onmouseout=function(){
  115.                 aA[0].style.display='none';
  116.                 aA[1].style.display='none';
  117.         }
  118.         
  119. }
  120. </script>
  121. </body>
  122. </html>
复制代码
回复 支持 反对

使用道具 举报

 楼主| 明哲 发表于 2016-6-6 20:32:17 | 显示全部楼层
一语惊醒我梦中人,哈哈。谢谢。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 15:57 , Processed in 0.129062 second(s), 21 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表