我要评论几种都是比较简单的写法，主要是为了给自己留个记录，怕以后忘记。。。。
第一种：想法是把想要显示的文字和图片分别放入数组，然后根据num的大小让数组array(num)的第num个显示在div中。
随便摆的样式 意思意思就好
<style type="text/css">
.imgcontent img{
width: 400px;
height: 320px;
}
.imgcontent{
width: 400px;
height: 400px;
border: 1px solid rgb(187, 73, 73);
margin: 100px auto;position: relative;
text-align: center;
}
.imgcontent a{
display: block;
position: absolute;
bottom: 0;
left: 0px;width: 100%;
height: 30px;
text-align: center;font-size: 18px;line-height: 30px;
}
.imgcontent strong{
position: absolute;
top: 50%;
font-size: 30px;
cursor: pointer;
background-color: gray;
}
.prev{
left: 10px;
}
.next{
right: 10px;
}
.buttons{
display:flex;
flex-direction: row;
justify-content: center;
cursor: pointer;
height: 20px;
margin-bottom: 30px;
}
.buttons .on{
background-color: #8e8e8e;
color: #000000;
}
.buttons span{
position: relative;
font-size: 16px;
line-height: 20px;
width: 20px;
height: 20px;
border-radius: 20px;
color: #ffffff;
background-color: #fc7a01;
}
</style>
依次下来是一个大框，数字，左右按钮，图片，4个小按钮，其实这个按钮数量也是可以js根据图片数量生成的，我没写。。
<div class="imgcontent" id='imgcontent'>
<a id="numx"></a>
<strong id="prev" class="prev"><</strong>
<strong id="next" class="next">></strong>
<img src="" id="imgchange"/>
<div class="buttons">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<script type="text/javascript">
//定义了几个控件的id和变量
var numx = document.getelementbyid('numx');
var prev = document.getelementbyid('prev');
var next = document.getelementbyid('next');
var imgcontent=document.getelementbyid('imgcontent');
var dos = document.getelementsbytagname("span");
var imgchange = document.getelementbyid('imgchange');
//图片的数组
var imgarr = ['img/1.jpg','img/b10.png','img/b9.png','img/b2.png'];
var num = 0;
var timel;
//图片轮播时左右按钮是隐藏的
prev.style.display='none';
next.style.display='none';
//实现动起来
animate(num);
//实现自动跳
play();
//整个轮播图鼠标覆盖上去就暂时停止，移开又继续自动跳
imgcontent.onmouseover=stop;
imgcontent.onmouseout=play;
//初始化第一个按钮亮起来的，且第一张图片显示出来
dos[0].classname = "on";
//给每一个按钮添加点击事件
for (var i = 0; i < dos.length; i++) {
clickdos(i);
}
//根据点击的按钮的选择按钮的覆盖效果方法
//先循环把所有的按钮都变暗，再给点击的那个按钮覆盖效果
function changebutton(i){
for (var n = 0; n < dos.length; n++)
{
dos[n].classname = "";
}
dos[i].classname = "on";
}
//按钮的点击事件，点到哪个按钮就让该按钮有覆盖效果并且图片和文字也变化
//本来覆盖效果的那个方法可以直接放在这里头，但是因为有后续图片的变换按钮也会跟着有覆盖效果
//所以还是得分开放
function clickdos(i) {
dos[i].onclick = function () {
changebutton(i);
animate(i);
}
}
//动起来 根据num的数字判断图片和文字数组的第num个放出来
function animate(num){
numx.innerhtml = num+1 + '/' + imgarr.length; //数字变化
imgchange.src = imgarr[num]; //图片变化
}
//右边按钮的点击事件，num不断增加，当到了最后一个就从第一个重新开始
//并且根据num进行图片文字和按钮的变动，另一个按钮同理
next.onclick = function(){
num++;
if(num == imgarr.length){
num = 0;
}
animate(num);
changebutton(num);
}
prev.onclick = function(){
num--;
if(num == -1){
num = imgarr.length-1;
}
animate(num);
changebutton(num);
}
//定时器2s依次变动，同时左右按钮隐藏
function play(){
timel=setinterval(function(){next.onclick();},2000)
prev.style.display='none';
next.style.display='none';
}
//暂停变动，清除定时器，同时左右按钮显示
function stop(){
clearinterval(timel);
prev.style.display='block';
next.style.display='block';
}
</script>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论