js淡入淡出式轮播（京东轮播图）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淡入淡出式轮播（京东轮播图）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width:590px;
margin: 0 auto;
}
.item li{
list-style: none;
width: 590px;
height: 340px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
img{
width: 100%;
height: 100%;
}
.leftBtn{
width: 20px;
height: 50px;
position: absolute;
left: 0;
top: 130px;
}
.rightBtn{
width: 20px;
height: 50px;
position: absolute;
right: 0;
top: 130px;
}
div{
position: relative;
width: 590px;
height: 340px;
}
.page{
position: absolute;
bottom: 10px;
left: 200px;
height: 30px;
/*width: 300px;*/
}
.page li{
float: left;
width: 30px;
height: 30px;
list-style: none;
background: #ccc;
border-radius: 50%;
line-height: 30px;
text-align: center;
cursor:pointer;
}
</style>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/animateBak.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<ul class="item">
<li style="opacity: 1;"><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul>
<button class="rightBtn">></button>
<button class="leftBtn"><</button>
<ul class="page">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
var rightBtn =document.querySelector('.rightBtn');
var oImg = document.querySelectorAll('.item li');
// console.log(oImg[0])
//先将页数为0，从第一张开始
var pageName = 0;
//调用数字列表显示样式的函数
changeColor(pageName);
//给右按钮添加点击事件
rightBtn.onclick = function(){
//使轮播图隐藏
animate(oImg[pageName],{opacity:0});
console.log(oImg[pageName]);
pageName++;//页数加1 ，页数++必须写在这两个animate中间（先让上一张图片隐藏再让下一张图片显示出来）
//当页数为5的时候，也就是滚动到了第6张，图片已经没有了
if(pageName == 5){
pageName = 0;//这个时候让页数从0（第一张继续开始）
}
changeColor(pageName);
animate(oImg[pageName],{opacity:1});//使图片显示出来
}
var leftBtn = document.querySelector('.leftBtn');
leftBtn.onclick = function(){//给左侧大按钮添加点击事件
animate(oImg[pageName],{opacity:0});//左侧同右侧
pageName--;
changeColor(pageName);
if(pageName == -1){
pageName = 4;
}
changeColor(pageName);
animate(oImg[pageName],{opacity:1});
}
var timer = setInterval(function(){//设定一个定时器，每隔两秒钟调用一次右侧点击函数
rightBtn.onclick();
},2000);
var box = document.querySelector('.box');
box.onmouseenter = function(){//当鼠标划入的时候，让定时器停止
clearInterval(timer);
}
box.onmouseleave = function(){//当鼠标划出的时候让定时器继续
timer = setInterval(function(){//注意：timer前面不能用var关键字，用了之后就和上面全局变量重名
rightBtn.onclick();
},2000);
}
function changeColor(name){//更改数字列表的颜色
var pages = document.querySelectorAll('.page li');
for(var i = 0; i < pages.length;i++){//遍历出所有的li，
pages[i].style.background = '#ccc';//一开始颜色为#ccc
}
pages[name].style.background = '#ff0';//改变后颜色为#ff0
}
//给数字列表小圆点加点击事件
var oPages = document.querySelectorAll('.page li')
for(let i=0;i<oPages.length;i++){ //遍历出所有的li
oPages[i].onclick = function(){//给每个li添加点击事件
console.log(i);
for(let j=0;j<oImg.length;j++){//循环遍历出所有放的图片的li
animate(oImg[j],{opacity:0})//先让它隐藏
}
animate(oImg[i],{opacity:1});//然后点击哪个小圆点让相对应的图片显示出来
pageName = i;//因为点击小圆点改变了页码，页码是可以被改变的，把页码设为i，必须得加上
changeColor(pageName);
}
}
</script>
</body>
</html>js无缝轮播（淘宝轮播图）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝轮播（淘宝轮播图）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.item{
width: 3950px;
height: 340px;
position: absolute;
left: 0;
top:0;
}
.item li{
list-style: none;
width: 590px;
height: 340px;
float: left;
}
img{
width: 100%;
height: 100%;
}
.leftBtn{
width: 20px;
height: 50px;
position: absolute;
left: 0;
top: 130px;
}
.rightBtn{
width: 20px;
height: 50px;
position: absolute;
right: 0;
top: 130px;
}
div{
position: relative;
width: 590px;
height: 340px;
overflow: hidden;
}
.page{
position: absolute;
bottom: 10px;
left: 200px;
height: 30px;
/*width: 300px;*/
}
.page li{
float: left;
width: 30px;
height: 30px;
list-style: none;
background: #ccc;
border-radius: 50%;
line-height: 30px;
text-align: center;
cursor:pointer;
}
</style>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/animateBak.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<ul class="item">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<button class="rightBtn">></button>
<button class="leftBtn"><</button>
<ul class="page">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
var item = document.querySelector('.item');
var oImg = document.querySelectorAll('.item img');
var rightBtn = document.querySelector('.rightBtn');
var page = 0;//先让page设为0；从第一张照片开始
changeColor(page)
rightBtn.onclick = function(){ //给右按钮添加点击事件
page++;
if(page == 6){//当page为6的时候也就是轮播到第7张图片，没有7张图片
page = 1;//这是图片从第二张图片开始，因为在第五张图片之后又加入了第一张图片，为了实现和前面一样的效果
item.style.left = 0;//这时把item的left设为0；瞬间把 ul拉回来拉到还显示第一张图片
}
if(page == 5){//当page为5的时候改变数字列表中0的样式
changeColor(0)
}else{
changeColor(page);//否则就改变它相对应的页码的样式
}
animate(item,{left:-page*590});//每page++，把item的left向左移-page*590；图片的宽度是590；
}
var leftBtn = document.querySelector('.leftBtn');
leftBtn.onclick = function(){//左按钮同右按钮
page--;
if(page == -1){
page = 4;
item.style.left = -590*5+'px';
}
if(page == -1){
changeColor(5)
}else{
changeColor(page);
}
animate(item,{left:-page*590});
}
var timer = setInterval(function(){//设定一个定时器，每隔1秒钟调用一次右侧点击函数
rightBtn.onclick ();
},1000)
var box = document.querySelector('.box');
box.onmouseenter = function(){//当鼠标划入的时候，让定时器停止
clearInterval(timer);
}
box.onmouseleave = function(){//当鼠标划出的时候让定时器继续
timer = setInterval(function(){//timer此时用的是全局变量，不能加var关键字，如果加了变量就和全局变量重名，导致出错
rightBtn.onclick ();
},1000);
}
//给小圆点添加点击事件
var oList = document.querySelectorAll('.page li');
for(let i = 0; i < oList.length; i++){//遍历出所有的li
oList[i].onclick = function(){//给所有的li添加点击事件
page = i; //使page为i，因为点击li的时候，改变了页码page的值
animate(item,{left:-i*590});//改变item的left为-i*590；点击了第i个让相应的图片显示出来
changeColor(page)
}
}
//给小圆点变颜色
function changeColor(name){//更改数字列表小圆点的颜色
var oList = document.querySelectorAll('.page li');
for(let i = 0; i < oList.length; i++){//循环遍历出所有的小圆点
oList[i].style.background = '#ccc';
}
oList[name].style.background = '#ff0';
}
</script>
</body>
</html>
上面代码引入的js文件
common.js内容如下
function getStyle(ele) {
if(ele.currentStyle){
return ele.currentStyle;
}else{
return getComputedStyle(ele,null);
}
}animateBak.js的内容如下
function animate(div,obj) {
//console.log(cb)
//{left:100;top:200}
//{left:100}
//{left:100}
clearInterval(div.timer);
div.timer = setInterval(function () {
var flag = true;//假设已经到了目的地
//1-0.5
//100 50
for(var key in obj){
// console.log(key)//left top getStyle['left']
// console.log(obj[key])//300
var target = obj[key];
if(key == 'opacity'){
var speed = (target - parseFloat(getStyle(div)[key]))*100/8;
// console.log(speed,'speed1')
speed = (speed>0? Math.ceil(speed): Math.floor(speed));
//console.log(speed,'speed2')
var op = parseFloat(getStyle(div)[key]) + speed/100;
// console.log(op)
div.style[key]= op;
if(parseFloat(getStyle(div)[key]) !=target ){
flag = false;
}
}else{
var speed = (target - parseInt(getStyle(div)[key]))/8;
speed = (speed>0? Math.ceil(speed): Math.floor(speed));
div.style[key]= parseInt(getStyle(div)[key]) + speed +'px';
if(parseInt(getStyle(div)[key]) !=target ){
flag = false;
}
}
}
//必须等到所有的 属性都到达目的地 才能结束定时器
if(flag == true){
clearInterval(div.timer);
}
},30);
}