大图轮播

轮播图实现教程

最新推荐文章于 2023-04-17 18:07:20 发布

转载最新推荐文章于 2023-04-17 18:07:20 发布 · 73 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sglq/p/7356974.html

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个简单的轮播图功能。通过设置div元素及利用CSS样式完成基本布局，并通过JavaScript添加交互效果，实现轮播图的左右切换功能。

首先设置一个大div stage，再在里边放一个条幅ad-banner，然后再放五个div模块ad，用来轮播，然后就是设置左右切换按钮：left-btn、right-btn。

<body>
<div class="stage">
            <div class="to-left">
                </div>
                    <div class="to-right">></div>
                    <div class="banner">
                        <div class="items" style="background-color: green;">1</div>
                        <div class="items" style="background-color: royalblue;">2</div>
                        <div class="items" style="background-color: red;">3</div>
                        <div class="items" style="background-color: yellow;">4</div>
                        <div class="items" style="background-color: gray;">5</div>
                    </div>
            </div>
    
</body>

　　接下来就是用CSS样表对body里边的内容进行设置。

* {
                margin: 0px;
                padding: 0px;
            }
            
            .stage {
                width: 300px;
                height: 200px;
                border: 10px solid black;
                margin: 50px;
                margin-left: 200px;
                overflow: hidden;
                position: relative;
            }
            
            .banner {
                width: 1500px;
                height: 200px;
            }

　　然后就是对五个div模块设置宽高，设置行高及水平居中，流式布局向左，

 .items {
                width: 300px;
                height: 200px;
                float: left;
                font-size: 50px;
                line-height: 200px;
                color: white;
                text-align: center;
            }

　　然后设置左右按钮，设置宽高，用绝对定位来定位，设置透明效果，字体大小等。设置字体大小颜色等。

.to-left,
            .to-right {
                height: 200px;
                width: 20px;
                position: absolute;
                line-height: 200px;
                background-color: gray;
                opacity: 0.5;
                font-size: 20px;
                text-align: center;
            }
.to-left {
			left: 0px;
		}
			
.to-right {
			right: 0px;
		}

　　接下来就是用JS设计点击事件

<script>
	var to_right = document.getElementsByClassName('to-right')[0];
	var to_left = document.getElementsByClassName('to-left')[0];
	var banner = document.getElementsByClassName('banner')[0];
	var arr = [];
	var count = 1;

	to_right.onclick = function() {
		toRight();
	}

	function toRight() {
		arr.push(window.setInterval("moveLeft()", 30));
	}

	to_left.onclick = function() {
		toLeft();
	}

	function toLeft() {
		arr.push(window.setInterval("moveRight()", 30));
	}

	function moveLeft() {
		if(count < 5) {
			if(banner.offsetLeft > count * (-500)) {
				banner.style.marginLeft = banner.offsetLeft - 20 + "px";
			} else {
				for(var x in arr) {
					window.clearInterval(arr[x]);
				}
				count++;
			}
		}
	}

	function moveRight() {
		if(count - 1 > 0) {
			if(banner.offsetLeft < (count - 2) * (-500)) {
				banner.style.marginLeft = banner.offsetLeft + 20 + "px";
			} else {
				for(var x in arr) {
					window.clearInterval(arr[x]);
				}
				count--;
			}
		}
	}

	window.setInterval("toRight()", 1750);
</script>

转载于:https://www.cnblogs.com/sglq/p/7356974.html