JavaScript轮播图

最新推荐文章于 2023-06-13 11:30:49 发布

蜀道底部猫王八狂躁妮妮赛太公

最新推荐文章于 2023-06-13 11:30:49 发布

阅读量134

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

运动框架:`function getStyle (obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, false)[attr];
}
}

function startMove (obj, data, func) {
clearInterval(obj.timer);
var iSpeed;
var iCur;
var name;
startTimer = obj.timer = setInterval(function () {
var bStop = true;
for (var attr in data) {
if (attr === ‘opacity’) {
name = attr;
iCur = parseFloat(getStyle(obj, attr)) * 100;
}else {
iCur = parseInt(getStyle(obj, attr));
}
iSpeed = ( data[attr] - iCur) / 8;

        if (iSpeed > 0) {
            iSpeed = Math.ceil(iSpeed);
        }else {
            iSpeed = Math.floor(iSpeed);
        }

        if (attr === 'opacity') {
            obj.style.opacity = ( iCur + iSpeed ) / 100; 
        }else {
            obj.style[attr] = iCur + iSpeed + 'px';
        }
        if ( Math.floor(Math.abs(data[attr] - iCur)) != 0 ) {
            bStop = false;
        }
    }
    if (bStop) {					
        clearInterval(obj.timer);
        if (name === 'opacity') {
            obj.style.opacity = data[name] / 100;
        }
        func();
    }
},30);

} `

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            list-style:none;
        }
        .wrapper{
            position:relative;
            margin:100px auto 0;
            width:400px;
            height:250px;
            /*border:1px solid #000;*/
            overflow:hidden;
        }
        .wrapper .sliderPage{
            position: absolute;
            left:0;
            top:0;
            height:250px;
            width:2000px;
        }
        .wrapper .sliderPage li{
            width:400px;
            height:250px;
            float:left;
        }
        .wrapper .sliderPage li img{
            width:100%;
            height:100%;
        }
        .wrapper .btn{
            position:absolute;
            top:50%;
            margin-top:-20px;
            width: 40px;
            height:40px;
            color:#fff;
            background-color:#000;
            text-align:center;
            line-height:40px;
            opacity:0.1;
            cursor:pointer;
        }
        .wrapper:hover .btn{
            opacity:0.7;
        }
        .wrapper .leftBtn{
            left:15px;
        }
        .wrapper .rightBtn{
            right:15px;
        }
        .wrapper .sliderIndex{
            position:absolute;
            width:100%;
            bottom:15px;
            text-align:center;
            cursor:pointer;
        }
        .wrapper .sliderIndex span{
            display: inline-block;
            width:8px;
            height:8px;
            background-color:#ccc;
            border-radius:50%;
            margin-right:10px;
        }
        .wrapper .sliderIndex .active{
            background-color:#f40;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="sliderPage">
            <li><img src="../css/cat1.jpg" alt=""></li>
            <li><img src="../css/cat2.jpg" alt=""></li>
            <li><img src="../css/cat3.jpg" alt=""></li>
            <li><img src="../css/cat4.jpg" alt=""></li>
            <li><img src="../css/cat1.jpg" alt=""></li>
        </ul>
        <div class="btn leftBtn">&lt;</div>
        <div class="btn rightBtn">&gt;</div>
        <div class="sliderIndex">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
<script type="text/javascript" src="../css/move.js"></script>
<script type="text/javascript">
    var timer = null;
    var sliderPage = document.getElementsByClassName('sliderPage')[0];//取出第一个ul的class类名
    var moveWidth = sliderPage.children[0].offsetWidth;//children[0]返回第一位子元素 offsetWidth当前宽度
    var num = sliderPage.children.length - 1;//children.length - 1返回所有子元素并且遍历-1位证明有4种图片轮播

    var leftBtn = document.getElementsByClassName('leftBtn')[0];
    var rightBtn = document.getElementsByClassName('rightBtn')[0];
    var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
    var lock = true; //var 一个锁来判断前一个是否完成
    var index = 0;  //0是让第一个span是active标签
    leftBtn.onclick = function(){
      autoMove('right->left');
    };
    rightBtn.onclick = function(){
        autoMove('left->right');
    };
    for(var i = 0; i < oSpanArray.length; i++){
        (function(myIndex){
            oSpanArray[i].onclick = function(){
                lock = false;//加锁
                clearTimeout(timer);//清理setTimeout操作
                index = myIndex;
                startMove(sliderPage,{left:-index * moveWidth},function(){
                    lock = true;//开锁
                    timer = setTimeout(autoMove,1500);//开启定时器
                    changeIndex(index);
                })
            }
        }(i));

    }
    //children是类数组
    //direction(方法)
    //默认轮播方向/right按钮 left - right/undefined
    //点击left按钮  'right-->left'
    function autoMove(direction){
        if(lock){
            lock = false;//进来先锁住
            clearTimeout(timer);//clearTimeout取消setTimeout()定时操作
            //调用autoMove函数direction形参是undefined !direction会变true
            if (!direction || direction == 'left->right'){//!direction会变true就会执行下面语句
                index++;//执行一次加一次
                startMove(sliderPage,{left:sliderPage.offsetLeft - moveWidth},function(){
                    //startMove函数开始运动ul,left当前位置获取 减去第一个li运动完了以后回调函数判断
                    if(sliderPage.offsetLeft == -num * moveWidth){//判断ul当前位置是否等于最后一张图片li真实位置
                        index = 0;
                        //向左移动位置值是负数 所以== -num * moveWidth(最后一张图片位置)
                        sliderPage.style.left = '0px';//跳到第一张图片位置
                    }
                    timer = setTimeout(autoMove,1500);
                    lock = true;
                    changeIndex(index);//发生改变执行函数changeIndex传参
                })
            }else if(direction == 'right->left'){//点击向左
                if (sliderPage.offsetLeft == 0){// 判断当前位置是否等于0
                    //如果等于0不能去进行startMove
                    //-num * moveWidth + 'px';最后一张图片的位置
                    sliderPage.style.left = -num * moveWidth + 'px';
                    index = num; //num是4 最后一张图
                }
                index --;
                startMove(sliderPage,{left:sliderPage.offsetLeft + moveWidth},function(){
                    timer = setTimeout(autoMove,1500);
                    lock = true;
                    changeIndex(index);
                })//定时器
            }
        }

    }
    function changeIndex(_index){ //传参决定让哪一个index具有class是active
        for(var i = 0; i < oSpanArray.length;i++){
            oSpanArray[i].className = '';//.className返回元素class属性
        }
        oSpanArray[_index].className = 'active';
    }
    timer = setTimeout(autoMove,1500);//seTimeout执行函数 1500毫米厚执行
</script>
</body>
</html>

蜀道底部猫王八狂躁妮妮赛太公

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript轮播图

&amp;lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;title&amp
复制链接

扫一扫