溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了js輪播圖實現代碼，供大家參考，具體內容如下
思路：
1、首先要有個盛放圖片的容器，設置為單幅圖片的寬高，且overflow：hidden，這樣保證每次可以只顯示一個圖片
2、Container內有個放圖片的list進行position的定位 ，其中的圖片采用float的方式，同時當圖片進行輪播時，改變list的Left值使得其顯示的圖片發生變化。
3、圖片的輪播使用定時器，通過定時器改變list的Left值是的圖片循環展示
4、當鼠標滑動到圖片上時，清除定時器，圖片停止輪播，當鼠標移出時繼續進行輪播
5、圖片上有一組小圓點用于與當前顯示的圖片相對應，同時可以通過點擊的方式查看對應的圖片
6、圖片可以通過點擊進行左右滑動顯示
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style type="text/css">
.container{
margin:0 auto;
width:600px;
height:400px;
position: relative;
overflow: hidden;
border:4px solid gray;
box-shadow: 3px 3px 5px gray;
border-radius:10px;
}
.list{
width:4200px;
height:400px;
position: absolute;
top:0px;
}
img{
float:left;
width:600px;
height:400px;
}
.dots{
position: absolute;
left:40%;
bottom:30px;
list-style: none;
}
.dots li{
float:left;
width:8px;
height:8px;
border-radius: 50%;
background: gray;
margin-left:5px
}
.dots .active{
background: white;
}
.pre,.next{
position: absolute;
top:40%;
font-size:40px;
color:white;
text-align:center;
background: rgba(128,128,128,0.5);
/* display:none;*/
}
.pre{
left:30px;
}
.next{
right:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="list" >
<img src="img/5.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/1.jpg">
</div>
<ul class="dots">
<li index=1 class="active dot"></li>
<li index=2 class="dot"></li>
<li index=3 class="dot"></li>
<li index=4 class="dot"></li>
<li index=5 class="dot"></li>
</ul>
<div class="pre"><</div>
<div class="next">></div>
</div>
<script type="text/javascript">
var index=1,timer;
function init(){
eventBind();
autoPlay();
}
init();
function autoPlay(){
timer =setInterval(function () {
animation(-600);
dotIndex(true);
},1000)
}
function stopAutoPlay() {
clearInterval(timer);
}
function dotIndex(add){
if(add){
index++;
}
else{
index--;
}
if(index>5){
index = 1;
}
if(index<1){
index = 5;
}
dotActive();
}
function dotActive() {
var dots = document.getElementsByClassName("dot");
var len = dots.length;
for(var i=0 ;i<len ;i++){
dots[i].className = "dot";
}
for(var i=0;i<len;i++){
/*此處可以不用parseInt，當不用全等時*/
if(index === parseInt(dots[i].getAttribute("index"))){
dots[i].className = "dot active";
}
}
}
function eventBind(){
/*點的點擊事件*/
var dots = document.getElementsByClassName("dot");
var len = dots.length;
for(var i=0;i<len;i++){
(function(j){
dots[j].onclick = function(e){
var ind = parseInt(dots[j].getAttribute("index"));
animation((index - ind)*(-600));/*顯示點擊的圖片*/
index = ind;
dotActive();
}
})(i)
}
/*容器的hover事件*/
var con = document.getElementsByClassName("container")[0];
/*鼠標移動到容器上時，停止制動滑動，離開時繼續滾動*/
con.onmouseover = function (e) {
stopAutoPlay();
}
con.onmouseout =function(e){
autoPlay();
}
/*箭頭事件的綁定*/
var pre = document.getElementsByClassName("pre")[0];
var next = document.getElementsByClassName("next")[0];
pre.onclick = function (e) {
dotIndex(false);
animation(600);
}
next.onclick = function (e) {
dotIndex(true);
animation(-600);
}
}
function animation(offset){
var lists = document.getElementsByClassName("list")[0];
var left = parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
if(left<-3000){
lists.style.left = "-600px";
}
else if(left>-600){
lists.style.left = "-3000px";
}
else{
lists.style.left = left+"px";
}
}
</script>
</body>
</html>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
