html代码,图片请自行准备
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/banner.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script src="js/banner.js" ></script>
</head>
<body style="text-align: center;">
<div class="box">
<ul>
<li>
<a href="#">
<img src="img/b.jpg"/>
</a>
</li>
<li>
<a href="#">
<img src="img/b.jpg"/>
</a>
</li>
<li>
<a href="#"><img src="img/b.jpg"/>
</a>
</li>
</ul>
</div>
<div>
</div>
<!--有些刚接触编程可能不知道,为什么要把js代码放着呢?因为在上面的html加载完之后,js里面的元素才不会为空,若放在html元素之前,
则在js执行的时候,会出现元素不存在的异常,因为html元素还没加载,程序的执行是从上往下执行的,这点不可不查。-->
<script type="text/javascript">
var bannerStyle = {selectedStyle:"selectedStyle",indicatorPosition:"left",dotStyle:"dotStyle",indicatorBoxStyle:"indicatorBoxStyle",buttonStyle:"bannerButtonStyle",showButton:true,automaticSwitch:false,buttonMargin:"30px",delay:500};
banner($(".box"),bannerStyle);
</script>
</body>
</html>
js代码:
//轮播图
function banner(box,bannerStyle){
var liWidth,buttonBox,indicator,leftButton,buttonHieght,rightButton,methodId,liNumber,boxWidth = box.width(),index = 0;
//此处为重点
var cloneObject = box.children("ul").children("li").first().clone();
//此处为重点
box.children("ul").append(cloneObject);
liNumber = box.children("ul").children("li").length;
box.css("width",boxWidth);
box.append("<div><button><</button><button>></button></div>");
box.append("<div></div>");
buttonBox = box.children("div").eq(0).addClass("buttonBoxStyle");
indicator = box.children("div").eq(1).addClass(bannerStyle.indicatorBoxStyle);
leftButton = buttonBox.find("button").eq(0).addClass(bannerStyle.buttonStyle).css("left",bannerStyle.buttonMargin);
rightButton = buttonBox.find("button").eq(1).addClass(bannerStyle.buttonStyle).css("right",bannerStyle.buttonMargin);
buttonHieght = leftButton.height();
buttonBox.css("margin-top",-buttonHieght/2);
box.children("ul").children("li").css("width",boxWidth);
box.children("ul").children("li").children("a").children("img").css("width",boxWidth);
box.css("height",box.children("ul").children("li").children("a").children("img").height());
buttonBox.css("width",boxWidth);
indicator.css("width",boxWidth);
liWidth = box.children("ul").children("li").width();
//添加指示器
for(var a = 0;a<liNumber-1;a++){
indicator.append("<span></span>");
indicator.find("span").eq(a).addClass(bannerStyle.dotStyle);
if(a == 0){
indicator.find("span").eq(0).addClass(bannerStyle.selectedStyle);
}
if(a == liNumber-2){
indicator.find("span").eq(a).css("margin-right","0px");
}
indicator.find("span").eq(a).click(function(){
index = $(this).index();
move();
});
}
if(bannerStyle.indicatorPosition=="left"){
indicator.css("text-align","left");
indicator.css("padding-left","10px");
}else if(bannerStyle.indicatorPosition=="right"){
indicator.css("text-align","right");
indicator.css("padding-right","10px");
}else{
indicator.css("left","0px");
}
leftButton.click(function(){
index--;
move();
});
rightButton.click(function(){
index++;
move();
});
function move(){
//滑动到最左再接着向左滑动的话便进入
if(index == -1){
index = liNumber-2;
box.children("ul").css("left",-(liNumber-1)*liWidth);
}
//滑动到最右再接着向左滑动的话便进入
if(index == liNumber){
box.children("ul").css("left","0px");
index = 1;
}
box.children("ul").stop().animate({left:-index*liWidth},bannerStyle.delay);
//设置指示器
if(index!=liNumber-1){
indicator.children().eq(index).addClass(bannerStyle.selectedStyle).siblings().removeClass(bannerStyle.selectedStyle);
}else{
indicator.children().eq(0).addClass(bannerStyle.selectedStyle).siblings().removeClass(bannerStyle.selectedStyle);
}
}
if(bannerStyle.showButton){
buttonBox.css("visibility","visible");
}else{
buttonBox.css("visibility","hidden");
}
if(bannerStyle.automaticSwitch)
setTime();
function setTime(){
methodId=setInterval(function(){
index++;
move();
},2000);
}
box.hover(function(){
clearInterval(methodId);
if(!bannerStyle.showButton)
buttonBox.css("visibility","visible");
},
function(){
if(bannerStyle.automaticSwitch)
setTime();
if(!bannerStyle.showButton)
buttonBox.css("visibility","hidden");
});
}
css代码:
div,ul,li{
margin: 0px;
padding: 0px;
}
.box{
overflow: hidden;
width: 100%;
height: auto;
display: inline-block;
position: relative;
}
.box>ul>li{
float: left;
position: relative;
}
.box>ul{
width: 99999px;
list-style: none;
position: absolute;
}
/*按钮盒子风格*/
.buttonBoxStyle{
top: 50%;
position: relative;
width: 100%;
z-index: 1;
}
/*buttonStyle*/
.bannerButtonStyle{
border-radius: 50%;
color: white;
position: absolute;
font-size: 26px;
border-style: none;
width: 50px;
height: 50px;
background: rgba(0,0,0,0.4);
}
/*指示器盒子风格*/
.indicatorBoxStyle{
left: 0px;
bottom: 5px;
position: absolute;
}
/*指示器圆点的基础风格*/
.dotStyle{
display: inline-block;
width: 8px;
height: 8px;
margin-right: 10px;
background: orangered;
border-radius: 50%;
border: 1px solid white;
}
/*选中圆点的颜色*/
.selectedStyle{background: #333333;}
效果图:
(功能)
1,可以点击左右或点击圆点切换。
2,鼠标放上去停止滚动。
初学web不久,如有写的不好或者不规范的地方,望不吝赐教,感谢!