javascript之轮播图效果

来源：互联网发布：php 判断大小编辑：程序博客网时间：2024/06/06 20:15

html部分代码如下：

css部分代码如下：

body,span {
margin: 0;
padding: 0;
}
div.banner {
position: relative;
width: 1226px;
height: 460px;
margin: 0 auto;
overflow: hidden;

}
/*轮播图样式
设置容器,使所有图片在在容器内横向排列。隐藏超出部分。
父元素定位方式为相对定位，子元素均为绝对定位，并设置z-index，让底部按钮与左右按钮显示在图片之上。
通过更改容器的left值来实现轮播图效果。
*/
div.adver{
position: absolute;
z-index: 1;
width: 400%;
height: 100%;

}
div.adver img {
float: left;
}
/*左右样式*/
div.arrows {
position: absolute;
top: 200px;
width: 100%;
z-index: 3;
}
.arrows span {
width: 30px;
border-radius: 10%;
line-height: 50px;
background: #ddd;
text-align: center;
}
.arrows span:hover{
background: #eee;
}
.arrows span:nth-child(1) {
float: left;
}
.arrows span:nth-child(2) {
float: right;
}

/*底部按钮样式*/
div.buttons {
position: absolute;
bottom: 20px;
left: 590px;
z-index: 4;
}
.buttons span {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 50%;
background: #ccc;
text-align: center;
}
.buttons span:hover,.buttons .selected{
background: white;
}

完成css和html之后的显示效果如下图：

接下来，使用JS实现轮播图效果。

// 获取元素
var banner=document.getElementById("banner");
var adver=document.getElementById("adver");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var w=parseInt(getStyle(banner,'width'));
var timer=null;
var index=0; //存储当前图片状态0-3
// 首先，实现点击左右两个按钮切换图片效果，使用ele.style获取元素css样式时，如果在js代码中没有先写入ele.style样式时，是读取不到数据的。使用该方法，想要读取到数据，只能将style设置为内联样式。
// 想要获取内部与外部的css样式，可以使用currentStyle和getComputedStyle方法，以上两种方法只能读取，不能写入。
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
// 定义切换图片函数获取原来left值点击一次之后的left值为newleft 判断newleft值实现最后一张图到第一张，与第一张到第四张的切换
function animate(n){
var left=parseInt(adver.style.left);
var newLeft=left+n;
if(newLeft<-w*3){
newLeft=0;
}
if (newLeft>0) {
newLeft=-w*3;
};
adver.style.left=newLeft+"px";
}
// 给左右两个元素绑定onclick事件
prev.onclick=function(){
index--;
index<0&&(index=3);
animate(w);
buttonShow();
}
next.onclick=function(){
index++;
index>3&&(index=0);
animate(-w);
buttonShow();
}
// 利用定时器实现图片自动切换效果，在鼠标移入显示区域时，动画停止，移出时开始。
function showAuto(){
timer=setInterval(function(){
next.onclick()
},1500)

}
showAuto();
banner.onmouseover=function(){
clearInterval(timer);
timer=null;
}
banner.onmouseout=showAuto;
// 图片移动时底部按钮样式改变。

function buttonShow(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className='selected'){
buttons[i].className='';
}
buttons[index].className='selected';
}
}
//实现点击底部按钮切换图片效果，同样是利用left便宜了来解决，首先，给buttons下的每个span绑定鼠标点击事件。利用for循环绑定事件时，通过测试会发现，输出的i值永远是最后一个i值。这是因为在for循环时，函数并没有执行。在执行函数是，for循环结束，所有获取到的是最后一个i值。让函数直接执行-函数自调.
for(var i=0;i<buttons.length;i++){
(function(i){
buttons[i].onclick=function(){
animate(w*(index-i));
index=i;//更改index为当前图片值
buttonShow();//改变底部样式
}
})(i)
}

阅读全文

0 0