描述:
1. 布局, 有几张图就有几个小圆点
2. 在页面中，每隔2s图片切换到下一章
3. 点击左箭头, 让图片依次切换 4–3--2–1--4
4. 点击右箭头, 让图片依次切换 1–2--3–4--1
5. 点击小圆点，图片切换到对应的
6. 鼠标划上div，清除定时器
7. 划下div, 定时器重新开启
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#content{
width: 700px;
height: 525px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#content ul{
/* width = sum of all the width of pictures */
width: 2800px;
height: 525px;
position: absolute;
left: 0;
top: 0;
border:1px solid green
}
#content ul li{
width: 700px;
height: 525px;
float: left;
}
#content p{
width: 100%;
height: 20px;
position:absolute;
left: 0;
bottom: 22px;
/* background-color: olivedrab; */
text-align: center;
}
#content p span{
width: 20px;
height: 20px;
background: #808080;
display: inline-block;
margin: 0 5px;
border-radius: 50%;
}
#content button{
width: 50px;
height: 90px;
line-height: 90px;
background-color: #000;
opacity: 0.3;
color:#fff;
font-size: 30px;
position:absolute;
top: 50%;
margin-top:-45px;
cursor: pointer;
}
#content .left{
left: 0;
}
#content .right{
right: 0;
}
#content p span.active{
background-color:#FFA500;
}
</style>
</head>
<body>
<!-- 1.轮播图布局 -->
<div id="content">
<!-- 图片列表 -->
<ul>
<!-- <li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li> -->
</ul>
<!-- 小圆点列表 -->
<p>
<!-- <span class = "active"></span>
<span></span>
<span></span>
<span></span> -->
</p>
<!-- 左右箭头 -->
<button class = "left"><</button>
<button class = "right">">></button>
</div>
<script src="./function.js"></script>
<script>
/* 1. 布局, 有几张图就有几个小圆点
2. 在页面中，每隔5s图片切换到下一章
3. 点击左箭头, 让图片依次切换 4--3--2--1--4
4. 点击右箭头, 让图片依次切换 1--2--3--4--1
5. 点击小圆点，图片切换到对应的
6. 鼠标划上div，清除定时器
7. 划下div, 定时器重新开启 */
// 1.渲染页面
// 动态实现布局效果
var cont = document.querySelector('#content');
var ul = cont.getElementsByTagName('ul')[0];
var p = cont.getElementsByTagName('p')[0];
// console.log(cont, p, ul);
// 假设, 将所有图片存储到数组中
var arr = ['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg'];
// 页面中渲染数据, 将每一张图片和每一个小圆点添加到content中
// 初始化变量
var html = '';
var str = '';
for(var i = 0; i < arr.length; i++){
// 初始化图片
html += '<li><img src="'+ arr[i] +'" alt=""></li>';
// 初始化小圆点
str += '<span></span>';
}
// html渲染到ul
ul.innerHTML = html;
// str渲染到p
p.innerHTML = str;
// 无缝轮播多加的最后一张图
ul.innerHTML += '<li><img src="'+ arr[0] +'" alt=""></li>';
// 第一个小圆点类为active
var spans = p.getElementsByTagName('span');
spans[0].className = 'active';
// 2.图片每隔2s动一次
// 获取图片宽度, 即为盒子的可视宽度
var cw = cont.clientWidth;
console.log(cw);
// 重新计算ul的宽度
ul.style.width = (arr.length + 1) * cw + 'px';
console.log(ul);
// 假设图片为第一张
var n = 0;
// 移动的距离 = 下标 * 一张图片的宽度
// 移动方向 0 -- 1 -- 2 -- 3 -- 0
cont.t = setInterval(auto, 2000);
// 划上cont, 清除
cont.onmouseenter = function(){
clearInterval(cont.t);
}
// 离开cont, 重新激活定时器
cont.onmouseleave = function(){
cont.t = setInterval(auto, 2000);
}
// 点击右箭头, 切换到下一张图片
var btns = document.getElementsByTagName('button');
console.log(btns);
btns[1].onclick = function(){
auto();
}
// 点击左箭头, 切换到上一张
btns[0].onclick = function(){
n -= 2;
auto();
}
// 点击每一个小圆点, 切换到对应图片
for(var i = 0; i < spans.length; i++){
// 自定义索引
spans[i].index = i;
// 给每一个小圆点添加点击事件
spans[i].onclick = function(){
// 小圆点与图片关系一一对应
n = this.index - 1;
auto();
}
}
// 封装定时器
function auto(){
n++;
// ul.style.left = n * (-cw) + 'px';
// 如果n到达最后一张, 则返回第一张
if(n > arr.length){
n = 0;
// 闪现回到第一张
ul.style.left = n * (-cw) + 'px';
// 回到第一张之后, 下标更新为第二张
n = 1;
}
// 如果n到第一张, 则返回最后一张
if( n < 0 ){
n = arr.length - 1;
// 闪现
ul.style.left = n * -cw + 'px';
}
// 调用匀速运动函数
move(ul, 'left', 50, n* (-cw));
// 增加排他
for(var i = 0; i < spans.length; i++){
spans[i].className = '';
}
// 小圆点和图片关系一一对应
spans[n == arr.length ? 0 : n].className = 'active';
}
</script>
</body>
</html>AJAX实现轮播图和小圆点切换代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
#cont {
width: 100%;
height: 450px;
background: rgb(142, 177, 255);
position: relative;
}
#cont ul {
display: block;
width: 750px;
height: 450px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: yellow;
}
#cont ul li {
position: absolute;
top: 0;
left: 0;
width: 750px;
height: 450px;
opacity: 0;
}
#cont ul li.active {
opacity: 1;
}
#cont p {
width: 750px;
height: 10px;
margin: auto;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
line-height: 10px;
font-size: 0;
}
#cont p span {
width: 40px;
height: 10px;
display: inline-block;
background: #000;
margin: 0 5px;
opacity: 0.5;
}
#cont p span.active {
background: red;
}
</style>
</head>
<body>
<!--
1. 布局:
2. js
2.1 请求数据
2.2 数据渲染到页面
2.3 初始化页面的样式
2.4 每隔5s中换下一张图 2个动画同时执行 所有的被清除 当前这一个被显示
2.5 划上每一个小圆点也要去切换图片
-->
<div id="cont">
<ul>
<!-- <li class="active"><img src="./images/banner/banner1.jpg" alt=""></li>
<li><img src="./images/banner/banner2.jpg" alt=""></li>
<li><img src="./images/banner/banner3.jpg" alt=""></li>
<li><img src="./images/banner/banner4.jpg" alt=""></li> -->
</ul>
<p>
<!-- <span class="active"></span>
<span></span>
<span></span>
<span></span> -->
</p>
</div>
<script src="./ujiuye.js"></script>
<script>
// 2.1 请求数据
ajax('get', './banner.txt', '', function (res) {
// console.log(res);
// 转换数据
var r = JSON.parse(res);
// console.log(r);
// 2.2 数据渲染到页面
// 2.2.1 原页面注释掉
// 2.2.2 将每一个数据生成html片段 渲染到父元素中
var cont = document.getElementById('cont');
// console.log(cont);
var p = cont.querySelector('p');
var ul = cont.querySelector('ul');
// console.log(p, ul);
// 声明变量存储html片段
var html = '', str = '';
for (var i = 0; i < r.length; i++) {
console.log(r[i]);
// 变量 += 单独一个单元
html += '<li><img src="' + r[i].src + '" alt=""></li>';
str += '<span></span>';
}
// 渲染到父元素中
ul.innerHTML = html;
p.innerHTML = str;
// 2.3 初始化页面的样式
// 第一个li加上类名 第一个span加上类名
var lis = ul.getElementsByTagName('li');
var spans = p.getElementsByTagName('span');
console.log(lis, spans);
lis[0].className = 'active';
spans[0].className = 'active';
// 2.4 每隔5s换一张图
// 0---1---2---3---0
// 不知道第几章图 存一下
var n = 0;
ul.timer = setInterval(auto, 2000);
// 划上每一个小圆点 让图片显示对应的 小圆点 图片 一一对应
// 划下每一个小圆点 重新开始定时器
for (var j = 0; j < spans.length; j++) {
spans[j].index = j;
spans[j].onmouseenter = function () {
// 清除定时器
clearInterval(ul.timer);
// 小圆点的下标
n = this.index - 1;
auto();
}
spans[j].onmouseleave = function () {
ul.timer = setInterval(auto, 2000);
}
}
function auto() {
n++;
// 判断
if (n == lis.length) {
n = 0;
}
// 排他
for (var j = 0; j < lis.length; j++) {
buffMove(lis[j], { 'opacity': 0 });
spans[j].className = '';
}
// 操作元素的透明度
buffMove(lis[n], { 'opacity': 1 });
// 小圆点跟随切换
spans[n].className = 'active';
// 更换背景色
cont.style.background = r[n].background;
}
});
/*
json数据的规矩:
1. 最大级别 [] {}
2. 所有的属性名和属性值都用双引号
3. 多余的符号不要加
4. 没有变量和函数 字符串 数值
*/
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
