轮播
无缝轮播切图轮播淡入淡出
无缝轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content,img{
width: 200px;
height: 311px;
overflow: hidden;
}
.l{
width: 1000px;
}
img{
float: left;
width: 200px;
height: 311px;
}
</style>
</head>
<body>
<div class="content">
<div class="l">
<img src="img/1.jpeg" alt="">
<img src="img/2.jpeg" alt="">
<img src="img/3.jpeg" alt="">
<img src="img/4.jpeg" alt="">
<img src="img/5.jpeg" alt="">
</div>
</div>
<script>
var l = document.getElementsByClassName("l");
var content = document.getElementsByClassName("content")[0];
content.innerHTML += content.innerHTML;
var num1=0;
function play(){
l[0].style.marginLeft = num1 + "px";
l[0].style.marginLeft == "-1000px"?num1 = 0:"";
num1--;
}
var timer = setInterval(play,10)
content.onmouseover = function(){
clearInterval(timer);
}
content.onmouseout = function(){
timer = setInterval(play,10)
}
</script>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
切图轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>切图式轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 最外层div */
div{
margin: 0 auto;
width: 400px;
position: relative;
}
/* 图片 */
img{
width: 100%;
height: 400px;
}
/* 小圆点 */
p{
position: absolute;
bottom: 20px;
left: 100px;
width: 200px;
display: flex;
justify-content:space-around;
}
span{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 20px;
cursor: pointer;
}
/* 前进，后退 */
.left,.right{
position: absolute;
top: 150px;
line-height: 100px;
text-align: center;
width: 50px;
background-color: rgba(255, 255, 255, .6);
border: 1px solid #000;
}
.left{
left: 0;
}
.right{
right: 0;
}
</style>
</head>
<body>
<div class="content">
<!-- 1为编号 -->
<img src="img/1.jpeg" alt="">
<p>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</p>
<div class="left" onclick="left()"><</div>
<div class="right" onclick="right()">></div>
</div>
<script>
var span = document.getElementsByTagName("span");
var img = document.getElementsByTagName("img")[0];
var content = document.getElementsByClassName("content")[0];
var num;
// 给小圆点添加方法
for(var i =0;i<span.length;i++){
span[i].onclick = function(){
img.src = "img/"+this.innerText+".jpeg";
}
}
// 初始化小圆点样式
span[0].style.backgroundColor = "pink";
// 鼠标进入div停止轮播
content.onmouseover = function(){
clearInterval(timer)
}
// 鼠标移出，开始轮播
content.onmouseout = function(){
timer = setInterval(right,2000);
}
// 下一页和自动轮播方法相同
function right(){
// 给所有小圆点设置默认样式
for(var i = 0;i<span.length;i++){
span[i].style.backgroundColor = "#fff";
}
// 获取当前图片的编号
num = img.src.slice(-6,-5);
// 给对应图片的小圆点设置高亮
num++;
num == 6?num = 1:"";
span[num-1].style.backgroundColor = "pink";
img.src = "img/"+num+".jpeg";
}
var timer = setInterval(right,2000);
// 上一张
function left(){
num = img.src.slice(-6,-5);
num--;
num == 0?num = 5:"";
img.src = "img/"+num+".jpeg";
}
</script>
</body>
</html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>切图式轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 最外层div */
div{
margin: 0 auto;
width: 400px;
position: relative;
}
/* 图片 */
img{
width: 100%;
height: 400px;
/* 做淡入淡出效果 */
opacity: 1;
transition: all 1s;
}
/* 小圆点 */
p{
position: absolute;
bottom: 20px;
left: 100px;
width: 200px;
display: flex;
justify-content:space-around;
}
span{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 20px;
cursor: pointer;
}
/* 前进，后退 */
.left,.right{
position: absolute;
top: 150px;
line-height: 100px;
text-align: center;
width: 50px;
background-color: rgba(255, 255, 255, .6);
border: 1px solid #000;
}
.left{
left: 0;
}
.right{
right: 0;
}
</style>
</head>
<body>
<div class="content">
<!-- 1为编号 -->
<img src="img/1.jpeg" alt="">
<p>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</p>
<div class="left" onclick="left()"><</div>
<div class="right" onclick="right()">></div>
</div>
<script>
var span = document.getElementsByTagName("span");
var img = document.getElementsByTagName("img")[0];
var content = document.getElementsByClassName("content")[0];
var num,count = 0;
// 给小圆点添加方法
for(var i =0;i<span.length;i++){
span[i].onclick = function(){
img.src = "img/"+this.innerText+".jpeg";
}
}
// 初始化小圆点样式
span[0].style.backgroundColor = "pink";
// 鼠标进入div停止轮播
content.onmouseover = function(){
clearInterval(timer)
clearInterval(tim)
}
// 鼠标移出，开始轮播
content.onmouseout = function(){
timer = setInterval(right,2000);
tim = setInterval(dan,1000)
}
// 下一页和自动轮播方法相同
function right(){
// 给所有小圆点设置默认样式
for(var i = 0;i<span.length;i++){
span[i].style.backgroundColor = "#fff";
}
// 获取当前图片的编号
num = img.src.slice(-6,-5);
// 给对应图片的小圆点设置高亮
num++;
num == 6?num = 1:"";
span[num-1].style.backgroundColor = "pink";
img.src = "img/"+num+".jpeg";
}
var timer = setInterval(right,2000);
// 上一张
function left(){
num = img.src.slice(-6,-5);
num--;
num == 0?num = 5:"";
img.src = "img/"+num+".jpeg";
}
function dan(){
count%2 == 0?img.style.opacity = 0.1:img.style.opacity = 1;
count++;
}
// 淡入淡出效果
var tim = setInterval(dan,1000)
</script>
</body>
</html>
