最近学了网页多张图片的轮播，图片轮播对于大多数网页来说是必不可少的。
要实现的效果是：按下前、后按钮，显示的图片改变，按下 1 2 3 4 按钮会显示对应的图片，当鼠标移到图片外面，图片在每隔一定时间就变成另一张。
大概思路：
1.创建ul下4个li标签放到div标签，li标签里面放img标签，用于存放照片，创建另外1个ul下四个li标签放到同个div标签里，用于做底部的按钮。
<div id="slider">
<ul id="list">
<li id='item'><img src="./imgs/1.jpg" alt=""</li>
<li id='item'><img src="./imgs/2.jpg" alt=""</li>
<li id='item'><img src="./imgs/3.jpg" alt=""</li>
<li id='item'><img src="./imgs/4.jpg" alt=""</li>
</ul>
<button type="button" class="prev">prev</button>
<button type="button" class="next">next</button>
<ul id="block">
<li class="bullet focus">1</li>
<li class="bullet">2</li>
<li class="bullet">3</li>
<li class="bullet">4</li>
</ul>
</div>然后给个个标签加上CSS样式
把ul标签的默认样式去掉
ul{
list-style: none;
} #slider{//设置DIV样式
width: 700px;
height: 330px;
border: 5px solid red;
position: relative;
}
#slider #list #item{ //设置存照片的li的样式
position: absolute;
left: 70px;
top:50px;
opacity: 0;//透明度设为0
}
#slider #list #item:first-of-type{
opacity: 1;//第一张图片的透明度设为1，这样全部图片就只显示第一张。
}
#slider .prev, #slider .next{//设置“下一张”按钮的样式
position: absolute;
top: 150px;
}
#slider .next{
right:0;//right设为0，将“下一张”按钮放到DIV右边框左边缘
}
#block .bullet{//设置4个按钮块的样式
width: 50px;
height: 50px;
margin-left: 5px;
position: relative;
border: 2px solid #000000;
float: left;
top: 300px;
left: 250px;
cursor: pointer; /*光标放上去会变成一只手*/
line-height: 50px;
text-align: center;
}
#block .bullet.focus{//设置选中的按钮块样式
background-color: #FF0000;
}做好这些准备后，接下来就是写JS代码实现轮播。
在此之前，要先屡清楚，想让JS代码实现什么？ 实现图片的转换，就是点击按钮要显示对应的图片，实质是将要显示的图片的透明度置为1，将当前的图片透明度置为0。
先定义一个函数，用来获取到保存图片的标签的样式（浏览器兼容性问题）
function getStyle(el, property){//el为标签对象，property为el对应style的属性
if(getComputedStyle){
return getComputedStyle(el)[property];
}else{
return el.currentStyle[property];
}
}接下来写让图片显示和消失（opacity=0||1）的函数
function animate(el, properties ){//el为标签对象，properties对象有多个修改el标签style的属性
clearInterval(el.timerId);// 清除定时器，防止重复调用造成的元素越来越快
el.timerId = setInterval(function(){//定义一个定时调用的函数
for(var property in properties){遍历properties的属性
var current = null;
var target = properties[property];//获取要修改的property；
if(property === 'opacity'){//如果属性是opacity就将当前的opacity值扩大100倍，方便运算（opacity取值只在0到1之间）
current = Math.round(parseFloat(getStyle(el,'opacity'))*100);
}else{//要修改的属性不是opacity
current = parseInt(getStyle(el,property));
}
var speed = (target - current) /30;//设置变化的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//设置这条语句是为了避免speed在-1到1以内直接变为0
if(property === 'opacity'){
el.style.opacity = (current + speed) / 100;
}else{
el.style[property] = current + speed + 'px';
}
}
},20)
}完成这部分JS代码后，我们来实现按按钮实现图片的转换：
创建一个立即执行函数(function(){})()
首先我们要有变量来保存当前图片和下一张图片：prevIndex, nextIndex，保存有多少张照片的变量：len
var prevIndex, nextIndex，len;接下来写图片变换的函数slidePrev()，slideNext()，slideTo(prev , next)
function slideNext(){
prevIndex = nextIndex;
nextIndex++;
if(nextIndex === len ){
nextIndex = 0;
}
slideTo(prevIndex, nextIndex);
}function slidePrev(){
prevIndex = nextIndex;//记录当前照片
nextIndex--;//next索引指向上一张照片
if(nextIndex === -1 ){如果索引超出第一张照片，就转到最后一张
nextIndex =len-1;
}
slideTo(prevIndex, nextIndex);
}function slideTo(prev , next){
var lis = document.querySelectorAll('#list #item');//获取所有存照片的li标签
animate(lis[prev],{opacity:0});//将存当前照片的li标签透明度设为0
animate(lis[next],{opacity:100});//将存要显示的照片的li标签透明度设为1
}然后在立即执行函数定义函数 init()，用来执行点击prev、next按钮的操作
function init(){
prevIndex = nextIndex = 0;//初始化照片的定位，当前为第一张
len = document.querySelectorAll('#list #item').length;
//上一张图片
document.querySelector('.prev').onclick = function(){
slidePrev();
}
//上一张图片
document.querySelector('.next').onclick = function(){
slideNext();
}
}接下来实现点击小方块显示对应图片：效果是点击对应方块会变色，并且显示对应照片；上面我们已经将第一个小方块的classname设为bullet focus，只要将点击的方块的classname设为bullet focus，然后其他小方块classname设为bullet就行了。在init（）函数内添加代码：
var bullets = document.querySelectorAll('#block .bullet');//获取全部小方块
//点击方框切换图片
for(var i=0;i<bullets.length;i++){//遍历所有小方块
bullets[i].index = i;//记录小方块对应的图片
bullets[i].onclick = function(){//点击后执行slideTo函数，显示点击小方块对应的图片
prevIndex = nextIndex;
nextIndex = this.index;
slideTo(prevIndex,nextIndex);
}
}然后要在slideTo（）函数中处理点击后将点击的小方块设为选中：
var bullets = document.querySelectorAll('#block .bullet');
bullets[prev].className = 'bullet';//取消当前的小方块的焦点
bullets[next].className = 'bullet focus';设置点击的小方块为焦点设置完后基本功能就实现了，就差自动轮播效果：
var id;
function auto(){
clearInterval(id);
id = setInterval(function(){
slideNext();
},2000)
}
function stop(){
clearInterval(id);
}实现自动轮播的功能，之后在init（）函数中调用auto（）就行了，此外我们可以实现鼠标停在图片上停止轮播，移出图片后轮播，在init()中添加
var slider = document.querySelector('#slider');
slider.onmouseover = function(){
stop();
}
var cu=0;
slider.onmouseout = function(){
auto();
}
//自动轮播
auto();至此，所有功能全部实现。
轮播.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#slider{
width: 700px;
height: 330px;
border: 5px solid red;
position: relative;
}
#slider #list #item{
position: absolute;
left: 70px;
top:50px;
opacity: 0;
}
#slider #list #item:first-of-type{
opacity: 1;
}
#slider .prev, #slider .next{
position: absolute;
top: 150px;
}
#slider .next{
right:0;
}
#block .bullet{
width: 50px;
height: 50px;
margin-left: 5px;
position: relative;
border: 2px solid #000000;
float: left;
top: 300px;
left: 250px;
cursor: pointer; /*光标放上去会变成一只手*/
line-height: 50px;
text-align: center;
}
#block .bullet.focus{
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="slider">
<ul id="list">
<li id='item'><img src="./imgs/1.jpg" alt=""</li>
<li id='item'><img src="./imgs/2.jpg" alt=""</li>
<li id='item'><img src="./imgs/3.jpg" alt=""</li>
<li id='item'><img src="./imgs/4.jpg" alt=""</li>
</ul>
<button type="button" class="prev">prev</button>
<button type="button" class="next">next</button>
<ul id="block">
<li class="bullet focus">1</li>
<li class="bullet">2</li>
<li class="bullet">3</li>
<li class="bullet">4</li>
</ul>
</div>
<script src="animate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function (){
var prevIndex, nextIndex;
var len;
var id;
init();
function init(){
prevIndex = nextIndex = 0;
len = document.querySelectorAll('#list #item').length;
//上一张图片
document.querySelector('.prev').onclick = function(){
slidePrev();
}
//上一张图片
document.querySelector('.next').onclick = function(){
slideNext();
}
var bullets = document.querySelectorAll('#block .bullet');
//点击方框切换图片
for(var i=0;i<bullets.length;i++){
bullets[i].index = i;
bullets[i].onclick = function(){
prevIndex = nextIndex;
nextIndex = this.index;
slideTo(prevIndex,nextIndex);
}
}
var slider = document.querySelector('#slider');
slider.onmouseover = function(){
stop();
}
var cu=0;
slider.onmouseout = function(){
auto();
cu++;
console.log(cu);
}
//自动轮播
auto();
}
function slidePrev(){
prevIndex = nextIndex;
nextIndex--;
if(nextIndex === -1 ){
nextIndex =len-1;
}
slideTo(prevIndex, nextIndex);
}
function slideNext(){
prevIndex = nextIndex;
nextIndex++;
if(nextIndex === len ){
nextIndex = 0;
}
slideTo(prevIndex, nextIndex);
}
function slideTo(prev , next){
var bullets = document.querySelectorAll('#block .bullet');
var lis = document.querySelectorAll('#list #item');
bullets[prev].className = 'bullet';
bullets[next].className = 'bullet focus';
animate(lis[prev],{opacity:0});
animate(lis[next],{opacity:100});
}
function auto(){
clearInterval(id);
id = setInterval(function(){
slideNext();
},2000)
}
function stop(){
clearInterval(id);
}
})()
</script>
</body>
</html>
8570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
