几种不同想法的手写轮播图（第一种）

几种都是比较简单的写法，主要是为了给自己留个记录，怕以后忘记。。。。

第一种：想法是把想要显示的文字和图片分别放入数组，然后根据num的大小让数组array(num)的第num个显示在div中。

随便摆的样式意思意思就好

.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>

　　　　//定义了几个控件的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>

几种不同想法的手写轮播图（第一种）

猜你喜欢