1：图片无缝连接
实现图片滑动，无缝连接，鼠标放上去图片停止，鼠标拿下来，图片滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
.b {
width: 1600px;
height: 200px;
}
.b > img, .c > img {
width: 400px;
height: 200px;
float: left;
}
.a {
width: 1000px;
height: 200px;
overflow-x: hidden;
overflow-y: hidden;
}
.b, .c {
float: left;
}
.d {
width: 3200px;
height: 200px;
}
</style>
</head>
<body>
<div class="a">
<div class="d">
<div class="b">
<img src="../img/1.jpg" alt=""/>
<img src="../img/2.jpg" alt=""/>
<img src="../img/3.jpg" alt=""/>
<img src="../img/4.jpg" alt=""/>
</div>
<div class="c"></div>
</div>
</div>
<script>
var b = document.getElementsByClassName("b")[0];
var a = document.getElementsByClassName("a")[0];
var c = document.getElementsByClassName("c")[0];
c.innerHTML = b.innerHTML;
var speed=4;
var timer=null
function xianshi(){
timer=setInterval(
function (){
a.scrollLeft-=speed;
if(a.scrollLeft<=0){
a.scrollLeft=1600;
}
},100);
}
a.onmouseenter=function (){
clearInterval(timer);
}//鼠标放上图片停止
a.onmouseleave=function (){
xianshi();//鼠标拿开，图片运动
}
</script>
</body>
</html>
案例二：简单图片轮播
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.b {
position: relative;
width: 600px;
height: 270px;
}
.b > img {
width: 100%;
height: 100%;
}
.dian {
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
text-align: center;
}
.dian > div {
display: inline-block;
border-radius: 50%;
width: 10px;
height: 10px;
height: 10px;
border: 1px solid #fff;
}
.btn {
position: absolute;
width: 100%;
left: 0;
top: 120px;
}
.btn > span {
display: block;
background: #fff;
color: black;
width: 20px;
text-align: center;
}
.btn > span:nth-child(1) {
float: left;
}
.btn > span:nth-child(2) {
float: right;
}
</style>
</head>
<body>
<div class="b">
<img class="imglist" src="../img/1.jpg" alt=""/>
<div class="btn">
<span><</span>
<span>></span>
</div>
<div class="dian">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
var b = document.getElementsByClassName("b")[0];
var imglist = document.getElementsByClassName("imglist")[0];
var dian = document.getElementsByClassName("dian")[0].children;
var btn = document.getElementsByClassName("btn")[0].children;
var num = 1;
dian[num - 1].style.backgroundColor = "red";
var time = null;
//网页加载自动轮播的代码
showInter();
function showInter() {
time = setInterval(function () {
num++;
for (var i = 0; i < dian.length; i++) {
dian[i].style.backgroundColor = "";
}
if (num > 4) {
num = 1;
}
dian[num - 1].style.backgroundColor = "red";
imglist.src = "../img/" + num + ".jpg"
}, 1000)
}
//写鼠标进入和鼠标离开
b.onmouseenter = function () {
clearInterval(time);
}
b.onmouseleave = function () {
showInter();
}
//遍历添加事件 点击左右按钮 发生图片切换 以及点的对应
for (var i = 0; i < btn.length; i++) {
btn[i].index = i;
btn[i].onclick = function () {
if (this.index == 0) {
//left
num--;
if (num < 1) {
num = 4;
}
}
else {
//right
num++;
if (num > 4) {
num = 1;
}
}
imglist.src = "../img/" + num + ".jpg";
for (var i = 0; i < dian.length; i++) {
dian[i].style.backgroundColor = "";
}
dian[num - 1].style.backgroundColor = "red";
}
}
</script>
</body>
</html>
