几种轮播方式

最新推荐文章于 2020-09-01 18:59:36 发布

MengAyu

最新推荐文章于 2020-09-01 18:59:36 发布

阅读量978

点赞数

分类专栏： JS DEMO 文章标签：轮播图

本文链接：https://blog.csdn.net/MengAyu/article/details/103323427

版权

JS DEMO 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

轮播图(完整)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图完整版</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#dv{
border: 1px solid lightgray;
width: 500px;
height: 300px;
margin: 230px auto;
}
#inner{
width: 450px;
height: 250px;
position: relative;
margin: 20px auto;
overflow: hidden;
}
ul{
position: absolute;
width: 3100px;
height: 250px;
}
li{
float: left;
list-style-type: none;
}
img{
width: 450px;
height: 250px;
}
ol{
position: absolute;
top: 210px;
left: 160px;
width: 450px;
height: 30px;
}
ol li{
list-style-type: none;
display: block;
float: left;
width: 25px;
height: 25px;
text-align: center;
background-color: black;
color: white;
z-index: 4;
cursor: pointer;
}
#btn{
display: none;
}
#btn span{
display: block;
position: absolute;
background-color: black;
color: white;
width: 30px;
height: 40px;
cursor: pointer;
text-align: center;
font-size: 30px;
}
#left{
top: 100px;
}
#right{
top: 100px;
left: 420px;
}
</style>
</head>
<body>
<div id="dv">
<div id="inner">
<ul>
<li><img src="../meimei/00_00.jpg" height="419" width="630"/></li>
<li><img src="../meimei/00_01.jpg" height="420" width="630"/></li>
<li><img src="../meimei/00_02.jpg" height="420" width="630"/></li>
<li><img src="../meimei/00_03.jpg" height="419" width="630"/></li>
<li><img src="../meimei/00_04.jpg" height="420" width="630"/></li>
</ul>
<ol>
</ol>
<div id="btn"><span id="left"><</span><span id="right">></span></div>
</div>
</div>

<script src="easy.js"></script>
<script>
//获取大边框
var dv = my$("dv");
//获取相框
var inner = dv.children[0];
//获取相框的宽
var innwid = inner.offsetWidth;
//获取ul
var ulObj = inner.children[0];
//获取ul的宽度
var uuWid = ulObj.offsetWidth;
//获取li
var llObj = ulObj.children;
//获取ol
var olObj = inner.children[1];
//获取图片当前下标
var index = 0;
//添加一个li标签到ul里头
ulObj.appendChild(ulObj.children[0].cloneNode(true));

//设置当鼠标移入按钮时,发生的事件
for (var i = 0; i <llObj.length-1; i++) {
//增加一个新li
var olli = document.createElement("li");
//给这个li赋值
olli.setAttribute("index",i);
//添加进ol里
olObj.appendChild(olli);
//设置olli的内容
olli.innerHTML =i+1;
//设置第一个ol的背景默认颜色为橙色;
olObj.children[0].style.backgroundColor = "orange";
//移入下标上所发生的事件
olli.onmousemove = function(){
//让所有的标签都清除样式
for (var j = 0; j < olObj.children.length; j++) {
//清除样式
olObj.children[j].style.backgroundColor = "";
}
//让选中的按钮变为橙色
this.style.backgroundColor = "orange";
//设置当前选中的下标
index = this.getAttribute("index");
//实行动画效果
animate(ulObj,-index*innwid);
}
};
//设置定时器 让他自动播放
var time = setInterval(click,3000);
//获取左右按钮的大div
var btn = my$("btn");
//左右按钮移入事件
my$("inner").onmousemove = function(){
btn.style.display = "block";
//当鼠标放到图片,他就会清除自动播放
clearInterval(time);
};
//左右按钮的移出事件
my$("inner").onmouseout = function(){
btn.style.display = "none";
//当鼠标移出后就会自动播放
time = setInterval(click,3000)
};
//点击右边按钮所触发的事件
my$("right").onclick = click;
//右边按钮事件
function click(){
//下标开始每次+1
index++;
//如果下标等于图片的数量,那就重新从零开始,位置也从零开始
if (index==llObj.length){
index=0;
ulObj.style.left = 0+"px";
}
//启动动画效果
animate(ulObj,-index*innwid);
//如果下标等于图片的数量长度-1;那么清除他的背景颜色,从零下标开始变为橙色
//其他的颜色全部清零,目前这个下标的颜色为橙色
if (index==llObj.length-1){
olObj.children[olObj.children.length-1].style.backgroundColor="";
olObj.children[0].style.backgroundColor="orange";
}else{
//同上
for (var i = 0;i<olObj.children.length;i++){
olObj.children[i].style.backgroundColor="";
}
olObj.children[index].style.backgroundColor = "orange";
}
}
//点击左边按钮所触发的事件
my$("left").onclick = function(){
//如果下标=0,那就变成5,并且把位置发生改变(一定要添加px);
if (index == 0){
index = 5;
ulObj.style.left = -index*innwid +"px";
}
//每次点击减一次下标,执行动画
index--;
animate(ulObj,-index*innwid);
//把所有的背景颜色清空,把目前选中的背景颜色为橙色;
for (i=0;i<olObj.children.length;i++){
olObj.children[i].style.backgroundColor = "";
}
olObj.children[index].style.backgroundColor = "orange";
};




//设置定时器动画移动按钮 参数为: 对象 和 到达距离
function animate(element,newjuli){
clearInterval(element.ab);
element.ab = setInterval(function () {
//初始距离为 cs
var cs = element.offsetLeft;
//设置每次行驶的距离
var col = 10;
col = cs<newjuli?col:-col;
//如果初始距离大于终点那就平移
cs+=col;
if (Math.abs(cs-newjuli)>Math.abs(col)){
element.style.left = cs+"px";
}else{
clearInterval()
element.style.left = newjuli+"px";
}
},20)
}

</script>
</body>
</html>

无缝链接轮播图

…

Style样式

<style>

*{
margin: 0px;
padding: 0px;
}
div{
/ul的父标签一定要定位/
border: 1px solid red;
width: 200px;
height: 150px;
overflow: hidden;
margin: 300px auto;
position: relative;
}
#uu{
/一定要设置好宽,不能太少/
width: 1200px;
height: 150px;
/ul的标签也需要定位/
position: absolute;
}
li{
list-style-type: none;
float: left;
}
li img{
width: 200px;
height: 150px;
}

HTML代码:

JS代码:

<script src="easy.js"></script>

`
…

左右点击轮播图


## style样式标签

        <style>
*{
margin: 0px;
padding: 0px;
}
#dv{
width: 400px;
height: 300px;
margin: 0 auto;
border:1px solid red ;
margin-top: 300px;
}
#inner{
width: 300px;
height: 200px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
ul{
width: 1550px;
height: 200px;
position: absolute;
}
li{
list-style-type: none;
float: left;
}
img{
width: 300px;
height: 200px;
}
#btn{
display: none;
}
#btn span{
position: absolute;
top: 70px;
display: block;
width: 30px;
height: 50px;
background-color: darkgray;
color: white;
font-size: 50px;
line-height: 50px;
cursor: pointer;
}
#right{
left: 270px;
}
</style>

## HTML代码:

    <div id="dv"> <div id="inner">
<ul>
<li><img src="../meimei/00_00.jpg" /></li>
<li><img src="../meimei/00_01.jpg" /></li>
<li><img src="../meimei/00_02.jpg" /></li>
<li><img src="../meimei/00_03.jpg" /></li>
<li><img src="../meimei/00_04.jpg" /></li>
</ul>
<div id="btn">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>


## JS代码:

    //获取最大的盒子var dv = my$("dv");
//获得相册边框
var inner = dv.children[0];
//获取相册的宽度
var objWid = inner.offsetWidth;
//获取ul标签
var uu = inner.children[0];
//获取ul的宽度
var ulObj = uu.offsetLeft;
//获取左右按钮的盒子 并添加移入移出事件
var btn = my$("btn");
inner.onmousemove = function(){
btn.style.display = "block";
};
inner.onmouseout = function(){
btn.style.display = "none";
};

//设置轮播图按钮点击事件进行移动图片
var index = 0;
//查询li的个数,根据个数来判断点到头,是否点击
var ll = uu.children;
//如果下标大于0,那就据需-1   直到小于或者等于0
my$("left").onclick = function(){
if (index>0){
index--;
console.log(index)
}
};

//如果下标小于li 长度-1  那就继续走
my$("right").onclick = function(){
if (index<ll.length-1){
index++;
animate(uu,-index*objWid);
console.log(index );
}

};


// //设置定时器动画移动按钮 参数为: 对象 和 到达距离
function animate(element,newjuli){
clearInterval(element.ab);
element.ab = setInterval(function () {
//初始距离为 cs
var cs = element.offsetLeft;
//设置每次行驶的距离
var col = 10;
col = cs<newjuli?col:-col;
//如果初始距离大于终点那就平移
cs+=col;
if (Math.abs(cs-newjuli)>Math.abs(col)){
element.style.left = cs+"px";
}else{
clearInterval()
element.style.left = newjuli+"px";
}
},20)
}

简单轮播图

 

## 这是style样式

    <style>(在制作这种轮播图的时候,一定要注意必要的东西必须使用定位,否则没有任何效果)
*{
    margin: 0px;
    padding: 0px;
    }
    #dv{
    vertical-align: middle;
    margin: auto;
    padding: 70px;
    border: 1px solid red;
    width: 300px;
    height: 200px;
    }
    #inner{
    width: 250px;
    height: 180px;
    overflow: hidden;
    }
    #uu{
    width: 1350px;
    position: absolute;
    }
    #uu li{
    list-style-type: none;
    float: left;
    }
    #uu img{
    width: 250px;
    height: 180px;
    }
    #uq{
    margin-left: 30px;
    }
    #uq li{
    margin-top: 10px;
    list-style-type: none;
    float: left;
    border:1px solid black;
    margin-left: 10px;
    width: 20px;
    height: 20px;
    text-align: center;
    cursor: pointer;
    }
</style>

## HTML排列

//一个外面的边框
<div id="dv">
//一个相册边框
<div id="inner">

//要把inner设置一个定位,之后设置ul  添加要轮播的图片,并把id为uu的ul 设为(必须)定位,假如缺了一个,轮播图的位置就不对
<ul id="uu">
<li><img src="../meimei/00_00.jpg" /></li>
<li><img src="../meimei/00_01.jpg" /></li>
<li><img src="../meimei/00_02.jpg" /></li>
<li><img src="../meimei/00_03.jpg" /></li>
<li><img src="../meimei/00_04.jpg" /></li>
</ul>
</div>
//设置uq里面的li时,用到setAttribute 和 getAttribute  两种方式来为li添加自定义属性 为 i;
每次放上去 都会按照这个li的负的(-)自定义属性值*相框的宽度来进行操作
<ul id="uq">
<li class="btn">1</li>
<li class="btn">2</li>
<li class="btn">3</li>
<li class="btn">4</li>
<li class="btn">5</li>
</ul>
</div>

## 这是JS代码(包含自己写的动画方法以及获取对象的简单方法)

<script src="easy.js"></script>
<script>
//获取最外边的div
var dv = my$("dv");
//获取相框div
var inner = dv.children[0];
//获取相框的宽度
var imgWid = inner.offsetWidth;
//获取图片ul
var ulObj = inner.children[0];
//获取点击按钮
var btn = dv.children[1].children;
//设置鼠标移入按钮时所触发的效果
for (i=0;i<btn.length;i++){
btn[i].setAttribute("index",i);
//移入后的效果
btn[i].onmouseover = function(){
this.style.backgroundColor = "red";
var index = this.getAttribute("index");

animate(ulObj , -index*imgWid);
console.log(ulObj +"--"+index + "----"+ imgWid)
};

//移动ul
//移出后的效果
btn[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
// //设置定时器动画移动按钮 参数为: 对象 和 到达距离
function animate(element,newjuli){
clearInterval(element.ab);
element.ab = setInterval(function () {
//初始距离为 cs
var cs = element.offsetLeft;
//设置每次行驶的距离
var col = 10;
col = cs<newjuli?col:-col;
//如果初始距离大于终点那就平移
cs+=col;
if (Math.abs(cs-newjuli)>Math.abs(col)){
element.style.left = cs+"px";
}else{
clearInterval()
element.style.left = newjuli+"px";
}
},20)
}