轮播图的做法（更换背景图片）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"
<title>博客</title>
<style>

</style>

.top-photo{
width: 670px;
height: 280px;
float: left;
position:relative;
}
.top-photo img{
width: 670px;
height: 280px;
display: none;
}
.top-photo .selected{
display: block;
}
/*设置浮动*/
.top-photo ul {
float: right;
width: 120px;
position: absolute;
top:230px;
right: 20px;
}
.top-photo ul li{
list-style: none;
float: left;
width: 24px;
height: 24px;
border-radius:50%;
background:#666;
margin-left:5px;
display: inline-block;
text-align: center;
color: white;
}
/*设置轮播图里面的圆点颜色*/
.top-photo ul .orange{
background:#f77825;
}
.imgblock{
display: block;
}</style>

</head>
<body>

<div class="top-photo">
<img src="data:images/a1.jpg" alt="" class="selected" >
<img src="data:images/a2.jpg" alt="">
<img src="data:images/a3.jpg" alt="">
<img src="data:images/a4.jpg" alt="">

<ul >
<li class="orange" data-li="0">1</li>
<li data-li="1">2</li>
<li data-li="2">3</li>
<li data-li="3">4</li>
</ul>
</div>

//函数区域
// var imgs= document.querySelectorAll(".top-photo img");
function dingshiqi(){

var orange= document.querySelector(".orange");
var selected = document.querySelector(".selected");
// 如果orange有下一个兄弟，那么则把下一个变成orange,
if(orange.nextElementSibling != null){
orange.nextElementSibling.className = "orange";
orange.className = " ";

selected.nextElementSibling.className = "selected";
selected.className = "";

}else{
// 如果没有下一个兄弟，则父标签的第一个变成orange
orange.parentNode.firstElementChild.className = "orange";
orange.className = " ";

selected.parentNode.firstElementChild.className ="selected";
selected.className = " ";

}

//定时器
var timer = setInterval(dingshiqi,4000);

var liArray = document.querySelectorAll(".top-photo ul li");
// console.log(liArray);
for(var n=0;n<liArray.length; n++){
liArray[n].onclick = function(){
//1.清除之前的定时器
clearInterval(timer);

// //2.新建一个开启
// timer = setInterval(dingshiqi,4000);
for(var i=0;i<liArray.length; i++){
liArray[i].className=" ";
console.log(liArray[i]);
}
this.className="orange";
var imgArray = document.querySelectorAll(".top-photo img");
for(var a=0;a<imgArray.length;a++){
imgArray[a].style.display="none";
number = this.getAttribute("data-li");
imgArray[number].style.display="block";

}
}

}

</script>

转载于:https://www.cnblogs.com/cntt/p/6492859.html

轮播图的做法（更换背景图片）相关推荐

ElementUI轮播图指示器设置为图片
效果图: <template><div><main><div class="product-intro"><div class ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了
2019独角兽企业重金招聘Python工程师标准>>> 今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/ ...
轮播图切换圆点html,图片轮播器，点击小圆点按钮实现图片切换。别的都对。哪里错了呀！...
按照阿安老师的<焦点图轮播特效>这部教程,5-1课.一步一步做的.检查了好几遍都没有错呀?为什么就是不执行呢?别的都好了,就是点击小圆点切换到相应的图片不行,代码见69-76行,哪里错了呢 ...
小程序轮播图swiper点击图片自定义跳转
我想实现的功能就是,点击首页的轮播图的不同图片,跳转到指定的页面. 点击轮播图的新用户专享图片跳转到新用户活动页面. 最开始我是想通过点击获取轮播图的下标,根据下标判断跳转到相应的页面,但是试了好久并 ...
在css中插入轮播图，结果显示图片到处乱跑，不在一个框子内
轮播图显示图片到处乱跑,不在一个框子内,这个该怎么办,想让它在页面左边.
JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
vue轮播图实现点击图片跳转到外部链接
需求:点击轮播图中的图片跳转到外部链接,比如跳转到csdn首页. 实现: 1.写出大体框架 <template><el-carousel :interval="4000&q ...
html flash轮播图,网页Flash实现图片轮播特效
在需要调用flash的地方添加以下代码: var focus_width=330 //定义轮播的宽度 var focus_height=450 //定义轮播的高度 var text_height ...

轮播图的做法（更换背景图片）

轮播图的做法（更换背景图片）相关推荐

最新文章

热门文章