在小编CSS静态轮播图后运用javascript实现动态轮播！！！
css静态轮播请参考小编CSS静态轮播图那篇文章喔！
开发环境：pycharm css+javascript
整体思路：
1.点击圆圈可以选择相对应的图片
2.点击两边箭头可以按顺序弹出图片
本次小编运用两种方法供大家参考
第一种方法：在border边框操作实现图片展示（要将之前border边框中引入的四张图片去掉）
首先获取整个border的标签，还有其中圆圈（用css选择器选中所有四个li标签）和箭头分别对应的标签
在箭头标签上直接加上function函数——add（）和down（）
<script type="text/javascript">
box = document.getElementsByClassName('slide')[0];
li = document.querySelectorAll('.tab li');
count = 1
function add(){
count+= 1
if(count>4){
count=1
}
func(count)
}
function down(){
count+= -1
if(count<1){
count=4
}
func(count)
}
li[0].onclick = function (){func(1)}
li[1].onclick = function (){func(2)}
li[2].onclick = function (){func(3)}
li[3].onclick = function (){func(4)}
function func(sum) {
switch(sum){
case 1:
box.style['backgroundImage'] = 'url("../image/2.jpg")'
break
case 2:
box.style['backgroundImage'] = 'url("../image/3.jpg")'
break
case 3:
box.style['backgroundImage'] = 'url("../image/5.jpg")'
break
case 4:
box.style['backgroundImage'] = 'url("../image/6.jpg")'
break
default:
alert('错误')
}
}
</script>要实现轮播图片效果还要在函数后面加定时器（1000是以ms为单位，此处为1s）
setInterval(add,1000)注意script标签在body最后面使用喔！！！
此方法所有代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS静态轮播图</title>
<link rel="stylesheet" href="reset.css">
<style>
.slide{
width: 400px;
height: 300px;
border: 1px solid white;
position: relative;
margin: 50px auto;
background-image: url("../images/01.jpg");
}
/*用于嵌套的元素*/
.slide .pic li{
position: absolute;
top: 0;
left: 0;
}
.slide .pic li img{
width: 250px;
height: 200px;
}
/* 箭头部分*/
.slide .btn li{
position: absolute;
top: 50%;/*元素本身会占据位置 不会完全在中间*/
transform: translateY(-50%); /* 元素对于本身纵向平移50%*/
width:40px;
height: 40px;
font-size: 30px;
line-height: 40px;
cursor:pointer;
text-align: center;
}
.slide .btn li:hover{
background-color: aqua;
opacity: 0.5;
border-radius: 5px;
}
/* 圆圈部分*/
.slide .tab {
position: absolute;
bottom:10px ;
left:50%;
transform: translateX(-50%);/* 元素对于本身横向平移50%*/
}
.slide .tab li{
float: left;
width: 10px;
height: 10px;
margin-left: 5px;
border-radius: 50%;/* 50%就是圆圈*/
background-color: aquamarine;
cursor: pointer;
}
.slide .tab li:hover{
background-color: yellow;
}
</style>
</head>
<body>
<div class="slide">
<!-- 图片部分-->
<!-- <ul class="pic">-->
<!-- <li><img src="../image/2.jpg" alt="1"></li>-->
<!-- <li><img src="../image/20.jpg" alt="20"></li>-->
<!-- <li><img src="../image/3.jpg" alt="40"> </li>-->
<!-- <li><img src="../image/14.jpg" alt="61"></li>-->
<!-- </ul>-->
<!--括号部分-->
<ul class="btn">
<li style="left:0" onclick="down()"><</li>
<li style="right: 0" onclick="add()">></li>
</ul>
<!--圆圈画面-->
<ul class="tab">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
box = document.getElementsByClassName('slide')[0];
li = document.querySelectorAll('.tab li');
count = 1
function add(){
count+= 1
if(count>4){
count=1
}
func(count)
}
function down(){
count+= -1
if(count<1){
count=4
}
func(count)
}
setInterval(add,1000)
li[0].onclick = function (){func(1)}
li[1].onclick = function (){func(2)}
li[2].onclick = function (){func(3)}
li[3].onclick = function (){func(4)}
function func(sum) {
switch(sum){
case 1:
box.style['backgroundImage'] = 'url("../image/2.jpg")'
break
case 2:
box.style['backgroundImage'] = 'url("../image/3.jpg")'
break
case 3:
box.style['backgroundImage'] = 'url("../image/5.jpg")'
break
case 4:
box.style['backgroundImage'] = 'url("../image/6.jpg")'
break
default:
alert('错误')
}
}
</script>
</body>
</html>第二种方法：直接在图片上操作展示轮播效果（与第一种方法对函数运用大致相同）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS动态轮播图</title>
<link rel="stylesheet" href="reset.css">
<style>
.slide{
width: 250px;
height: 200px;
border: 1px solid white;
position: relative;
margin: 50px auto;
background-image: url("../images/01.jpg");
}
/*用于嵌套的元素*/
.slide .pic li{
position: absolute;
top: 0;
left: 0;
}
.slide .pic li img{
width: 250px;
height: 200px;
}
/* 箭头部分*/
.slide .btn li{
position: absolute;
top: 50%;/*元素本身会占据位置 不会完全在中间*/
transform: translateY(-50%); /* 元素对于本身纵向平移50%*/
width:40px;
height: 40px;
font-size: 30px;
line-height: 40px;
cursor:pointer;
text-align: center;
}
.slide .btn li:hover{
background-color: aqua;
opacity: 0.5;
border-radius: 5px;
}
/* 圆圈部分*/
.slide .tab {
position: absolute;
bottom:10px ;
left:50%;
transform: translateX(-50%);/* 元素对于本身横向平移50%*/
}
.slide .tab li{
float: left;
width: 10px;
height: 10px;
margin-left: 5px;
border-radius: 50%;/* 50%就是圆圈*/
background-color: aquamarine;
cursor: pointer;
}
.slide .tab li:hover{
background-color: yellow;
}
</style>
</head>
<body>
<div class="slide">
<!-- 图片部分-->
<ul class="pic">
<li><img src="../images/01.jpg" alt="1"></li>
<li><img src="../images/02.jpg" alt="2"></li>
<li><img src="../images/03.jpg" alt="3"> </li>
<li><img src="../images/04.jpg" alt="4"></li>
</ul>
<!--括号部分-->
<ul class="btn">
<li style="left:0" onclick="down()"><</li>
<li style="right: 0" onclick="add()">></li>
</ul>
<!--圆圈画面-->
<ul class="tab">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
box = document.getElementsByClassName('slide')[0];
li = document.querySelectorAll('.tab li');
pic = document.querySelectorAll('.pic li img')
count = 1
function add(){
count+= 1
if(count>4){
count=1
}
func(count)
}
function down(){
count-= 1
if(count<1){
count=4
}
func(count)
}
setInterval(add,1000)
li[0].onclick = function (){func(1)}
li[1].onclick = function (){func(2)}
li[2].onclick = function (){func(3)}
li[3].onclick = function (){func(4)}
function func(sum) {
switch(sum){
case 1:
//box.style['backgroundImage'] = 'url("../image/2.jpg")'
pic[0].style.visibility = 'visible';
pic[1].style.visibility = 'hidden';
pic[2].style.visibility = 'hidden';
pic[3].style.visibility = 'hidden';
break
case 2:
//box.style['backgroundImage'] = 'url("../image/3.jpg")'
pic[0].style.visibility = 'hidden';
pic[1].style.visibility = 'visible';
pic[2].style.visibility = 'hidden';
pic[3].style.visibility = 'hidden';
break
case 3:
//box.style['backgroundImage'] = 'url("../image/5.jpg")'
pic[0].style.visibility = 'hidden';
pic[1].style.visibility = 'hidden';
pic[2].style.visibility = 'visible';
pic[3].style.visibility = 'hidden';
break
case 4:
//box.style['backgroundImage'] = 'url("../image/6.jpg")'
pic[0].style.visibility = 'hidden';
pic[1].style.visibility = 'hidden';
pic[2].style.visibility = 'hidden';
pic[3].style.visibility = 'visible';
break
default:
alert('错误')
}
}
</script>
</body>
</html>效果图：
?
第一种方法还要注意引入的图片原本的像素，第二种已经提前修改好适应了border边框的大小。
第二种方法写的代码会更多一点。大家自行选择哈
有什么不懂可以私信我哈，看到问题我会立即回复解答的！！！
希望能够坚持下来写文章，分享自己学到的东西！！！