zoukankan      html  css  js  c++  java
  • 以运动框架写个轮播图

    轮播图.就是图片自动切换式滚动。那么就让我们用原生javascript手写一个简单的轮播图吧。如下图所示。
    3

    效果

    banner

    思路

    4
    5
    上一张图片按钮:
    oLeft - = width;
    下一张图片按钮:
    oLeft += width;
    注意点:
    1.var judge2 = false; //用于后面按钮判断,防止切图过程中鼠标多次点击)=》这点用的比较巧妙。

    实现

    html代码:

    <div id="main">
            <div id="img_box">
                <div id="plays">
                    <ul>
                        <li>
                            <img src="picture/rencai2.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/xinxiaoqu.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/lanfoan.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/lanfoan.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/huchunhua.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/lanfoan.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/yuanshi.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/changxueyan.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/tiaozhanbei.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/rencai2.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/xinxiaoqu.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/lanfoan.jpg" border="0">
                        </li>
                        <li>
                            <img src="picture/changxueyan.jpg" border="0">
                        </li>
                    </ul>
                    <a href="javascript:;" id="p_prev" style=" opacity: 0.90; filter: alpha(opacity = 90);"></a>
                    <a href="javascript:;" id="p_next" style=" opacity: 0.90; filter: alpha(opacity = 90);"></a>
                    <div id="plays_left"></div>
                    <div id="plays_right"></div>
                </div>
            
            </div>
        </div> 
    

    css代码:

    * {
        margin: 0;
        padding: 0;
        border- 0;
        font-family: 微软雅黑;
    }
    #main #img_box {
        height: 400px;
         100%;
        background: #ccc;
        overflow: hidden;
    }
    
    #main #img_box #plays {
         1020px;
        height: 400px;
        margin: 0 auto;
        position: relative;
    }
    
    #main #img_box #plays ul {
         13260px;
        height: 400px;
        position: absolute;
        left: -2040px;
        overflow: hidden;
    }
    
    #main #img_box #plays ul li {
        float: left;
    }
    
    #main #img_box #plays #plays_left {
         1020px;
        height: 400px;
        position: absolute;
        top: 0;
        left: -1020px;
        opacity: 0.6;
        filter: alpha(opacity=60);
        z-index: 997;
        background-color: #fff;
    }
    
    #main #img_box #plays #plays_right {
         1020px;
        height: 400px;
        position: absolute;
        top: 0;
        right: -1020px;
        opacity: 0.6;
        filter: alpha(opacity=60);
        z-index: 997;
        background-color: #fff;
    }
    
    #main #img_box #plays #p_prev {
        position: absolute;
        top: 50%;
        left: 0;
        background: url(./images/left.png) no-repeat;
        height: 45px;
         46px;
    }
    
    #main #img_box #plays #p_next {
        position: absolute;
        top: 50%;
        right: 0;
        background: url(./images/right.png) no-repeat;
        height: 45px;
         46px;
    }
    

    js代码

    //获取非行间样式
    function getStyle(obj, name) {
        if (obj.currentStyle) {
            //IE
            return obj.currentStyle[name];
        }
        else {
            //FF、Chrome
            return getComputedStyle(obj, false)[name];
        }
    }
    //基本运动
    function Move(obj, attr, iTarget, fnEnd) {
    
        clearInterval(obj.timer);
    
        obj.timer = setInterval(function () {
            var cur = 0;
            var speed;
            if (attr == 'opacity') {
                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                speed = (iTarget - cur) / 10;
            }
            else {
                cur = parseInt(getStyle(obj, attr));
                speed = (iTarget - cur) / 2;
            }
    
    
    
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
            if (iTarget == cur) {
                clearInterval(obj.timer);
                if (fnEnd) fnEnd();
            }
            else {
                if (attr == 'opacity') {
    
                    obj.style.filter = 'alpha(opacity = ' + (cur + speed) + ')';//IE
                    obj.style.opacity = (cur + speed) / 100; //chrome FF
                }
                else {
                    obj.style[attr] = cur + speed + 'px';
                }
            }
        }, 30)
    }
    window.onload = function(){
        var oPlays = document.getElementById('plays');	//获取相关元素
        var oBtn_prev = document.getElementById('p_prev');	//左按钮
        var oBtn_next = document.getElementById('p_next');	//右按钮
        var oImg_ul = oPlays.getElementsByTagName('ul')[0];
        var oImg_li = oImg_ul.getElementsByTagName('li');
    
        var judge2 = false; //用于后面按钮判断,防止切图过程中鼠标多次点击
        var ofLeft = -2040; //运动初始值
    
        //按钮渐显渐隐
        oBtn_prev.onmouseover = function () {
            Move(this, 'opacity', 100);
        };
        oBtn_prev.onmouseout = function () {
            Move(this, 'opacity', 60);
        };
        oBtn_next.onmouseover = function () {
            Move(this, 'opacity', 100);
        };
        oBtn_next.onmouseout = function () {
            Move(this, 'opacity', 60);
        };
    
        //播放下张图片函数
        function autoPlay() {
            if (judge2) {
                judge2 = false;
                return;
            }
            else {
                ofLeft -= 1020;
    
                judge2 = true;
    
                Move(oImg_ul, 'left', ofLeft, function () {
                    if (ofLeft == -11220) {
                        oImg_ul.style.left = '-2040px';
                        ofLeft = -2040;
                    }
                    judge2 = false;
                });
            }
        }
        function lastPlay() {
            if (judge2) {
                judge2 = false;
                return;
            }
            else {
                ofLeft += 1020;
    
                judge2 = true;
    
                Move(oImg_ul, 'left', ofLeft, function () {
                    if (ofLeft == -1020) {
                        oImg_ul.style.left = '-10200px';
                        ofLeft = -10200;
                    }
                    judge2 = false;
                });
            }
        }
        //上一张图片按钮
        oBtn_prev.addEventListener('click', function () {
            lastPlay();
        });
        //下一张图片按钮
        oBtn_next.addEventListener('click', function () {
            autoPlay();
        });
        //自动播放幻灯片
        setInterval(autoPlay, 5000);
    }
    
  • 相关阅读:
    Meten Special Activities II
    Meten Special Activities II
    Meten Special Activities II
    Meten Special Activities II
    Meten Special Activities
    Meten Special Activities
    Meten Special Activities
    Meten Special Activities
    Meten Special Activities
    冒泡排序和选择排序
  • 原文地址:https://www.cnblogs.com/Jomsou/p/9161809.html
Copyright © 2011-2022 走看看