JavaScript实现轮播图
1.假设html、css您已经完成，使用JavaScript编写一个简单的轮播图，能实现按下左按钮或者右按钮移动图片即可，不需要无缝轮播。
完整的js轮播，自动轮播，按钮控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
<title>Document</title>
<link rel="stylesheet" href=""/>
<style>
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif;
}
body{
background:#eee;
}
#Bigbox{
width:720px;
height:420px;
border:1px solid #333;
margin:60px auto;
}
#Box{
width:700px;
height:400px;
position:relative;
overflow: hidden;
top:10px;
left:10px;
}
#Ul{
height:400px;
position:absolute;
top:0;
left:0;
}
#Ul li{
width:700px;
height:400px;
float:left;
}
#Left{
width:60px;
height:50px;
border-radius:30%;
background:rgba(96,96,96,.5);
position:absolute;
top:50%;
left:0;
margin-top:-25px;
color:#fff;
line-height:50px;
text-align:center;
cursor:pointer;
font-size:20px;
display:none;
}
#Right{
width:60px;
height:50px;
border-radius:30%;
background:rgba(96,96,96,.5);
position:absolute;
top:50%;
right:0;
margin-top:-25px;
color:#fff;
line-height:50px;
text-align:center;
cursor:pointer;
font-size:20px;
display:none;
}
</style>
</head>
<body>
<div id="Bigbox">
<div id="Box">
<ul id="Ul">
<li>
<img src="img/1.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/2.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/3.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/4.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/5.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/6.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/7.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/8.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/9.jpg" width="100%" height="100%">
</li>
<li>
<img src="img/10.jpg" width="100%" height="100%">
</li>
</ul>
<div id="Left" onselectstart="return false">左</div>
<div id="Right" onselectstart="return false">右</div>
</div>
</div>
<script>
window.onload = function(){
var n = 0;
var timer = null;
var timer1 = null;
var timer2 = null;
var timer3 = null;
var oDiv = document.getElementById('Box')
var oUl = document.getElementById('Ul')
var oLi = oUl.getElementsByTagName('li')
//获取div宽度
var oDivWidth = getStyle(oDiv,'width').split('px')[0] //复制oUl的innerHTML
oUl.innerHTML+= oUl.innerHTML
//设置ul宽度
oUl.style.width = oLi.length*oDivWidth+'px'
//获取ul宽度
var oUlWidth = getStyle(oUl,'width').split('px')[0] //封装获取非行间样式函数
function getStyle(obj,sName){
if(obj.currentStyle){
return obj.currentStyle[sName];
}else{
return getComputedStyle(obj,false)[sName];
}
}
//执行函数
clearInterval(timer3)
timer3 = setInterval(function(){
Run()
},2000)
//封装运动函数
function Run(){
clearInterval(timer)
timer = setInterval(function(){
n-=20;
oUl.style.left = n+'px'
if(n%oDivWidth==0){
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function(){
Run()
},2000)
}
if(n<=-oUlWidth/2){
oUl.style.left = 0;
n=0;
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function(){
Run()
},2000)
}
},30)
}
//鼠标移入停止滚动
oDiv.onmouseover = function(){
Left.style.display = 'block'
Right.style.display = 'block'
clearInterval(timer3)
clearInterval(timer2)
timer2 = setInterval(function(){
if(n%oDivWidth==0){
clearInterval(timer)
clearInterval(timer1)
}
},30)
}
//鼠标移出继续执行
oDiv.onmouseout = function(){
Left.style.display = 'none'
Right.style.display = 'none'
clearInterval(timer3)
clearInterval(timer2)
clearInterval(timer1)
timer1 = setTimeout(function(){
Run()
},2000)
}
//向左
Left.onclick = function(){
//清除所有定时器
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
timer = setInterval(function(){
n-=50;
oUl.style.left = n+'px'
if(n%oDivWidth==0){
clearInterval(timer)
}
if(n<=-oUlWidth/2){
oUl.style.left = 0;
n=0;
}
},30)
}
//向右
Right.onclick = function(){
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
if(n==0){
n=-oUlWidth/2
}
clearInterval(timer)
timer = setInterval(function(){
n+=50;
oUl.style.left = n+'px'
if(n%oDivWidth==0){
clearInterval(timer)
}
},30)
}
}
//哈哈
</script>
</body>
</html>
采用网络路径与jq
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部bootstrap-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!--为了动态引入jq-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#carouselExampleIndicators img {
height: 400px;
}
</style>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://s1.tuchong.com/content-image/201807/b044184145124818f7d26c75e796829f.jpeg" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="http://www.xmlq.com.cn/upload/202005/19/202005191608570280.jpg" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="http://www.xmlq.com.cn/upload/201901/08/201901081431549870.jpg" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="http://www.xmlq.com.cn/upload/201901/08/201901081436187055.jpg" class="d-block w-100" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
参考这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<span id="text"></span>
<div>
<img id="img" alt="">
</div>
<button id="pret">上一张</button>
<button id="next">下一张</button>
</body>
<script>
//图片地址数组。我用的网络图。你可以自行替换
let imgArr = ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2016%2F10%2F1100%2F16sucai_p20161004049_098.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526069&t=254d86f033e2279617c40b2035e57849",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F16%2F10%2F09%2F0257f936320f509.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526146&t=d429d67bd3e56f8f7ff772debe79aff6"
]
let img = document.getElementById("img"); //img标签
let pret = document.getElementById("pret"); //上一个按钮dom
let next = document.getElementById("next"); //下一个按钮dom
let text = document.getElementById("text"); //文字显示
var i = 0;
defaultImg(imgArr, img, i, text);
next.addEventListener("click", () => {
nextFn(imgArr, img)
})
pret.addEventListener("click", () => {
prextFn(imgArr, img)
})
function defaultImg(arr, img, index, text) { //默认的图片 arr-图片数组 。img是图片dom，index-是下标 text-是文字标签dom
img.src = arr[index];
text.innerText = `一共是${arr.length}张，当前是第${index + 1}张`
}
function prextFn(arr) { //上一张
if (i == 0) {
i = arr.length - 1;
img.src = arr[arr.length - 1];//加上这个就是到了第一张，再次点击就回到最后一张，不想要可以注释
text.innerText = `一共是${arr.length}张，当前是第${i + 1}张`
alert("已经是第一张了，在点击就会回到最后一张"); //如果不想这样可以把这三行注释掉
return
}
i--;
img.src = imgArr[i];
text.innerText = `一共是${arr.length}张，当前是第${i}张`
}
function nextFn(arr) { //下一张
if (i == arr.length - 1) {
i = 0;
img.src = arr[0]; //加上这个就是到了最后一张，再次点击就回到第一张，不想要可以注释
text.innerText = `一共是${arr.length}张，当前是第${i + 1}张`
alert("已经是最后一张了，在点击就会回到第一张"); //如果不想这样可以把这三行注释掉
return
}
i++;
img.src = arr[i];
text.innerText = `一共是${arr.length}张，当前是第${i + 1}张`
}
</script>
</html>