简单但有技巧的轮播图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片切换</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
.box1 {
width: 700px;
height: 525px;
border: 1px solid #333;
position: relative;
margin: 20px auto;
text-align: center;
}
.box1 p {
width: 100%;
height: 30px;
background: rgba(75, 86, 85, 0.5);
color: white;
font: 24px/30px "微软雅黑";
position: absolute;
}
#title2 {
bottom: 0;
}
.box1 button {
width: 40px;
height: 60px;
background: rgba(75, 86, 85, 0.5);
position: absolute;
top: 50%;
}
#right {
right: 0;
}
#list {
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -50px;
}
#list li {
width: 20px;
height: 20px;
background: gray;
border-radius: 50%;
float: left;
margin-right: 5px;
}
#list .active {
background: orange;
}
</style>
</head>
<body>
<div class="box1">
<p id="title1">1/4</p>
<button id="left"><</button>
<button id="right">></button>
<img src="images/1.jpg" id="im">
<ul id="list">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1、获取元素
var title1 = document.getElementById('title1');
var left = document.getElementById('left');
var right = document.getElementById('right');
var img = document.getElementById('im');
var lis = document.querySelectorAll('#list li');
// 先声明一个变量count
var count = 1;
// 1、右边绑定事件
right.onclick = function () {
count++;
if (count > 4) {
count = 1;
}
fn();
}
//2 左边绑定事件
left.onclick = function () {
count--;
if (count < 1) {
count = 4;
}
fn();
}
// 3 小按钮绑定事件
for(var i = 0; i < lis.length; i++){
lis[i].index = i
lis[i].onclick = function(){
count = this.index + 1;
fn();
}
}
// 封装一个改变的函数
function fn() {
//图片的改变
img.src = 'images/' + count + '.jpg';
// title 文字的改变
title1.innerText = '' + count + '/4'
// 小圆圈的改变
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
lis[count - 1].className = 'active'
}
</script>
</body>
</html>
------------恢复内容开始------------
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片切换</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
.box1 {
width: 700px;
height: 525px;
border: 1px solid #333;
position: relative;
margin: 20px auto;
text-align: center;
}
.box1 p {
width: 100%;
height: 30px;
background: rgba(75, 86, 85, 0.5);
color: white;
font: 24px/30px "微软雅黑";
position: absolute;
}
#title2 {
bottom: 0;
}
.box1 button {
width: 40px;
height: 60px;
background: rgba(75, 86, 85, 0.5);
position: absolute;
top: 50%;
}
#right {
right: 0;
}
#list {
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -50px;
}
#list li {
width: 20px;
height: 20px;
background: gray;
border-radius: 50%;
float: left;
margin-right: 5px;
}
#list .active {
background: orange;
}
</style>
</head>
<body>
<div class="box1">
<p id="title1">1/4</p>
<button id="left"><</button>
<button id="right">></button>
<img src="images/1.jpg" id="im">
<ul id="list">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1、获取元素
var title1 = document.getElementById('title1');
var left = document.getElementById('left');
var right = document.getElementById('right');
var img = document.getElementById('im');
var lis = document.querySelectorAll('#list li');
// 先声明一个变量count
var count = 1;
// 1、右边绑定事件
right.onclick = function () {
count++;
if (count > 4) {
count = 1;
}
fn();
}
//2 左边绑定事件
left.onclick = function () {
count--;
if (count < 1) {
count = 4;
}
fn();
}
// 3 小按钮绑定事件
for(var i = 0; i < lis.length; i++){
lis[i].index = i
lis[i].onclick = function(){
count = this.index + 1;
fn();
}
}
// 封装一个改变的函数
function fn() {
//图片的改变
img.src = 'images/' + count + '.jpg';
// title 文字的改变
title1.innerText = '' + count + '/4'
// 小圆圈的改变
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
lis[count - 1].className = 'active'
}
</script>
</body>
</html>
------------恢复内容结束------------
