17js轮播左右焦点图

作者: An的杂货铺 | 来源:发表于2019-03-13 14:57 被阅读0次

17js轮播左右焦点图
左右焦点轮播图
第五周学习内容
React native 第三方组件 React-native-
常用插件
javaScript实现焦点轮播图界面效果（一）
js轮播图
android轮播图效果
JavaScript实战项目：移动端 Touch 轮播图
原生js实现移动端Touch轮播图的方法步骤

<!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 type="text/css">
            body,
            ul,
            ol,
            li,
            img {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            #box {
                width: 490px;
                height: 170px;
                padding: 5px;
                position: relative;
                border: 1px solid #ccc;
                margin: 100px auto 0;
                overflow: hidden;
            }
            
            .ad {
                width: 490px;
                height: 170px;
                overflow: hidden;
                position: relative;
            }
            
            #box img {
                width: 490px;
            }
            
            .ad ul li {
                float: left;
            }
            
            .ad ul {
                position: absolute;
                top: 0;
                width: 2450px;
            }
            
            .ad ul li.current {
                display: block;
            }
            
            #arr {
                display: block;
            }
            
            #arr span {
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #000;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: '黑体';
                font-size: 30px;
                color: #fff;
                opacity: 0.3;
                border: 1px solid #fff;
            }
            
            #arr #right {
                right: 5px;
                left: auto;
            }
        </style>
    </head>

    <body>
        <div id="box" class="all">
            <div class="ad">
                <ul id="imgs">
                    <li><img src="images/1.jpg" /></li>
                    <li><img src="images/2.jpg" /></li>
                    <li><img src="images/3.jpg" /></li>
                    <li><img src="images/4.jpg" /></li>
                    <li><img src="images/5.jpg" /></li>
                </ul>
            </div>
            <div id="arr"><span id="left"><</span><span id="right">></span></div>
        </div>
    </body>

</html>
<script src="sport.js"></script>
<script type="text/javascript">
    function $(id) {
         return document.getElementById(id);
    }
    var oLeft = $("left");
    var oRight = $("right");
    var oUl = $("imgs");
    var target = 0;
    oRight.onclick = function() {
        if (target === -490*4) {
            target === -490*4;
        } else {
            target -= 490;
        }
        // 执行运动函数
        startMove(oUl,target,"left");       
    }

    oLeft.onclick = function() {
        if (target === 0) {
            target === 0;
        } else {
            target += 490;
        }
        // 执行运动函数
        startMove(oUl,target,"left");       
    }
 
</script>

sport.js

function startMove(obj,target,attr){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
               var current = parseFloat(getStyle(obj,attr));
               var speed = 0;
               if(attr === 'opacity'){
                  speed = target-current>0?0.1:-0.1;
               }else{
                  speed = (target - current)/10; //    
                  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
               }
               
               if(target == current){
                   clearInterval(obj.timer);
               }else{
                if(attr === 'opacity'){
                  obj.style[attr] = current+speed;
                }else{
                  obj.style[attr] = current+speed+'px';
                }
               }
            },20)
           }
//获取元素的属性
function getStyle(obj,attr){
  if(window.getComputedStyle){
      return window.getComputedStyle(obj,null)[attr];
  }else{
      return obj.currentStyle[attr];
  }
}
//针对两种情况来进行一下整合

如图

nine.gif