您的位置：首页 > Web前端 > JQuery

Jquery实现幻灯片轮播

2017-09-13 10:42 417 查看

页面代码如下

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 广告图片轮播切换</title>
<link rel="stylesheet" href="css/style.css">
<script src="../../jquery-1.12.4.min.js"></script>
<script src="newjs.js"></script>
</head>
<body>
<div class="adver">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
</html>

CSS样式如下

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "΢���ź�"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
position: absolute;
width: 30px;
background:rgba(0,0,0,0.2);
height: 50px;
line-height: 50px;
text-align: center;
top:200px;
z-index: 150;
font-family: "΢���ź�";
font-size: 28px;
font-weight: bold;
cursor: pointer;
display: block;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
background: orange;
}

JS代码如下，已经加了详细的备注

$(document).ready(function () {
/*鼠标悬浮*/
$("div").mouseover(function () {
/*显示隐藏的左右箭头*/
$(".arrowLeft").css("display","block");
$(".arrowRight").css("display","block");
/*鼠标移开*/
}).mouseout(function () {
/*隐藏显示的左右箭头*/
$(".arrowLeft").css("display","none");
$(".arrowRight").css("display","none");
});

/*设置默认样式*/
/*指定初始化时候第一个按钮是橙色*/
$("li:nth-of-type(1)").css("background","#FF8000");
/*指定除第一个按钮其他所有同胞的样式*/
$("li:nth-of-type(1)").siblings().css("background","#333333");

/*定义保存图片数组*/
var urls=new Array(6);
urls[0]="images/adver01.jpg";
urls[1]="images/adver02.jpg";
urls[2]="images/adver03.jpg";
urls[3]="images/adver04.jpg";
urls[4]="images/adver05.jpg";
urls[5]="images/adver06.jpg";

/*定义遍历变量*/
var i=1;
/*左箭头单击*/
$(".arrowLeft").click(function(){
/*定义判断变量*/
var $num= i;
/*进行判断*/
if($num==1){
alert("已经是第一页啦！");
return;
}
$num--;
/*更换当前图片*/
$(".adver").css("background","url("+urls[$num-1]+")");
/*更改下面按钮的样式*/
$("li:nth-of-type("+$num+")").css("background","#FF8000");
$("li:nth-of-type("+$num+")").siblings().css("background","#333333");
i--;
});

/*右箭头单击*/
$(".arrowRight").click(function(){
/*获取当前所在的页数*/
var $num= parseInt($("li").html());
$num= $num+i;
/*进行判断*/
if($num==7){
alert("已经是最后一页啦！");
return;
}
/*更换当前图片*/
$(".adver").css("background","url("+urls[$num-1]+")");
/*更改下面按钮的样式*/
$("li:nth-of-type("+$num+")").css("background","#FF8000");
$("li:nth-of-type("+$num+")").siblings().css("background","#333333");
i++;
});

/*自动轮播*/
function lunbo() {
/*获取当前所在的页数*/
var $num= parseInt($("li").html());
$num= $num+i;
/*进行判断*/
if($num==7){
/*跳到第一页从头来*/
i-=6;
return;
}
/*更换当前图片*/
$(".adver").css("background","url("+urls[$num-1]+")");
/*更改下面按钮的样式*/
$("li:nth-of-type("+$num+")").css("background","#FF8000");
$("li:nth-of-type("+$num+")").siblings().css("background","#333333");
i++;
}
/*间隔1秒调用一次*/
var bo=setInterval(lunbo,1000);
})

图片就不再上传了，大家自己找几张就可以了，把文件名改一下

下面上预览图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航