实现网站常见的轮播图

一、大致思路：

先创建一个div，限定其宽度和高度，overflow：hidden，且设置其position为relative（相对位置）。
然后创建一个装图片的div，宽度为所有图片的总宽度，且设置其position为absolute（绝对位置），并且使其中的内容浮动（float: left;），这样所有的图片就处于一行中。
然后为了实现无缝滚动，所以需要在首尾分别添加一张过渡图片。
先添加两个按钮，使其可以手动轮播，然后只需要添加一个定时器使其朝一个方向自动轮播即可，
因为用户有时需要查看详情，所以当鼠标进入时就clear定时器，滑出再定时播放。
为了更好地用户体验，我们再下面添加了一排小圆点，用户可以清楚地知道现在所处的位置，
最后，利用闭包使得用户可以直接通过点击小圆点切换图片。

二、项目结构截图：

三、代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
    <div class="container">
        <div class="wrap" style="left: -600px;">
            <img src="img/5.jpg" alt="5">
            <img src="img/1.jpg" alt="1">
            <img src="img/2.jpg" alt="2">
            <img src="img/3.jpg" alt="3">
            <img src="img/4.jpg" alt="4">
            <img src="img/5.jpg" alt="5">
            <img src="img/1.jpg" alt="1">
        </div>
        <div class="buttons">
            <span class="on">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <a href="javascript:;" class="arrow arrow_left">&lt;</a>
        <a href="javascript:;" class="arrow arrow_right">&gt;</a>
    </div>
</body>
<script src="js/index.js"></script>
</html>

CSS代码：

/*去除浏览器默认样式*/
* {
	margin:0;
	padding:0;
}

/*去掉超链接下划线*/
a{
	text-decoration: none;
}

/*设置总的div*/
.container {
	position: relative;
	width: 600px;
	height: 400px;
	margin:100px auto 0 auto;
	box-shadow: 0 0 1px green;
	overflow: hidden;
}

/*设置装图片的div*/
.container .wrap {
	position: absolute;
	width: 4200px;
	height: 400px;
	z-index: 1;
}

/*设置图片格式*/
.container .wrap img {
	float: left;
	width: 600px;
	height: 400px;
}

/*设置按钮位置*/
.container .buttons {
	position: absolute;
	right: 5px;
	bottom:40px;
	width: 150px;
	height: 10px;
	z-index: 2;
}

/*设置按钮样式*/
.container .buttons span {
	margin-left: 5px;
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: green;
	text-align: center;
	color:white;
	cursor: pointer;
}

/*按钮滚动颜色*/
.container .buttons span.on{
	background-color: red;
}

/*设置左右两个箭头*/
.container .arrow {
	position: absolute;
	top: 35%;
	color: green;
	padding:0px 14px;
	border-radius: 50%;
	font-size: 50px;
	z-index: 2;
	display: none;
}

/*左箭头*/
.container .arrow_left {
	left: 10px;
}

/*右箭头*/
.container .arrow_right {
	right: 10px;
}

/*设置箭头隐藏*/
.container:hover .arrow {
	display: block;
}

/*设置箭头被鼠标滑过的背景颜色*/
.container .arrow:hover {
	background-color: rgba(0,0,0,0.2);
}

JS代码：

var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next.onclick = function () {
	next_pic();
}
prev.onclick = function () {
	prev_pic();
}

//手动播放：添加左右两个箭头用以控制图片的翻页
function next_pic () {
	index++;
	if(index > 4){
		index = 0;
	}
	showCurrentDot();
	var newLeft;
	if(wrap.style.left === "-3600px"){
		newLeft = -1200;
	}else{
		newLeft = parseInt(wrap.style.left)-600;
	}
	wrap.style.left = newLeft + "px";
}
function prev_pic () {
	index--;
	if(index < 0){
		index = 4;
	}
	showCurrentDot();
	var newLeft;
	if(wrap.style.left === "0px"){
		newLeft = -2400;
	}else{
		newLeft = parseInt(wrap.style.left)+600;
	}
	wrap.style.left = newLeft + "px";
}

//自动播放：设置一个定时器，创建一个可以自动播放的函数并调用
var timer = null;
function autoPlay () {
	timer = setInterval(function () {
		next_pic();
	},1000);
}
autoPlay();

//停止播放：停止调用函数
var container = document.querySelector(".container");
container.onmouseenter = function () {
	clearInterval(timer);
}
container.onmouseleave = function () {
	autoPlay();    
}

//实现图片下方小圆点的滚动
var index = 0;
var dots = document.getElementsByTagName("span");
function showCurrentDot () {
	for(var i = 0, len = dots.length; i < len; i++){
		dots[i].className = "";
	}
	dots[index].className = "on";
}

//点击小圆点可以跳转到对应的图片
for (var i = 0, len = dots.length; i < len; i++){
	(function(i){
		dots[i].onclick = function () {
			var dis = index - i;
			if(index == 4 && parseInt(wrap.style.left)!==-3000){
				dis = dis - 5;     
			}
			//和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
			if(index == 0 && parseInt(wrap.style.left)!== -600){
				dis = 5 + dis;
			}
			wrap.style.left = (parseInt(wrap.style.left) +  dis * 600)+"px";
			index = i;
			showCurrentDot();
		}
	})(i);            
}

四、效果：

五、总结

总的来说就是将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。

当然这里的是原生js代码写的，会比较长，也可以用jQuery来写，更加方便。

文章主要参考自：https://www.cnblogs.com/zhuzhenwei918/p/6416880.html

原博主github地址：https://github.com/zzw918/swiper

万分感谢！

实现网站常见的轮播图

一、大致思路：

二、项目结构截图：

三、代码：

四、效果：

五、总结

猜你喜欢