用JavaScript 实现轮播

最新推荐文章于 2024-07-26 11:41:15 发布

weixin_30606669

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量56

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/seeyougirl/p/6813691.html

版权

//以下是样式

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        body {
            padding: 20px;
        }
        
        #container {
            width: 600px;
            height: 400px;
            border: 3px solid #333;
            overflow: hidden;
            position: relative;
        }
        
        #list {
            width: 4200px;
            height: 400px;
            position: absolute;
            z-index: 1;
        }
        
        #list img {
            float: left;
        }
        
        #buttons {
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 20px;
            left: 250px;
        }


       #buttons span {
            cursor: pointer;
            float: left;
            border: 1px solid #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            margin-right: 5px;
       }
        
       #buttons .on {
            background: orangered;
      }
        
        .arrow {
            cursor: pointer;
            display: none;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 180px;
            background-color: RGBA(0,0,0,.3);
            color: #fff;
        }
        
        .arrow:hover {
            background-color: RGBA(0,0,0,.7);
        }
        
        #container:hover .arrow {
            display: block;
        }

        #prev {
            left: 20px;
        }

        #next {
            right: 20px;
        }
    </style>


<body>
    <div id="container">
        <div id="list" style="left:-600px;">
            <img src="img/5.jpg" alt="Alternate Text" />
            <img src="img/1.jpg" alt="Alternate Text" />
            <img src="img/2.jpg" alt="Alternate Text" />
            <img src="img/3.jpg" alt="Alternate Text" />
            <img src="img/4.jpg" alt="Alternate Text" />
            <img src="img/5.jpg" alt="Alternate Text" />
            <img src="img/1.jpg" alt="Alternate Text" />
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javasript:;" class="arrow" id="prev">&lt;</a>
        <a href="javasript:;" class="arrow" id="next">&gt;</a>
    </div>
</body>

    <script type="text/javascript">    
        window.onload = function () {
            var container = document.getElementById("container");
            var list = document.getElementById("list");
            var bottons = document.getElementById("buttons").getElementsByTagName("span");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");


            next.onclick = function () {
                list.style.left = parseInt(list.style.left) - 600 + "px";
            };
            prev.onclick = function () {

                list.style.left = parseInt(list.style.left) + 600 + "px";
            }
        };
    </script>

//利用JavaScript实现动态轮播，首先是实现箭头之间的切换。   
 <script type="text/javascript">    
        window.onload = function () {
            var container = document.getElementById("container");
            var list = document.getElementById("list");
            var bottons = document.getElementById("buttons").getElementsByTagName("span");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            function animate(offset) {
                var newleft = parseInt(list.style.left) + offset;
                list.style.left = newleft + "px";
                if (newleft > -600) {
                    list.style.left = -3000 + "px";
                }
                if (newleft < -3000) {
                    list.style.left = -600 + "px";
                }
            }
            next.onclick = function () {
                animate(-600);
            };
            prev.onclick = function () {
                animate(600);
            }
        };
    </script>

    <script type="text/javascript">    
        window.onload = function () {
            var container = document.getElementById("container");
            var list = document.getElementById("list");
            var buttons = document.getElementById("buttons").getElementsByTagName("span");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var index = 1;

            function showButton() {
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons[i].className == "on") {
                        buttons[i].className = "";
                        break;
                    }
                }
                buttons[index - 1].className = "on";
            }

            function animate(offset) {

                var newleft = parseInt(list.style.left) + offset;
                list.style.left = newleft + "px";
                if (newleft > -600) {
                    list.style.left = -3000 + "px";
                }
                if (newleft < -3000) {
                    list.style.left = -600 + "px";
                }
            }
            next.onclick = function () {
                index += 1;
                showButton();
                animate(-600);
            };
            prev.onclick = function () {
                index -= 1;
                showButton();
                animate(600);
            }
        };
    </script>

<script type="text/javascript">    
        window.onload = function () {
            var container = document.getElementById("container");
            var list = document.getElementById("list");
            var buttons = document.getElementById("buttons").getElementsByTagName("span");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var index = 1;
            var animated = false;

            function showButton() {
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons[i].className == "on") {
                        buttons[i].className = "";
                        break;
                    }
                }
                buttons[index - 1].className = "on";
            }

            function animate(offset) {

                var newleft = parseInt(list.style.left) + offset;
                list.style.left = newleft + "px";
                if (newleft > -600) {
                    list.style.left = -3000 + "px";
                }
                if (newleft < -3000) {
                    list.style.left = -600 + "px";
                }
            }
            next.onclick = function () {

                if (index == 5) {
                    index = 1;
                } else {
                    index += 1;
                }               
                showButton();
                animate(-600);
            };
            prev.onclick = function () {

                if (index == 1) {
                    index = 5;
                } else {
                    index -= 1;
                }
                showButton();
                animate(600);
            }
        };
    </script>

现实了焦点轮播图的滚动

    <script type="text/javascript">    
        window.onload = function () {
            var container = document.getElementById("container");
            var list = document.getElementById("list");
            var buttons = document.getElementById("buttons").getElementsByTagName("span");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var index = 1;
            var len = 5;
            var animated = false;
            var interval = 3000;
            var timer;

            
            function showButton() {
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons[i].className == "on") {
                        buttons[i].className = "";
                        break;
                    }
                }
                buttons[index - 1].className = "on";
            }

            function animate(offset) {
                if (offset == 0) {
                    return;
                }
                animated = true;

                var time = 300;//位移总时间
                var inteval = 10;//位移间隔时间
                var spend = offset / (time / inteval);//每次位移量
                var left = parseInt(list.style.left) + offset;
                var newleft = parseInt(list.style.left) + offset;

                var go = function () {
                 
                    if ((spend > 0 && parseInt(list.style.left < left)) || (spend < 0 && parseInt(list.style.left < left))) {
                        list.style.left = parseInt(list.style.lefe) + spend + "px";
                        setTimeout(go, interval);//定时器
                        //interval 这是时间长度之后，我们就运行go()函数，也就是10s钟之后我们运行go()函数
                    }
                    else {                       
                        list.style.left = left + 'px';
                        if (left > -200) {
                            list.style.left = -600 * len + 'px';
                        }
                        if (left < (-600 * len)) {
                            list.style.left = '-600px';
                        }
                        animated = false;
                    }
                }
                go();

            }
            next.onclick = function () {
                //给右箭头加上点击事件
                //如果索引等于5时，返回第一张相片，如果不是，就让索引+1
                if (index == 5) {
                    index = 1;
                } else {
                    index += 1;
                }               
                showButton();
                animate(-600);
            };
            prev.onclick = function () {
                //给右箭头加上点击事件
                //如果索引等1时，返回第5张相片，如果不是，就让索引-1
                if (index == 1) {
                    index = 5;
                } else {
                    index -= 1;
                }
                showButton();
                animate(600);
            }
            for (var i = 0; i < buttons.length; i++) {//让按钮有点击事件
                buttons[i].onclick = function () {
                    var myIndex = parseInt(this.getAttribute("index"));
                    var offset = -600 * (myIndex - index);
                    animate(offset);
                    index = myIndex;
                    showButton();
                }
                
            }

            function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
            }

            function stop() {
                clearTimeout(timer);//清除定时器
            }

            container.onmouseover = stop;
            container.onmouseout = play;

            play();
        };
    </script>

转载于:https://www.cnblogs.com/seeyougirl/p/6813691.html

weixin_30606669

关注

0
点赞
踩
0

收藏

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

//以下是样式<style type="text/css"> * { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; ...
复制链接

扫一扫