找回密码
当前位置：前端开发者 > JavaScript > 正文

前端 快速开发 js原生轮播图

2018-07-15 分类：JavaScript 阅读(631) 评论(0)

w3c 前端开发工具箱|web设计和web前端开发工具|前端拖拽式页面开发工具

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>移动web前端开发兼容问题:js完整轮播</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .demo {
            width: 490px;
            height: 170px;
            padding: 5px;
            border: 1px solid #000;
            margin: 50px auto 0;
        }
        #innerht {
            width: 490px;
            height: 170px;
            position: relative;
            overflow: hidden;
        }
        ul {
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
        }
        ul li {
            float: left;
            height: 170px;
        }
        ol {
            position: absolute;
            bottom: 5px;
            right: 5px;
        }
        ol li {
            width: 16px;
            height: 16px;
            display: inline-block;
            text-align: center;
            line-height: 16px;
            background: #fff;
            margin: 5px;
            cursor: pointer;
        }
        ol li.current {
            background: gold;
        }
        button {
            width: 20px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: 0;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            display: none;
            cursor: pointer;
        }
        #left {
            left: 0;
        }
        #right {
            right: 0;
        }
    </style>
</head>
<body>
    <div class=”demo”>
        <div id=”innerht”>
            <ul>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155403dapffd9ffpf0vdf0.jpg” height=”170″ width=”490″ alt=””>
                </li>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155402wj2qtb3n8j5844qz.jpg” height=”170″ width=”490″ alt=””>
                </li>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155403jcutql3z0i48uyt4.jpg” height=”170″ width=”490″ alt=””>
                </li>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155403v4ttwpz4f3cwaeeq.jpg” height=”170″ width=”490″ alt=””>
                </li>
                <li>
                    <img src=”http://cdn.attach.qdfuns.com/notes/pics/201702/27/155403q3440i0e344zpzp0.jpg” height=”170″ width=”490″ alt=””>
                </li>
            </ul>
            <ol></ol>
            <button id=”left”>←</button>
            <button id=”right”>→</button>
        </div>
    </div>
</body>
<script type=”text/javascript”>
    (function (window) {
        // 封装document.getElementById函数
        function $(id) {
            return document.getElementById(id);
        };
        // 获取相应对象
        var innerht = $(“innerht”), ul = innerht.children[0], ulli = ul.children[0];
        // 获取ul的第一个li克隆并插入ul最后
        ul.appendChild(ulli.cloneNode(true));
        // 获取一个banner的宽度
        var liWidth = innerht.offsetWidth;
        var ulLis = ul.children, ol = ul.nextElementSibling;
        // 设定ul的宽度
        ul.style.width = ulLis.length + “00%”;
        // 设定每个li的宽度
        for (i = 0; i < ulLis.length; i++) {
            ulLis[i].style.width = 100 / ulLis.length + “%”;
        };
        for (i = 0; i < ulLis.length – 1; i++) {
            var li = document.createElement(“li”);
            li.innerHTML = i + 1;
            ol.appendChild(li);
        }
        var olLis = ol.children;
        // 为第一个li添加选中状态
        olLis[0].className = “current”;
        var left = $(“left”), right = $(“right”);
        //给大盒子绑定鼠标事件
        innerht.onmouseover = function () {
            left.style.display = “block”;
            right.style.display = “block”;
            clearInterval(clock);</p >
                <p> };
innerht.onmouseout = function(){
                        left.style.display = “none”;
                    right.style.display = “none”;
                    clock = setInterval(right.onclick, 3000);
                 };
                 //为ol中的li添加鼠标事件
for( i = 0 ; i < olLis.length ; i++ ){
                        // 为每个li添加自定义属性
                        olLis[i].index = i;
                    olLis[i].onmouseover = function(){
for(j=0;j<olLis.length;j++){
                        olLis[j].className = “”;
                    };
                    this.className = “current”;
                    var index = this.index;
                    s = index;
                    squire = index;
                    var target = -index * liWidth ;
                    animate(ul,target);
                }
             };
             // 左右按钮点击事件
             var s = 0 , squire = 0 ;
right.onclick=function(){
if(s===olLis.length){
                        ul.style.left = “0px”;
                    s = 0 ;
                };
                s++;
                var target = -s * liWidth ;
                animate(ul,target);
if(squire===olLis.length-1){
                        squire = 0
                    }else{
                        squire++;
                    };
for(i=0;i<olLis.length;i++){
                        olLis[i].className = “”;
                    };
                    olLis[squire].className = “current”;
                 };
left.onclick=function(){
if(s===0){
                        ul.style.left = -olLis.length * liWidth + “px”;
                    s = olLis.length;
                };
                s–;
                var target = -s * liWidth ;
                animate(ul,target);
if(squire===0){
                        squire = olLis.length – 1 ;
                    }else{
                        squire–;
                    };
for(i=0;i<olLis.length;i++){
                        olLis[i].className = “”;
                    };
                    olLis[squire].className = “current”;
                 };
                 // 添加自动播放事件
                 var clock = null ;
                 clock = setInterval(right.onclick, 3000);
                         //封装animate函数
functionanimate(obj,target){
                        clearInterval(obj.timer);
                    obj.timer = setInterval(function(){
varleader=obj.offsetLeft,step=30;
step=leader<target?step:-step;
if(Math.abs(leader-target) >= Math.abs( step ) ){
                        leader = leader + step;
                    obj.style.left = leader + “px” ;
}else{
                        obj.style.left = target + “px” ;
clearInterval(obj.timer);
}
}, 15);
}
})(window);
</script>
</html>

app前端用什么开发工具|linux web前端开发工具|前端用的什么开发工具

赞(0)
前端开发者 » 前端 快速开发 js原生轮播图
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论