轮播图源码实现。
首先，我们要对要实现的功能有一个明确的认知，知道了功能才能够实现相应的逻辑
完整的轮播图需要具备的功能有：
1、点击左右浮块实现单张图片切换
2、在图片切换的同时底部圆点同时更新
3、点击圆点切换到对应的图片
4、自动播放，且鼠标移入轮播图自动播放停止，移出重新自动播放
思路：
定义一个图片切换函数，通过判断形参的类型，实现不同的切换需求，如果形参是布尔值，则实现单张图片切换，如果形参是下标，则实现多张图片切换，在图片切换的尾部调用圆点更新函数
圆点更新函数：同样判断形参的类型，如果是布尔值，每次跳变一个，如果是数字，则跳到对应的圆点，这里使用排他法更新小圆点。
源码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<!-- <script type="text/javascript" src="demo.js"></script> -->
</head>
<style type="text/css">
? ? *{
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? }
? ? ul{
? ? ? ? list-style: none;
? ? }
? ? a{
? ? ? ? text-decoration: none;
? ? }
? ? #container{
? ? ? ? position: relative;
? ? ? ? width: 500px;
? ? ? ? height: 260px;
? ? ? ? margin: 20px auto;
? ? ? ? overflow: hidden;
? ? }
? ? #container .parent{
? ? ? ? position: absolute;
? ? ? ? width: 2500px;
? ? ? ? height: 260px;
? ? }
? ?
? ? #container .parent li{
? ? ? ? float: left;
? ? ? ? width: 500px;
? ? ? ? height: 100%;
? ? }
? ? #container .parent li img{
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? }
? ? #container .btnLeft,
? ? #container .btnRight{
? ? ? ? width: 30px;
? ? ? ? height: 30px;
? ? ? ? background-color: #9E9E9E;
? ? ? ? border-radius: 20%;
? ? ? ? opacity: 80%;
? ? ? ? position: absolute;
? ? ? ? top: 0;
? ? ? ? bottom: 0;
? ? ? ? margin: auto;
? ? ? ? font-size: 20px;
? ? ? ? color: #f40;
? ? ? ? text-align: center;
? ? ? ? line-height: 30px;
? ? }
? ? #container .btnLeft{
? ? ? ? left: 10px;
? ? }
? ? #container .btnRight{
? ? ? ? right: 10px;
? ? }
? ? #container .btnLeft:hover,
? ? #container .btnRight:hover{
? ? ? ? opacity: 90%;
? ? ? ? cursor: pointer;
? ? }
? ? #container .modal{
? ? ? ? width: 100%;
? ? ? ? height: 40px;
? ? ? ? background: rgba(0,0,0,.3);
? ? ? ? position: absolute;
? ? ? ? left: 0;
? ? ? ? bottom: 0;
? ? ? ? line-height: 40px;
? ? ? ? padding: 0 40px;
? ? ? ? box-sizing: border-box;
? ? }
? ? #container .modal .title{
? ? ? ? float: left;
? ? ? ? color: #fff;
? ? ? ? font-size: 12px;
? ? }
? ? #container .modal .dots{
? ? ? ? float: right;
? ? ? ? position: absolute;
? ? ? ? bottom: 10px;
? ? ? ? left: 340px;
? ? }
? ? #container .modal .dots li{
? ? ? ? width: 15px;
? ? ? ? height: 15px;
? ? ? ? border-radius: 50%;
? ? ? ? float: left;
? ? ? ? margin: 0 5px;
? ? ? ? cursor: pointer;
? ? }
? ? .clearfix::after{
? ? ? ? content: "";
? ? ? ? display: block;
? ? ? ? clear: both;
? ? }
? ? .on{
? ? ? ? background-color: red;
? ? }
? ? .off{
? ? ? ? background-color: gray;
? ? }
</style>
<body>
<div id="container">
? ? <ul class="parent" style="left: 0;">
? ? ? ? <li><img src="./infinity-1.1.jpg"></li>
? ? ? ? <li><img src="./infinity-1.2.jpg"></li>
? ? ? ? <li><img src="./infinity-1.3.jpg"></li>
? ? ? ? <li><img src="./infinity-1.4.jpg"></li>
? ? ? ? <li><img src="./infinity-1.5.jpg"></li>
? ? </ul>
? ? <div class="btnLeft"><</div>
? ? <div class="btnRight">></div>
? ? <div class="modal">
? ? ? ? <div class="title">
? ? ? ? ? ? <h2>轮播图</h2>
? ? ? ? </div>
? ? ? ? <div class="dots">
? ? ? ? ? ? <ul class="clearfix">
? ? ? ? ? ? ? ? <li class="on"></li>
? ? ? ? ? ? ? ? <li class="off"></li>
? ? ? ? ? ? ? ? <li class="off"></li>
? ? ? ? ? ? ? ? <li class="off"></li>
? ? ? ? ? ? ? ? <li class="off"></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
</div>
<script type="text/javascript">
? ?
var imgShow = document.getElementsByClassName('parent')[0],
? ? dotList = document.querySelectorAll('.dots >.clearfix > li');
var btnLeft = document.getElementsByClassName('btnLeft')[0],
? ? btnRight = document.getElementsByClassName('btnRight')[0];
var dotLen = dotList.length,
? ? index = 0; //轮播层的图片索引，0表示第一张
//圆点显示
function showRadius() {
? ? for(var i = 0; i < dotLen; i++) {
? ? ? ? if(dotList[i].className === "on"){
? ? ? ? ? ? dotList[i].className = "off";
? ? ? ? }
? ? }
? ? dotList[index].className = "on";
}
//向左移动
btnLeft.onclick = function() {
? ? index--;
? ? if(index < 0){ ?/*第1张向左时，变为第5张*/
? ? ? ? index = 4;
? ? }
? ? showRadius();
? ? var left;
? ? var imgLeft = imgShow.style.left;
? ? if(imgLeft === "0px") { /*当是第1张时，每张图片左移，移4张图，位置为-(4*500)*/
? ? ? ? left = -2000;
? ? }
? ? else{
? ? ? ? left = parseInt(imgLeft) + 500; /*由于left为负数，每左移一张加500*/
? ? }
? ? imgShow.style.left = left + "px";
}
//向右移动
btnRight.onclick = function() {
? ? index++;
? ? if(index > 4){ ?/*第5张向右时，变为第1张*/
? ? ? ? index = 0;
? ? }
? ? showRadius();
? ? var right;
? ? var imgLeft = imgShow.style.left;
? ? if(imgLeft === "-2000px") { /*当是第5张时，第1张的位置为0*/
? ? ? ? right = 0;
? ? }
? ? else{
? ? ? ? right = parseInt(imgLeft) - 500; /*由于left为负数，每右移一张减500*/
? ? }
? ? imgShow.style.left = right + "px";
}
// 自动轮播
/*var timer;
function autoPlay() {
? ? timer = setInterval(function() {
? ? ? ? var right;
? ? ? ? var imgLeft = imgShow.style.left;
? ? ? ? if(imgLeft === "-2000px") {
? ? ? ? ? ? right = 0;
? ? ? ? }
? ? ? ? else{
? ? ? ? ? ? right = parseInt(imgLeft) - 500;
? ? ? ? }
? ? ? ? imgShow.style.left = right + "px";
? ? } ,1000)
}
autoPlay();*/
for(var i = 0; i < dotLen; i++) {
? ? /*利用闭包传递索引*/
? ? (function(i) {
? ? ? ? dotList[i].onclick = function() {
? ? ? ? ? ? var dis = index - i; //当前位置和点击的距离
? ? ? ? ? ? imgShow.style.left = (parseInt(imgShow.style.left) + dis * 500) + "px";
? ? ? ? ? ? index = i; //显示当前位置的圆点
? ? ? ? ? ? showRadius();
? ? ? ? }
? ? })(i);
}
</script>
</body>
</html>
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！