<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
<link href="./dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
*{
margin: 0;
padding:0;
}
.show{
border:5px solid #c1c1c1;
margin:100px auto;
width:500px;
height: 200px;
overflow: hidden;
}
.box{
width:400%;
position: relative;
cursor: pointer;;
}
ul{
list-style-type: none;;
}
.box ul li{
float:left;
display: block;
}
</style>
<script>
window.onload=function(){
function $(id){
return document.getElementById(id);
}
var num=0;
function autoplay(){
num--;
$("box").style.left=num+"px";
if(num==-1200){
num=0;
}
}
var int=setInterval(autoplay,10);
$("box").onmouseover=function(){
clearInterval(int);
}
$("box").onmouseout=function(){
int=setInterval(autoplay,10);
}
}
</script>
</head>
<body>
<div class="show">
<div class="box" id="box">
<ul>
<li><img src="./dist/img/banner.png" alt=""/></li>
<li><img src="./dist/img/banner.png" alt=""/></li>
<li><img src="./dist/img/banner.png" alt=""/></li>
<li><img src="./dist/img/banner.png" alt=""/></li>
</ul>
</div>
</div>
</body>
</html>
jqueryは、左の画像をゆっくりと回転させます(マウスを画像に合わせると、カルーセルバージョンが停止します)。
おすすめ
転載: blog.csdn.net/qq_36129701/article/details/82686961
おすすめ
ランキング