zoukankan      html  css  js  c++  java
  • 淘宝轮播图带前后按钮

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0 ;padding:0;}
    #div1{width:520px; height:280px; position:relative; overflow:hidden;  margin:50px auto;}
    #ul1{position:absolute; left:0; top:0; }
    #ul1 li{float:left; list-style:none; width:520px; height:280px;}
    #span1{z-index:3;position:absolute; text-align:center;}
    #span1 span{display:block; width:20px; height:20px;background:blue; color:white; margin:6px;}
    </style>
    </head>
    
    <body>
    <div id="div1">
      <ul id="ul1">
        <li><img src="1.jpg" /></li> 
        <li><img src="2.jpg" /></li> 
        <li><img src="3.jpg" /></li> 
        <li><img src="4.jpg" /></li> 
       </ul>
       <div id="span1">
       <span>1</span>
       <span>2</span>
       <span>3</span>
       <span>4</span>
       </div>
    </div>
    <span  id="prev">上张</span>
    <span  id="next">下账</span>
    <script>
    window.onload=function(){
        var oPrev=document.getElementById('prev');
        var oNext=document.getElementById('next');
        var oUl=document.getElementById('ul1');
        var oDiv=document.getElementById('div1');
        var oSpanBox=document.getElementById('span1');
        var oSpan=oSpanBox.getElementsByTagName('span');
        var oLi=oUl.getElementsByTagName('li');
        var oP=true;
        oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
        function al(){oP=!oP}
        for(var i=0; i<oLi.length;i++){
            oSpan[i].index=i;
            oSpan[i].onclick=function(){
              startMove(oUl,{'left':oLi[0].offsetWidth*this.index*-1})
            }
        }
        oPrev.onclick=function(){
            if(oUl.offsetLeft<0 && oP){
                oP=!oP;     //开关,防止连续点击错误
                startMove(oUl,{'left':oUl.offsetLeft+oLi[0].offsetWidth},al);
            }else{
               return false;    
            }
            
        }
        oNext.onclick=function(){
            if(oUl.offsetLeft>-oLi[0].offsetWidth*(oLi.length)&&oP){
                oP=!oP;
                startMove(oUl,{'left':oUl.offsetLeft-oLi[0].offsetWidth},al)
            }else{
               return false;    
            }
            
        }
    }
    </script>
    <script src="move.js"></script>
    </body>
    </html>
  • 相关阅读:
    OneThink友情链接插件使用!
    OneThink生成分类树方法(list_to_tree)使用!
    OneThink视图模型进行组合查询!文档组合文档详情
    Atitit.数据操作dsl 的设计 ---linq 方案
    Atitit.数据操作dsl 的设计 ---linq 方案
    Atitit.Atiposter 发帖机 信息发布器 v7 q516
    Atitit.Atiposter 发帖机 信息发布器 v7 q516
    Atitit.http连接合并组件   ConnReducerV3 新特性
    Atitit.http连接合并组件   ConnReducerV3 新特性
    Atitit.减少http请求数方案
  • 原文地址:https://www.cnblogs.com/txxt/p/5790953.html
Copyright © 2011-2022 走看看