轮播图的实现
2018-10-31 本文已影响0人
缺志青年
包含两个轮播图版本
1.0 2.0
1.0特点：
1.简单，易理解
2.可维护性差（添加图片后，要手动添加按钮span的数量，还要修改越界的代码
3.可以在浏览界面进行切换速度快慢设置
4.0可以选择按钮进行图片切换
autoplay1.0.png
2.0特点
1.在1.0的基础上进行了部分代码调整
2.可维护性提高，用户只需要添加图片，系统会自动生成按钮代码，修改越界代
3.去除在界面浏览界面的切换速度设置
4.添加了图片切换的动画效果
系统的可维护性是衡量一个系统的可修复(恢复)性和可改进性的难易程度。
autoplay2.0.png
文档组织结构
├─css
├─index.css
├─img
├─js
├─autoplay.js
├─index.html
轮播图1.0
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="banner" style="left: -600px"> <!--图片-->
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
</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="l"><</a> <!--左按钮-->
<a href="javascript:;" class="r">></a> <!--右按钮-->
</div>
<div class="control">
<p>速度选择：
<input type="text" maxlength="6" id="num">
<input type="button" value="确定" onclick="speed()" class="mark">
</p>
</div>
</body>
<script type="text/javascript" src="js/autoplay.js"></script>
</html>
index.css
* { /*通用属性*/
padding: 0px;
margin: 0 auto;
text-align: center;
font-family: 宋体;
}
a {
text-decoration: none; /*消除a标签的默认属性*/
}
.container { /*相对布局，宽高为一张图片的大小*/
margin-top: 150px;
position: relative;
height: 300px;
width: 600px;
border: 2px solid blue;
overflow: hidden /*只显示一张图片*/
}
.container .banner { /*相对于.container绝对定位*/
position: absolute;
height: 300px;
width: 4200px;
z-index: 1; /*设置为1好让.Buttons显示在图片上*/
}
.container .banner img {
float: left; /*图片左浮动，使其变为行类快类型*/
height: 300px;
width: 600px;
}
.container .Buttons {
position: absolute;
bottom: 10px;
left: 400px;
width: 200px;
height: 40px;
z-index: 2;
cursor: pointer; /*更改鼠标样式*/
}
.container .Buttons span {
display: inline-block;
height: 25px;
width: 25px;
font-size: 20px;
line-height: 25px;
border-radius: 50%;
background: darkred;
}
.container .l {
position: absolute;
display: block;
width: 40px;
height: 60px;
background: yellow;
line-height: 60px; /*将整个高度作为一行的高度*/
font-size: 30px; /*更改字体大小*/
left: 0px;
top: 120px;
}
.container .r {
position: absolute;
display: block;
width: 40px;
height: 60px;
background: yellow;
line-height: 60px;
font-size: 30px;
right: 0px;
top: 120px;
}
.container:hover .l{
z-index: 2;
}
.container:hover .r{
z-index: 2;
}
.container .Buttons span.on {
background: green;
}
.control {
margin-top: 30px;
height: 300px;
width: 600px;
}
.control p {
display: inline-block;
float: left;
line-height: 50px;
text-align: left;
}
#num:hover {
border-color: #cccccc;
}
.mark {
border-color: #cccccc;
}
autoplay.js
var index = 0;
var container = document.querySelector(".container");
var banner = document.querySelector(".banner");
var prev = document.querySelector(".l");
var next = document.querySelector(".r");
//速度调整
function speed() {
var num = document.getElementById('num');
settimes = num.value;
if (settimes <= 0)
{
alert("输入不合法！请保证数入的数值为正值！");
settimes = 1000;
}
else
{
clearInterval(times);
autoPlay();
}
}
//上一张
prev.onclick = function () {
prev_pic();
}
//下一张
next.onclick = function () {
next_pic();
}
//上一张的函数
var prev_pic = function () {
index --;
if (index == -1)
index = 4;
var imgLeft = parseInt(banner.style.left) + 600;
console.log(imgLeft);
if (imgLeft == 0)
imgLeft = -3000;
banner.style.left = imgLeft + "px";
BTtons();
}
//下一张的函数
var next_pic = function () {
index ++;
if (index == 5)
index = 0;
var imgLeft = parseInt(banner.style.left) - 600;
if (imgLeft == -3600)
imgLeft = -600;
banner.style.left = imgLeft + "px";
BTtons();
}
var times = null; //自动切换事件
var settimes = 1000; //自动切换的时间间隔
var autoPlay = function () {
times = setInterval(function () {
next_pic();
},settimes);
}
autoPlay();
//鼠标移入
container.onmouseenter=function () {
clearInterval(times);
}
//鼠标移出
container.onmouseleave = function () {
autoPlay();
}
//按钮随图片切换
var Span = document.getElementsByTagName("span");
function BTtons() {
for (let i = 0;i < Span.length;i ++)
{
Span[i].className = "";
}
Span[index].className = "on";
}
//对按钮进行监听
for (let i = 0;i < Span.length;i ++)
{
Span[i].onclick = function () {
index = i;
var imgLeft = index * -600 - 600;
banner.style.left = imgLeft + "px";
BTtons();
}
}
轮播图2.0
index.html代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="wrap" style="left: -600px">
<img src="./img/5.jpg" alt="" class="imgs">
<img src="./img/1.jpg" alt="" class="imgs">
<img src="./img/2.jpg" alt="" class="imgs">
<img src="./img/3.jpg" alt="" class="imgs">
<img src="./img/4.jpg" alt="" class="imgs">
<img src="./img/5.jpg" alt="" class="imgs">
<img src="./img/1.jpg" alt="" class="imgs">
</div>
<div id="buttons">
</div>
<a href="javascript:;" class="lbutton"><</a>
<a href="javascript:;" class="rbutton">></a>
</div>
</body>
<script type="text/javascript" src="js/autoplay.js"></script>
</html>
index.css
* {
padding: 0px;
font-family: 宋体;
margin: 0 auto;
text-align: center;
}
a {
text-decoration: none;
}
.container {
position: relative;
width: 600px;
height: 300px;
top: 100px;
overflow: hidden;
}
.wrap {
position: absolute;
height: 300px;
z-index: 1;
}
.wrap img {
float: left;
width: 600px;
height: 300px;
}
#buttons {
position: absolute;
height: 30px;
right: 10px;
bottom: 10px;
z-index: 2;
cursor: pointer;
}
#buttons span {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
line-height: 30px;
margin-left: 10px;
}
#buttons span.on {
background: green;
}
#buttons span:hover {
background: green;
}
.container .lbutton {
position: absolute;
display: block;
height: 30px;
width: 30px;
line-height: 30px;
top: 135px;
left: 30px;
background: rgba(40,41,41,0.75);
color: red;
}
.container:hover .lbutton{
z-index: 2;
}
.container .lbutton:hover {
background: rgba(40,41,41,1);
}
.container .rbutton {
position: absolute;
display: block;
height: 30px;
width: 30px;
line-height: 30px;
top: 135px;
right: 30px;
background: rgba(40,41,41,0.75);
color: red;
}
.container:hover .rbutton{
z-index: 2;
}
.container .rbutton:hover {
background: rgba(40,41,41,1);
}
autoplay.js
var container = document.querySelector(".container");
var wrap = document.querySelector(".wrap");
var buttons = document.getElementById("buttons");
var spans = document.getElementById("buttons").getElementsByTagName("span");
var prev = document.querySelector(".lbutton");
var next = document.querySelector(".rbutton");
var imgs = document.getElementsByClassName("imgs");
var index = 0;
var pic_time = 1000; //一张图片切换的时间
function create_Buttons() {
let cssStr = `.wrap {width: ${imgs.length * 600 + "px"};}`+ `#buttons {width: ${(imgs.length - 1) * 40 + "px"};}`; //动态添加.wrap #buttons 的宽度
let styleNode = document.createElement('style');
styleNode.innerText = cssStr;
document.head.appendChild(styleNode);
buttons.innerHTML += `<span class="on">`+1+`</span>`;
for (let i = 2;i < imgs.length - 1;i ++)
{
buttons.innerHTML += `<span>`+i+`</span>`;
}
}
create_Buttons();
function var_pic(offset) {
var timer = 300; //总位移时间
var nums = 10; //位移间隔时间
var var_px = offset / (timer / nums); //每次位移量
var newleft = parseInt(wrap.style.left) + offset;
function to_pic() {
//动画效果开始
if ((var_px < 0 && parseInt(wrap.style.left) > newleft)|| (var_px > 0 && parseInt(wrap.style.left) < newleft )){
wrap.style.left = parseInt(wrap.style.left) + var_px + "px";
setTimeout(to_pic,nums); //调用自己nums次
} else {
//在第一张和最后一张完成到最后一张和第一张的跳转
if (newleft > -600) {
newleft = ((imgs.length-2) * -600);
}else if (newleft < ((imgs.length-2) * -600)) {
newleft = -600;
}
if (index === spans.length) {
index = 0;
}else if (index === -1) {
index = spans.length - 1;
}
showbutton(index);
wrap.style.left = newleft + "px";
}
}
to_pic();
}
//下一张
next.onclick = function () {
index ++;
var_pic(-600);
}
//上一张
prev.onclick =function () {
index --;
var_pic(600);
}
//按钮颜色变化
function showbutton(index) {
for (let i = 0;i < spans.length;i ++)
{
spans[i].className = "";
}
spans[index].className = "on";
}
//一直保持监听状态，监听按钮是被点击
for (let i = 0;i< spans.length;i ++)
{
spans[i].onclick= function () {
index = i;
wrap.style.left = i * -600 - 600 + "px";
showbutton(i);
}
}
//图片自动播放事件
var auto_pic = null;
function autoPlay() {
auto_pic = setInterval(function () {
index ++;
var_pic(-600);
},pic_time);
}
autoPlay();
//鼠标移入
container.onmouseenter = function () {
clearInterval(auto_pic);
}
//鼠标移出
container.onmouseleave = function () {
autoPlay();
}
有些不足之处，还请不吝赐教。
