JS原生轮播图
小米菜单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米菜单案例</title>
<style>
body, h2, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.title {
background-color: #ddd;
overflow: hidden;
line-height: 60px;
}
.title h2 {
float: left;
}
.title ul {
float: right;
}
.title li {
float: left;
margin: 0 5px;
line-height: 23px;
margin-top: 20px;
cursor: pointer;
}
.title li.active {
color: #FF6700;
border-bottom: 2px solid #FF6700;
transition: .2s;
}
</style>
<style>
.main {
overflow: hidden;
}
.main a {
display: block;
width: 300px;
height: 400px;
text-align: center;
}
.main li {
float: left;
width: 300px;
height: 400px;
background-color: orange;
margin-right: 14px;
}
.main img {
width: 260px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="title">
<h2>搭配</h2>
<ul>
<li class="active">热门</li>
<li>耳机音响</li>
<li>电源</li>
<li>电池与储蓄卡</li>
</ul>
</div>
<ul class="main">
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h2>小米音响</h2>
<img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
<p>这是小米音响, 稍微解释一下</p>
</a>
</li>
</ul>
</div>
</body>
<!--设置导航-->
<script>
(function () {
// 制造数据(模拟后台请求得到的)
let data = [
[
{
title: "热门1",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
},
{
title: "热门2",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
},
{
title: "热门3",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg1e99a342",
info: "这是热门"
},
{
title: "热门4",
img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
info: "这是热门"
}
], [
{
title: "耳机1",
img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
info: "这是耳机"
},
{
title: "耳机2",
img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
info: "这是耳机"
},
{
title: "耳机3",
img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
info: "这是耳机"
},
{
title: "耳机4",
img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
info: "这是耳机"
}
], [], []
];
let lis = document.querySelectorAll('.title li');
// 设置一个记录活跃li索引的状态变量
let active_index = 0;
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// 清除之前活跃的
lis[active_index].className = "";
// 设置自身为活跃
this.className = "active";
// 更新活跃索引
active_index = i;
// 更新数据
updateData(i);
}
}
// 更新数据
let main_lis = document.querySelectorAll('.main li');
// 分析数据结构与页面结构,将指定数据渲染到指定位置
function updateData(index) {
let dataArr = data[index];
// let count = 0;
// for (dataObj of dataArr) {
// // console.log(dataObj.title);
// let h2 = main_lis[count].querySelector('h2');
// h2.innerText = dataObj.title;
// let img = main_lis[count].querySelector('img');
// img.setAttribute('src', dataObj.img_url);
// let p = main_lis[count].querySelector('p');
// p.innerText = dataObj.info;
// count++;
// }
for (let i = 0; i < dataArr.length; i++) {
let h2 = main_lis[i].querySelector('h2');
h2.innerText = dataArr[i].title;
let img = main_lis[i].querySelector('img');
img.setAttribute('src', dataArr[i].img_url);
let p = main_lis[i].querySelector('p');
p.innerText = dataArr[i].info;
}
}
})()
</script>
<!--完成数据更新-->
<script>
(function () {
let lis = document.querySelectorAll('.main li');
})()
</script>
<!--
<script>
var lis = document.querySelectorAll('.title li');
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// 悬浮的li变成活跃状态, 之前活跃的li取消活跃状态
// 移除所有的
clearAllClassName()
// 添加自己的
this.className = "active"
}
}
function clearAllClassName() {
for (li of lis) {
li.className = "";
}
}
</script>
-->
</html>
轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style >
* {
/*不允许选择文本, 网页文本不能负责*/
user-select: none;
}
body, ul {
margin: 0;
padding: 0;
list-style: none;
}
.scroll {
width: 1226px;
height: 460px;
margin: 0 auto;
/*background-color: orange;*/
position: relative;
cursor: pointer;
}
.scroll_view {
width: 100%;
height: 100%;
position: relative;
}
.scroll_view li {
background: red;
width: 100%;
height: 100%;
font: normal 100px/460px 'STSong';
text-align: center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.scroll_view li.active {
opacity: 1;
transition: .5s;
}
.left {
position: absolute;
top: 170px;
left: 0;
background-color: #eee;
font-size: 100px;
}
.left:hover, .right:hover {
cursor: pointer;
background-color: #333;
}
.right {
position: absolute;
top: 170px;
right: 0;
background-color: #eee;
font-size: 100px;
}
.scroll_tag {
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll_tag li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
border: 3px solid #ddd;
float: left;
margin: 0 10px;
}
.scroll_tag li.active {
background-color: #ccc;
border: 3px solid #333;
}
</style>
</head>
<body>
<div class="scroll">
<ul class="scroll_view">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="scroll_toggle">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="scroll_tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
(function () {
let left_btn = document.querySelector('.left');
let right_btn = document.querySelector('.right');
let img_lis = document.querySelectorAll('.scroll_view li');
let tag_lis = document.querySelectorAll('.scroll_tag li');
let scroll = document.querySelector('.scroll');
// 定时器
let timer = 0;
// 记录活跃状态的索引变量
let active_index = 0;
// 下一张
right_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 索引切换(更新活跃索引)
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// 上一张
left_btn.onclick = function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 索引切换(更新活跃索引)
// 安全性: 第一张的前一张应该是最后一张
if (active_index == 0) active_index = 5;
active_index--;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
};
// 自动轮播
function autoScroll() {
timer = setInterval(function () {
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 索引切换(更新活跃索引)
// 安全性: 最后一张的下一张应该是第一张
if (active_index == 4) active_index = -1;
active_index++;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
}, 1500);
}
// 加载页面就只执行一次,打开自动轮播
autoScroll();
// 鼠标悬浮轮播图停止自动轮播
scroll.onmouseenter = function () {
clearInterval(timer)
};
// 鼠标移开重新开启自动轮播
scroll.onmouseleave = function () {
autoScroll();
};
// tag点击对应的图片切换
for (let i = 0; i < tag_lis.length; i++) {
tag_lis[i].onclick = function () {
// console.log(i);
// 清除之前活跃的图片和tag
img_lis[active_index].className = "";
tag_lis[active_index].className = "";
// 更新活跃索引
active_index = i;
// 设置将要活跃的图片和tag
img_lis[active_index].className = "active";
tag_lis[active_index].className = "active";
}
}
})()
</script>
</html>
滚动轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动轮播</title>
<style>
body, ul {
margin: 0;
padding: 0;
list-style: none;
user-select: none;
}
.wrapper {
width: 400px;
height: 240px;
background-color: orange;
margin: 50px auto;
position: relative;
overflow: hidden;
}
/* 滚得的标签是ul, 带动着4个li同步运动 */
.scroll_view {
width: 1600px;
/*利用绝对定位完成运动*/
position: absolute;
top: 0;
/*left: -400px;*/
left: 0;
/*transition: 1s;*/
}
.scroll_view li {
width: 400px;
height: 240px;
font: normal 80px/240px 'STSong';
text-align: center;
float: left;
}
.li1 { background-color: pink }
.li2 { background-color: deeppink }
.li3 { background-color: lightpink }
.li4 { background-color: hotpink}
.left {
position: absolute;
top: 100px;
left: 0;
background-color: #eee;
font-size: 30px;
}
.left:hover, .right:hover {
cursor: pointer;
background-color: #333;
}
.right {
position: absolute;
top: 100px;
right: 0;
background-color: #eee;
font-size: 30px;
}
.scroll_tag {
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll_tag li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
border: 3px solid #ddd;
float: left;
margin: 0 10px;
}
.scroll_tag li.active {
background-color: #ccc;
border: 3px solid #333;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="scroll_view">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
<li class="li4">4</li>
</ul>
<ul class="scroll_toggle">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="scroll_tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
(function () {
let scroll_view = document.querySelector('.scroll_view');
let left_btn = document.querySelector('.left');
let right_btn = document.querySelector('.right');
let tag_lis = document.querySelectorAll('.scroll_tag li');
right_btn.onclick = function () {
let total_lenth = 400;
let count = 0;
let step = 8;
let timer = setInterval(function () {
// 通过滚动的距离映射出所在的图片索引
let index = parseInt(-scroll_view.offsetLeft / total_lenth);
index += 1;
console.log(index);
// 临界点, 往右4
if (index == 4) {
clearInterval(timer);
return;
}
// 0+1 ==> 1
// 1+1 ==> 2
// 2+1 ==> 3
tag_lis[index - 1].className = "";
tag_lis[index].className = "active";
scroll_view.style.left = scroll_view.offsetLeft - step + 'px';
count++;
if (count >= total_lenth / step) {
clearInterval(timer)
}
}, 10);
};
left_btn.onclick = function () {
let total_lenth = 400;
let count = 0;
let step = 8;
let timer = setInterval(function () {
// 要偏移坐标系, 要加上一个宽度400 total_lenth
// 要处理第一次偏移bug, 少加上8 step
let index = parseInt((-scroll_view.offsetLeft + 392) / total_lenth);
console.log(index);
// 处理第一次偏移bug
// 3 => 2
// 2 => 1
// 1 => 0
// 临界点, 往左0
if (index == 0) {
clearInterval(timer);
return;
}
// if (index == 4) index = 3;
tag_lis[index].className = "";
tag_lis[index - 1].className = "active";
scroll_view.style.left = scroll_view.offsetLeft + step + 'px';
count++;
if (count >= total_lenth / step) {
clearInterval(timer)
}
}, 10);
}
})()
</script>
</html>
更好的方式实现滚动轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>最简单的轮播效果</title>
<style>
* {
margin: 0;
padding: 0
}
.box {
width: 500px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
}
.inner{
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.inner img{
width: 500px;
height: 300px;
vertical-align: top
}
ul {
width: 1000%;
position: absolute;
list-style: none;
left:0;
top: 0;
}
.inner li{
float: left;
}
ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 20px;
text-align: center;
padding: 5px;
}
ol li{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
margin: 5px;
cursor: pointer;
}
ol .current{
background-color: red;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<!--轮播图-->
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
</ul>
<!-- 小按钮数量无法确定，由js动态生成 -->
<ol class="bar">
</ol>
<!--左右焦点-->
<div id="arr">
<span id="left">
<
</span>
<span id="right">
>
</span>
</div>
</div>
</div>
<script>
/**
*
* @param id 传入元素的id
* @returns {HTMLElement | null} 返回标签对象，方便获取元素
*/
function my$(id) {
return document.getElementById(id);
}
//获取各元素，方便操作
var box=my$("box");
var inner=box.children[0];
var ulObj=inner.children[0];
var list=ulObj.children;
var olObj=inner.children[1];
var arr=my$("arr");
var imgWidth=inner.offsetWidth;
var right=my$("right");
var pic=0;
//根据li个数，创建小按钮
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");
olObj.appendChild(liObj);
liObj.innerText=(i+1);
liObj.setAttribute("index",i);
//为按钮注册mouseover事件
liObj.onmouseover=function () {
//先清除所有按钮的样式
for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
}
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(onmouseclickHandle,1000);
//左右焦点实现点击切换图片功能
box.onmouseover=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.onmouseout=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,1000);
};
right.onclick=onmouseclickHandle;
function onmouseclickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}
left.onclick=function () {
if (pic==0){
pic=list.length-1;
ulObj.style.left=-pic*imgWidth+"px";
}
pic--;
animate(ulObj,-pic*imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 10);
}
</script>
</body>
</html>
