js中滑动式轮播图是怎么实现的？
这篇文章主要为大家详细介绍了js实现从左向右滑动式轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轮播图就是让图片每隔几秒自动滑动，达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的，滑动式的轮播图就是图片从左向右滑入的效果，渐入式的轮播图就是图片根据透明度渐渐显示的效果，这里说的是实现第一种效果的方法。
原理
相同大小的图片并成一列，但只显示其中一张图片，其余的隐藏，通过修改left值来改变显示的图片。
点击查看效果
html部分
nav为总容器，第一个ul列表#index为小圆点列表，鼠标覆盖哪个小圆点就显现第几张图片，on是一个给小圆点添加背景颜色属性的类；第二个ul列表#img为图片列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Figure</title>
<link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<!--从左向右滑动-->
<nav>
<ul id="index">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="img">
<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>css部分
图片尺寸均为720*405，这里需要注意以下几点：
ul#img列表相对于nav是绝对定位的，#img的长度必须设置为所有图片的总宽度，这样图片才可以并列一排显示；
总容器nav的宽度必须设置为图片的宽度720px,即只能显示一张图片，超出宽度的部分隐藏，即overflow: hidden；
小圆点列表应该在图片列表上面显示，故设置#img的z-index：-1；
小圆点列表是由一系列的li通过改变边框样式构成，故只需改变背景颜色即可达到移动小圆点的效果。
*{
margin:0;
padding:0;
}
nav{
width: 720px;
height: 405px;
margin:20px auto;
overflow: hidden;
position: relative;
}
#index{
position: absolute;
left:320px;
bottom: 20px;
}
#index li{
width:8px;
height: 8px;
border: solid 1px gray;
border-radius: 100%;
background-color: #eee;
display: inline-block;
}
#img{
width: 3600px;/*不给宽高无法移动*/
height: 405px;
position: absolute;/*不定义absolute，js无法设置left和top*/
z-index: -1;
}
#img li{
width: 720px;
height: 405px;
float: left;
}
#index .on{
background-color: black;
}JS部分
图片移动函数moveElement()
moveElement函数需要获取图片现在的位置以及目标位置并计算它们之间的差距进行移动，可以用offsetLeft和offsetTop获取图片现在的位置。图片移动时“划过”的效果是将距离分成好10次进行移动，即利用setTimeOut函数，然而为了防止鼠标悬停，需调用clearTimeout()函数，代码如下：
function moveElement(ele,x_final,y_final,interval){//ele为元素对象
var x_pos=ele.offsetLeft;
var y_pos=ele.offsetTop;
var dist=0;
if(ele.movement){//防止悬停
clearTimeout(ele.movement);
}
if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
return;
}
dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
ele.style.left=x_pos+'px';
ele.style.top=y_pos+'px';
ele.movement=setTimeout(function(){//分10次移动，自调用10次
moveElement(ele,x_final,y_final,interval);
},interval)
}小圆点移动函数moveIndex()
移动小圆点的实质是移动设置的背景颜色的类on，原理是先判断哪个li上有背景颜色，有则去掉，让所有的li都没有背景，然后在对当前的li添加背景。
function moveIndex(list,num){//移动小圆点
for(var i=0;i<list.length;i++){
if(list[i].className=='on'){//清除li的背景样式
list[i].className='';
}
}
list[num].className='on';
}图片自动轮播
将以下代码直接写在window.onload中即可。
这里需要定义一个变量index，表示移动到第index（0~n-1，n为li的个数）张图片。
var img=document.getElementById('img');
var list=document.getElementById('index').getElementsByTagName('li');
var index=0;//这里定义index是变量，不是属性
var nextMove=function(){//一直向右移动，最后一个之后返回
index+=1;
if(index>=list.length){
index=0;
}
moveIndex(list,index);
moveElement(img,-720*index,0,20);
};图片的自动轮播需要用到setInterval()函数，让程序每隔几秒自动调用nextMove()函数：
var play=function(){
timer=setInterval(function(){
nextMove();
},2500);
};鼠标覆盖小圆点效果
要实现鼠标覆盖哪个小圆点，就呈现出对应的图片这一效果，需要知道鼠标覆盖的是哪个小圆点，这里给每个li都添加一个自定的属性index，使该属性的值为对应的小圆点的序号i(0~n-1，n为li的个数)，这样每次鼠标覆盖时只需获取index属性的值即可知道鼠标覆盖的是哪个小圆点。注意，该index属性和变量index没有丝毫的关系，只有相同的名字。
for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
list[i].index=i;//这里是设置index属性，和index变量没有任何联系
list[i].onmouseover= function () {
var clickIndex=parseInt(this.index);
moveElement(img,-720*clickIndex,0,20);
index=clickIndex;
moveIndex(list,index);
clearInterval(timer);
};
list[i].onmouseout= function () {//移开后继续轮播
play();
};
}总结
轮播图的实现并不复杂，主要在于将图片的移动行为和小圆点的移动行为分开，这样就比较容易实现。这个轮播图其实还是有点问题的，从最后一幅图滑向第一个时滑动的距离较长，其实也很好解决，将滑动的方式改一下，这里是根据-720*index来计算最终的left值，而index是将图片的移动和小圆点的移动绑到一起，将滑动方式改成现在的offsetLeft+（-720），图片的移动就可以与index值无关，然后在html文件增加一幅图片：
<li><img src="../images/img1.jpg" alt="img1"></li> <li><img src="../images/img2.jpg" alt="img2"></li> <li><img src="../images/img3.jpg" alt="img3"></li> <li><img src="../images/img4.jpg" alt="img4"></li> <li><img src="../images/img5.jpg" alt="img5"></li> <li><img src="../images/img1.jpg" alt="img1"></li>
然后在滑到最后一幅图片时，迅速的将偏移量赋值0，变成第一幅，两幅图一样，无法分辨其中变化，即可达到无缝连接。
if(x_pos==-3600){
ele.style.left='0';
ele.style.top='0';
}else{
ele.style.left=x_pos+'px';
ele.style.top=y_pos+'px';
}Atas ialah kandungan terperinci js中滑动式轮播图是怎么实现的？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei?
Mar 24, 2024 am 11:27 AM
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak
Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci
Mar 20, 2024 pm 04:54 PM
Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei
Mar 24, 2024 pm 06:03 PM
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.
Bagaimana untuk melaksanakan operasi pembahagian yang tepat di Golang
Feb 20, 2024 pm 10:51 PM
Melaksanakan operasi pembahagian yang tepat di Golang adalah keperluan biasa, terutamanya dalam senario yang melibatkan pengiraan kewangan atau senario lain yang memerlukan pengiraan ketepatan tinggi. Operator bahagian terbina dalam Golang "/" dikira untuk nombor titik terapung, dan kadangkala terdapat masalah kehilangan ketepatan. Untuk menyelesaikan masalah ini, kami boleh menggunakan perpustakaan pihak ketiga atau fungsi tersuai untuk melaksanakan operasi pembahagian yang tepat. Pendekatan biasa ialah menggunakan jenis Tikus daripada pakej matematik/besar, yang menyediakan perwakilan pecahan dan boleh digunakan untuk melaksanakan operasi pembahagian yang tepat.
Kuasai cara Golang mendayakan kemungkinan pembangunan permainan
Mar 16, 2024 pm 12:57 PM
Dalam bidang pembangunan perisian hari ini, Golang (bahasa Go), sebagai bahasa pengaturcaraan yang cekap, ringkas dan sangat bersesuaian, semakin digemari oleh pembangun. Perpustakaan standardnya yang kaya dan ciri-ciri konkurensi yang cekap menjadikannya pilihan berprofil tinggi dalam bidang pembangunan permainan. Artikel ini akan meneroka cara menggunakan Golang untuk pembangunan permainan dan menunjukkan kemungkinan besarnya melalui contoh kod tertentu. 1. Kelebihan Golang dalam pembangunan permainan Sebagai bahasa yang ditaip secara statik, Golang digunakan dalam membina sistem permainan berskala besar.
Panduan Pelaksanaan Keperluan Permainan PHP
Mar 11, 2024 am 08:45 AM
Panduan Pelaksanaan Keperluan Permainan PHP Dengan populariti dan perkembangan Internet, pasaran permainan web menjadi semakin popular. Ramai pembangun berharap untuk menggunakan bahasa PHP untuk membangunkan permainan web mereka sendiri, dan melaksanakan keperluan permainan adalah langkah utama. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk melaksanakan keperluan permainan biasa dan menyediakan contoh kod khusus. 1. Cipta watak permainan Dalam permainan web, watak permainan adalah elemen yang sangat penting. Kita perlu mentakrifkan atribut watak permainan, seperti nama, tahap, nilai pengalaman, dll., dan menyediakan kaedah untuk mengendalikannya
Bagaimana untuk mengenal pasti kotak kasut tulen dan palsu bagi kasut Nike (kuasai satu helah untuk mengenal pasti dengan mudah)
Sep 02, 2024 pm 04:11 PM
Sebagai jenama sukan yang terkenal di dunia, kasut Nike telah menarik perhatian ramai. Bagaimanapun, terdapat juga sejumlah besar produk tiruan di pasaran, termasuk kotak kasut Nike palsu. Membezakan kotak kasut tulen daripada yang palsu adalah penting untuk melindungi hak dan kepentingan pengguna. Artikel ini akan memberi anda beberapa kaedah yang mudah dan berkesan untuk membantu anda membezakan antara kotak kasut asli dan palsu. 1: Tajuk pembungkusan luar Dengan memerhatikan pembungkusan luar kotak kasut Nike, anda boleh menemui banyak perbezaan yang ketara. Kotak kasut Nike tulen biasanya mempunyai bahan kertas berkualiti tinggi yang licin untuk disentuh dan tidak mempunyai bau pedas yang jelas. Fon dan logo pada kotak kasut tulen biasanya jelas dan terperinci, dan tiada kabur atau ketidakkonsistenan warna. 2: LOGO tajuk hot stamping LOGO pada kotak kasut Nike biasanya hot stamping Bahagian hot stamping pada kotak kasut tulen akan ditunjukkan
Bagaimana untuk melihat dan mengedit fail SQL
Feb 26, 2024 pm 05:12 PM
Fail SQL ialah fail teks yang biasanya mengandungi satu siri pernyataan SQL. Untuk membuka fail SQL, anda boleh menggunakan editor teks atau alat pembangunan SQL khusus. Cara paling mudah untuk membuka fail SQL ialah dengan editor teks, seperti Notepad atau Notepad++ dalam Windows, atau Editor Teks dalam Mac. Berikut ialah langkah-langkah untuk membuka fail SQL: Mula-mula, cari fail SQL yang anda ingin buka, klik kanan fail dan pilih "Buka dengan". dalam tetingkap pop timbul
