h5轮播图代码

朴灿烈づ我的快乐病毒、 2022-05-09 13:06 251阅读 0赞

下面是一个完整的h5轮播图html代码，复制后把图片改成自己的即可运行

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>h5轮播图demo</title>
        <script type="text/javascript" src="/h5/js/jquery-1.11.0.min.js"></script>
        
        <script type="text/javascript" src="/h5/js/util.js"></script>
    	<style>
    	* {
                margin: 0;
                padding: 0;
                text-decoration: none;
            }
            
            body {
                padding: 20px;
            }
            
            #container {
                position: relative;
    
                width: 1080px;
                height: 400px;
                border: 3px solid #333;
                overflow: hidden;
            }
            
            #list {
                position: absolute;
                z-index: 1;
                /*几个图加起来的宽度*/
                width: 4320px;
                height: 400px;
            }
            
            #list img {
                float: left;
                width: 1080px;
                height: 400px;
            }
            
            #buttons {
                position: absolute;
                left: 250px;
                bottom: 20px;
                z-index: 2;
                height: 10px;
            }
            
            #buttons span {
                float: left;
                margin-right: 5px;
                width: 10px;
                height: 10px;
                border: 1px solid #fff;
                border-radius: 50%;
                background: #333;
                cursor: pointer;
            }
            
            #buttons .on {
                background: orangered;
            }
            
            .arrow {
                position: absolute;
                top: 180px;
                z-index: 2;
                display: none;
                width: 40px;
                height: 40px;
                font-size: 36px;
                font-weight: bold;
                line-height: 39px;
                text-align: center;
                color: #fff;
                background-color: RGBA(0, 0, 0, .3);
                cursor: pointer;
            }
            
            .arrow:hover {
                background-color: RGBA(0, 0, 0, .7);
            }
            
            #container:hover .arrow {
                display: block;
            }
            
            #prev {
                left: 20px;
            }
            
            #next {
                right: 20px;
            }
    	</style>
    	<script>
    	window.onload = function() {
                var container = document.getElementById('container');
                var list = document.getElementById('list');
    			var imgLen= document.getElementsByTagName('img');
                var buttons = document.getElementById('buttons').getElementsByTagName('span');
                var prev = document.getElementById('prev');
                var next = document.getElementById('next');
                var index = 1;
                var timer;
                var offset = -1080; //单个图的宽度的负值
                var maxPicNums = 5;
    
                function animate(offset) {
    
                    var indexNums = 3;
                    var newLeft = parseInt(list.style.left) + offset;
                    list.style.left = newLeft + 'px';
                    //这里定的是最大5个轮播图，
                    var maxOffset = maxPicNums * offset;
                    if (newLeft > offset) {
                        list.style.left = -maxOffset + 'px';
                    }
                    if (newLeft < offset * (indexNums)) {
                        list.style.left = offset + 'px';
                    }
                }
    
                function play() {
                    timer = setInterval(function() {
                        next.onclick();
                    }, 2000)
                }
    
                function stop() {
                    clearInterval(timer);
                }
    
                function buttonsShow() {
                    for (var i = 0; i < buttons.length; i++) {
                        if (buttons[i].className == "on") {
                            buttons[i].className = "";
                        }
                    }
                    //buttons[index - 1].className = "on";
                    $(buttons[index - 1]).css("on");
                }
    
                prev.onclick = function() {
                    index -= 1;
                    if (index < 1) {
                        index = maxPicNums
                    }
                    buttonsShow();
                    animate(Math.abs(offset));
                };
    
                next.onclick = function() {
    				index += 1;
    				if (index > maxPicNums) {
                        index = 1
                    }
                    animate(offset);
                    buttonsShow();
                };
    
                for (var i = 0; i < buttons.length; i++) {
                    (function(i) {
                        buttons[i].onclick = function() {
    
    
                            var clickIndex = parseInt(this.getAttribute('index'));
                            var offset = Math.abs(offset) * (index - clickIndex); 
                            animate(offset);
                            index = clickIndex;
                            buttonsShow();
                        }
                    })(i)
                }
    
                container.onmouseover = stop;
                container.onmouseout = play;
                play();
    
            }
    	</script>
    </head>
    
    <body>
    
        <div id="container">
            
            <div id="list" style="left: -1080px;">
                <img src="images\slider1.jpg" alt="1" />
                <img src="images\slider1.jpg" alt="1" />
                <img src="images\slider2.jpg" alt="2" />
                <img src="images\slider3.jpg" alt="3" />
            </div>
            <div id="buttons">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
            </div>
            <a href="javascript:;" id="prev" class="arrow"><</a>
            <a href="javascript:;" id="next" class="arrow">></a>
        </div>
    
    </body>
    
    </html>

代码是从网上找的修改的，亲测