原生js轮播图之鼠标事件显示对应图片
前言
自己写了个轮播，感觉还可以，拿来练手不错，遂记录下来。
首先看下动态图：
全部代码
<!DOCTYPE html>
<html>
<head>
<title>原生js轮播图之鼠标事件显示对应图片</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin:0;
text-decoration: none;
list-style: none;
}
.containerall{
width: 848px;
}
.carousel{
float: left;
height: 321px;
width: 550px;
position: relative;
margin: 8px;
}
.carousel img{
position: absolute;
transition: all 2s;
}
#title{
position: absolute;
width: 550px;
bottom: 0;
}
#title a{
background-color: #444;
color: #fff;
float: left;
width: 109px;
opacity: 0.7;
padding: 10px 0 16px;
margin-right:1px;
}
#title a span{
display: block;
text-align: center;
height: 16px;
}
#title a.active{
background: #00bfff url(https://puui.qpic.cn/fans_admin/0/3_1680187318_1573732681677/0) no-repeat center bottom;
opacity: 1;
}
</style>
</head>
<body>
<div class="containerall">
<div class="carousel" ">
<div id="pic">
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728795/0"></a>
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728235/0"></a>
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728323/0"></a>
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728111/0"></a>
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728233/0"></a>
</div>
<div id="title" onmouseover="stopTimer()" onmouseout="startTimer()">
<a href="#" class="active" onMouseOver="changebtn(0)">
<span>相约情人节</span>
<span>全场119元起</span>
</a>
<a href="#" onmouseover="changebtn(1)">
<span>新款上线</span>
<span>全场119元起</span>
</a>
<a href="#" onmouseover="changebtn(2)">
<span>愤怒小鸟特卖</span>
<span>全场119元起</span>
</a>
<a href="#" onmouseover="changebtn(3)">
<span>相约情人节</span>
<span>全场119元起</span>
</a>
<a href="#" onmouseover="changebtn(4)">
<span>相约情人节</span>
<span>全场119元起</span>
</a>
</div>
</div>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//定义下标，图片轮播
var nextpic=1;
function carousel(){
var imgArray=$("pic").getElementsByTagName("img");
var aArray=$("title").getElementsByTagName("a");
for(i=0;i<imgArray.length;i++){
if(i==nextpic){
imgArray[i].style.opacity="1";
aArray[i].style.backgroundColor="#00bfff";
aArray[i].className="active";
}else{
imgArray[i].style.opacity="0";
aArray[i].style.backgroundColor="rgb(0,0,0,0.3)";
aArray[i].className="";
}
}
if (nextpic==imgArray.length-1) {
nextpic=0;
}else{
nextpic++;
}
}
function changebtn(n){
var imgArray=$("pic").getElementsByTagName("img");
var aArray=$("title").getElementsByTagName("a");
for(i=0;i<imgArray.length;i++){
imgArray[i].style.opacity="0";
aArray[i].style.backgroundColor="rgb(0,0,0,0.3)";
aArray[i].className="";
}
imgArray[n].style.opacity="1";
aArray[n].style.backgroundColor="#00bfff";
aArray[n].className="active";
}
var timer=setInterval(carousel,2000);
function startTimer(){
stopTimer();
timer=setInterval(carousel,2000);
}
function stopTimer(){
clearInterval(timer);
}
</script>
</body>
</html>
html部分
<div class="containerall">
<div class="carousel" ">
<div id="pic">
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728795/0"></a>
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728235/0"></a>
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728323/0"></a>
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728111/0"></a>
<a href="#"><img src="https://puui.qpic.cn/fans_admin/0/3_15881579_1573725728233/0"></a>
</div>
<div id="title" onmouseover="stopTimer()" onmouseout="startTimer()">
<a href="#" class="active" onMouseOver="changebtn(0)">
<span>相约情人节</span>
<span>全场119元起</span>
</a>
<a href="#" onmouseover="changebtn(1)">
<span>新款上线</span>
<span>全场119元起</span>
</a>
<a href="#" onmouseover="changebtn(2)">
<span>愤怒小鸟特卖</span>
<span>全场119元起</span>
</a>
<a href="#" onmouseover="changebtn(3)">
<span>相约情人节</span>
<span>全场119元起</span>
</a>
<a href="#" onmouseover="changebtn(4)">
<span>相约情人节</span>
<span>全场119元起</span>
</a>
</div>
</div>
</div>
格式解读：
<div>
<div>//此处为整个轮播图的div
<div>//此处为图片放置部分
<a href="#"><img src="#"></a>//a标签包含图片，方便点击图片跳转相应的网站
</div>
<div id="title" onmouseover="stopTimer()" onmouseout="startTimer()">//此处为文字和背景块部分
//onmouseover是移动到元素上时触发stopTimer函数，onmouseout是离开元素时触发startTimer
<a href="#" class="active" onmouseover="changebtn(0)">
//a标签包含class和id，class时触发当前选中时元素显示的效果，onMouseover是移动到元素上时触发changegtn(0)函数
<span>相约情人节</span>
<span>全场119元起</span>
</a>
</div>
</div>
css部分
*{
padding: 0;
margin:0;
text-decoration: none;
list-style: none;
}
.containerall{
width: 848px;
}
.carousel{
float: left;
height: 321px;
width: 550px;
position: relative;
margin: 8px;
}
.carousel img{
position: absolute;
transition: all 2s;
}
#title{
position: absolute;
width: 550px;
bottom: 0;
}
#title a{
background-color: #444;
color: #fff;
float: left;
width: 109px;
opacity: 0.7;
padding: 10px 0 16px;
margin-right:1px;
}
#title a span{
display: block;
text-align: center;
height: 16px;
}
#title a.active{
background: #00bfff url(https://puui.qpic.cn/fans_admin/0/3_1680187318_1573732681677/0) no-repeat center bottom;
opacity: 1;
}
解读：
*{//全局css，一般页面都定义padding、margin都为0，去除浏览器自身的padding或margin效果
padding: 0;
margin:0;
text-decoration: none;
list-style: none;
}
.containerall{//最大的div，包含轮播图div或者其他内容
width: 848px;
//给大框框一个宽度，视情况而定
}
.carousel{//轮播图div
float: left;
//float浮动，左浮动会让一张图片占用一行，如同块元素一样，没加之前，图片都是横向的
height: 321px;//给轮播图div一个高度，图片的高度
width: 550px;//给轮播图div一个宽度，图片的宽度
position: relative;//给一个相对定位，让这个div与网页的布局不改变
margin: 8px;//给轮播图div一个外边距，视网页布局是否需要
}
.carousel img{//图片class
position: absolute;//给一个绝对定位，让占一行的一张图一个固定位置；达到重叠效果
transition: all 2s;//一个动画效果时长，配合后面js的透明度，达到淡出效果
}
#title{//文字部分div
position: absolute;//给文字div一个绝对定位，使它固定位置，且显示出来
width: 550px;//给一个宽度，等于图片的宽度，自行设置
bottom: 0;//距离轮播图div的底部距离为0，也就是靠低
}
#title a{//a标签效果，由于之前绝对定位和a为行内元素
background-color: #444;//a标签的背景色为#444
color: #fff;//a标签包含的字的颜色为白色
float: left;//定义浮动，加了后不再以文字的长度填充文字div给定的宽度再换行，而是以这个a标签的宽度去填充宽度，相应的，为了满足在同一行，文字就会变成两行
//（添加前实例1添加后实例2）
width: 109px;//每个a标签的宽度
opacity: 0.7;//透明度
padding: 10px 0 16px;//内边距，扩大可选范围
margin-right:1px;//外边距的右边间距为1px
}
#title a span{//文字本身效果
display: block;//span标签是行内元素，改为块元素可以让一个span占一行，两个就是两行
text-align: center;//文字居中
height: 16px;
//不给高度的话，高度等于这个文字部分div的高度，给了高度，就会改变整个文字部分div高度，因为之前没有加过高度，所以这里加会改变。
//当然这里改变的span的高度，虽然也改变了文字部分div，但是span文字上下间距会变小，如果在a标签那里加入height，就不会改变上下间距，且效果与span加height一样
//（a标签加height为示例3，span加height为示例4）
}
#title a.active{//当前显示的文字部分div展现的效果
background: #00bfff url(https://puui.qpic.cn/fans_admin/0/3_1680187318_1573732681677/0)no-repeat center bottom;
//让背景色变成00bffff，且添加一张图片作为背景图，no-repeat不重复，居中且靠底
opacity: 1;//透明度为1，完全显示，不透明
}
示例1：
示例2：
示例3：
示例4：
js部分
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//定义下标，图片轮播
var nextpic=1;
function carousel(){
var imgArray=$("pic").getElementsByTagName("img");
var aArray=$("title").getElementsByTagName("a");
for(i=0;i<imgArray.length;i++){
if(i==nextpic){
imgArray[i].style.opacity="1";
aArray[i].style.backgroundColor="#00bfff";
aArray[i].className="active";
}else{
imgArray[i].style.opacity="0";
aArray[i].style.backgroundColor="rgb(0,0,0,0.3)";
aArray[i].className="";
}
}
if (nextpic==imgArray.length-1) {
nextpic=0;
}else{
nextpic++;
}
}
function changebtn(n){
var imgArray=$("pic").getElementsByTagName("img");
var aArray=$("title").getElementsByTagName("a");
for(i=0;i<imgArray.length;i++){
imgArray[i].style.opacity="0";
aArray[i].style.backgroundColor="rgb(0,0,0,0.3)";
aArray[i].className="";
}
imgArray[n].style.opacity="1";
aArray[n].style.backgroundColor="#00bfff";
aArray[n].className="active";
}
var timer=setInterval(carousel,2000);
function startTimer(){
stopTimer();
timer=setInterval(carousel,2000);
}
function stopTimer(){
clearInterval(timer);
}
</script>
解读：
<script type="text/javascript">
//开篇写个匿名函数，用于获取id
function $(id){
return document.getElementById(id);
}
//定义下标数
var nextpic=1;//之所以为1，是因为第一张图一开始就显示了，在数组中1为第二个
//如果等于0，那么需要先调用carousel函数，不然会有冲突
//开始定义轮播图
function carousel(){
var imgArray=$("pic").getElementsByTagName("img");//获取pic这个id下img的标签元素，为数组
var aArray=$("title").getElementsByTagName("a");//获取title这个id下a的标签元素，为数组
for(i=0;i<imgArray.length;i++){//用for循环遍历访问img标签元素和a标签元素的数组对象
if(i==nextpic){//如果i等于下标，也就是一开始的1时，开始运行
//可以理解为当前显示的效果
imgArray[i].style.opacity="1";//第i+1张图片的透明度变成1，也就是可见，i+1是因为数组第一个数的下标为0。
aArray[i].style.backgroundColor="#00bfff";//第i+1个a标签的背景色变成00bfff
aArray[i].className="active";//第i+1个a标签的class类名变成active这个类名
}else{//如果i不等于下标数，则运行
//可以理解为不显示的效果
imgArray[i].style.opacity="0";//第i+1张图的透明度变成0，不可见
aArray[i].style.backgroundColor="rgb(0,0,0,0.3)";//第i+1个a标签的背景色变成0.3透明度
aArray[i].className="";//第i+1个a标签的class类名变成空
}
}
//上面是每张图片的轮转效果，下面就是关键的下标数的自加一，因为js解析是由上致下单线程解析
if (nextpic==imgArray.length-1) {//下标数等于图片数组选取数时运行。
//因为imgArray是个数组，上面也说过，数组选取第一个数是0开始，如果有三张图，那么这个数组就是0，1，2，但是长度却是3，为了一致，所以长度减一
nextpic=0;//下标数等于0，这是为了迎合数组第一个数
}else{
nextpic++;
//上面也说了下标数等于数组最大数时，重置为1，那么其实时候必然是自加一，0，1，2，当下标数等于2时又变成0，如此循环
}
}
//文字部分的函数，采用匿名函数的方式分隔当前选中的标签的效果和没选中的效果
function changebtn(n){//这个匿名函数是鼠标移动到对应的标签上才触发
var imgArray=$("pic").getElementsByTagName("img");//与上面的一样
var aArray=$("title").getElementsByTagName("a");//与上面的一样
for(i=0;i<imgArray.length;i++){//利用for循环展现没被选中的效果
imgArray[i].style.opacity="0";//第i+1张图的透明度为0，不可见
aArray[i].style.backgroundColor="rgb(0,0,0,0.3)";//与上面解读一样
aArray[i].className="";//与上面的解读一样
}
imgArray[n].style.opacity="1";//传入的参数n对应了当前标签数组和图片数组，可观察html代码
//第n+1张图片的透明度为1，可见
aArray[n].style.backgroundColor="#00bfff";
//第n+1个a标签的背景色变成00bfff
aArray[n].className="active";
//第n+1个a标签的class名变成active
}
var timer=setInterval(carousel,2000);
//关键点，如果需要让轮播图走起来，需要用到计时器，也就是回调函数，每隔2000毫秒carousel这个函数就运行一次
function startTimer(){//根据html代码查看，onmouseout鼠标移开触发
stopTimer();//运行stopTimer函数
timer=setInterval(carousel,2000);//再隔2秒后开始运行carousel
}
function stopTimer(){//根据html代码查看，onmouseover鼠标移动到元素上触发
clearInterval(timer);
//清除timer，也就是清除回调函数setInterval，使它不再有效果，也就不会再随着时间图片一张一张变化，刚好每个文字部分div上都有onmouseover效果，n参数传入后刚好显示对应图片，达到鼠标事件显示对应图片
}
</script>