js无缝轮播 和淡入淡出轮播
Posted carolavie
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js无缝轮播 和淡入淡出轮播相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul,li{
list-style: none;
}
#banner{
width: 800px;
height: 400px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
#banner>ul{
position: absolute;
}
#banner>ul>li{
float: left;
width: 800px;
height: 400px;
}
#banner>#dir>a{
width: 80px;
height: 40px;
position: absolute;
text-align: center;
line-height: 40px;
text-decoration: none;
color: #fff;
background: rgba(0,0,0,.5);
top: 50%;
margin-top: -20px;
}
#banner>#dir>a:nth-child(2){
right: 0;
}
#btn{
position: absolute;
bottom: 10px;
width: 120px;
left: 50%;
margin-left: -60px;
}
#btn>a{
float: left;
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
margin-left: 10px;
}
#btn>.active{
background: #c33;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
</ul>
<div id="dir">
<a href="##"><</a>
<a href="##">></a>
</div>
<div id="btn">
<a href="##" class="active"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</div>
</body>
</html>
<script src="../../pool.js"></script>
<script>
var oBanner = document.getElementById("banner");
var oUl = document.querySelector("#banner>ul");
var aLi = oUl.getElementsByTagName("li")
var aDir = document.querySelectorAll("#dir>a");
var aBtn = document.querySelectorAll("#btn>a");
var iNow = 0;
var iWidth = aLi[0].offsetWidth;
var li = aLi[0].cloneNode(true);
oUl.appendChild(li);
oUl.style.width = iWidth * aLi.length+"px";
var timer = null;
for(var i=0;i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onmouseover = function(){
for(var j=0;j<aBtn.length;j++){
aBtn[j].className = ""
}
this.className = "active";
iNow = this.index;
toImg();
}
}
aDir[0].onclick = function(){
if(iNow == 0){
iNow = aLi.length-2;
oUl.style.left = -(aLi.length-1)*aLi[0].offsetWidth+"px";
}else{
iNow--;
}
toImg();
}
aDir[1].onclick = function(){
if(iNow == aLi.length-1){
iNow = 1;
oUl.style.left = 0;
}else{
iNow++;
}
toImg();
}
//做轮播图之前一定要先做一个鼠标移入停止轮播 移除继续轮播
oBanner.onmouseover = function(){
clearInterval(timer)
}
oBanner.onmouseout = function(){
autoPlay()
}
autoPlay()
function autoPlay(){
timer = setInterval(function(){
if(iNow == aLi.length-1){
iNow = 1;
oUl.style.left = 0;
}else{
iNow++;
}
toImg();
},3000)
}
//轮播的原理
function toImg(){
move(oUl,{left:-iNow*iWidth})
for(var i=0;i<aBtn.length;i++){
aBtn[i].className = "";
}
aBtn[iNow==aLi.length-1?0:iNow].className = "active";
}
</script>/*
完美运动框架
*/
function move(obj,json,fn){
//防止多次点击 关闭掉上一个定时器
clearInterval(obj.timer);
//开启定时器 obj.timer:防止多个对象抢定时器
obj.timer = setInterval(function(){
//开关门
var bStop = true;
//传入的是一个对象 需要将对象中所有的值进行遍历
for(var attr in json){
/*
因为offset的局限性太大，如果想要这个方法灵活多用只能用获取非行间样式
考虑2点
1、透明度是小数 不能够直接取整需要先*100在取整
2、因为getStyle()获取出来的是字符串 我们需要将它转换为数字
*/
var iCur = 0;
if(attr == "opacity"){
iCur = parseInt(getStyle(obj,attr)*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
/*
因为要做缓存运动，因此需要计算速度 速度是一个不定值
公式： (目标值 - 当前对象的位置) /系数 建议是8
考虑的问题：
计算机处理小数有问题因此需要将小数干掉，我们要进行向上取整和向下取整
*/
//算速度
var speed = (json[attr] - iCur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
/*判断是否都已经到达终点 只要有一个没有到达终点就将bStop为false 循环完毕以后判断bstop来决定关闭定时器*/
if(json[attr] !=iCur){
bStop = false;
}
/*
考虑2部分
1、透明度是不需要加px的因此需要单独判断
2、普通的属性是需要加px的因此需要再次判断
*/
if(attr == "opacity"){
//透明度的兼容性
obj.style.opacity = (iCur+speed)/100;
obj.style.filter = "alpha(opacity:"+(iCur+speed)+")";
}else{
obj.style[attr] = (iCur+speed)+"px";
}
}
//当循环完毕以后 判断bStop的状态来决定是否关闭定时器
if(bStop){
clearInterval(obj.timer);
//链式操作
fn&&fn();
}
},30)
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
#banner {
width: 800px;
height: 400px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
#banner>ul>li {
position: absolute;
width: 800px;
height: 400px;
opacity: 0;
}
#banner>ul>li:nth-child(1) {
opacity: 1
}
#banner>#dir>a {
width: 80px;
height: 40px;
position: absolute;
text-align: center;
line-height: 40px;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, .5);
top: 50%;
margin-top: -20px;
}
#banner>#dir>a:nth-child(2) {
right: 0;
}
#btn {
position: absolute;
bottom: 10px;
width: 120px;
left: 50%;
margin-left: -60px;
}
#btn>a {
float: left;
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
margin-left: 10px;
}
#btn>.active {
background: #c33;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
</ul>
<div id="dir">
<a href="##"><</a>
<a href="##">></a>
</div>
<div id="btn">
<a href="##" class="active"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</div>
</body>
</html>
<script src="js/pool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var aLi = document.querySelectorAll("#banner>ul>li");
//小圆点动态添加
var big_box = document.getElementById("banner");
var btnlist = document.getElementById("btn");
var aUl = document.getElementsByTagName("ul")[0];
var aDir = document.querySelectorAll("#dir>a");
var abtn = document.querySelectorAll("#btn>a");
var iNow = 0;
var iNext = 0;
var timer = null;
aDir[0].onclick = function() {
if(iNext == 0) {
iNext = aLi.length - 1;
} else {
iNext--;
}
toimg();
}
aDir[1].onclick = function() {
if(iNext == aLi.length - 1) {
iNext = 0;
} else {
iNext++;
}
toimg();
}
big_box.onmousemove = function() {
clearInterval(timer);
}
big_box.onmouseout = function() {
autoPlay();
}
autoPlay();
function autoPlay() {
timer = setInterval(function() {
if(iNext == aLi.length - 1) {
iNext = 0;
} else {
iNext++;
}
toimg();
}, 2000)
}
function toimg() {
move(aLi[iNow], {
opacity: 0
})
move(aLi[iNext], {
opacity: 100
})
iNow = iNext;
for(var i = 0; i < abtn.length; i++) {
abtn[i].className = "";
}
abtn[iNext].className = "active";
}
//下面的小圆点
for(var i = 0; i < abtn.length; i++) {
abtn[i].index = i;
abtn[i].onmouseover = function() {
for(var j = 0; j < abtn.length; j++) {
abtn[j].className = "";
}
this.className = "active";
//iNow = iNext;
iNext =this.index;
console.log(iNow);
console.log(iNext);
toimg();
}
}
</script>以上是关于js无缝轮播 和淡入淡出轮播的主要内容，如果未能解决你的问题，请参考以下文章