这一版是无上一页下一页功能的,后面有再加的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图实验--无上一页下一页功能</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
}
.banner-lb{
min-width: 1200px;
height: 700px;
background: #74ACCF;
overflow: hidden;
}
.banner-lb #banner_box{
width: 1200px;
height: 600px;
margin: 50px auto;
position: relative;
}
/*轮播图片*/
.banner-lb #banner_box .banner-ula{
width: 100%;
height: 600px;
background: #666666;
}
.banner-lb #banner_box .banner-ula li{
position: absolute;
left: 0;
bottom: 0;
display: none;
width: 1200px;
height: 600px;
}
.banner-lb #banner_box .banner-ula li img{
width: 1200px;
height: 600px;
}
/*点点*/
.banner-lb #banner_box .banner-point{
width: 100px;
height: 30px;
position: absolute;
left: 50%;
margin-left: -50px;
bottom: 0;
}
.banner-lb #banner_box .banner-point li{
float: left;
margin-right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #888888;
}
.banner-lb #banner_box .banner-point .point-bg{
background: red;
}
</style>
</head>
<body>
<div class="banner-lb">
<div id="banner_box">
<ul class="banner-ula">
<li style="display: block;"><img src="images/a.jpg" alt="" ></li>
<li><img src="images/b.jpg" alt=""></li>
<li><img src="images/c.jpg" alt=""></li>
<li><img src="images/d.jpg" alt=""></li>
</ul>
<ul class="banner-point">
<li class="point-bg"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
var boss = 0; //大总管变量
var len = $("#banner_box .banner-ula li").length;
//设置定时器
var timer = setInterval(runImg,1000);
//设置图片切换
function runImg() {
boss++;
if(boss > len-1){
boss = 0;
}
//这里不能直接找img,因为img没有兄弟元素,他被外层的li隔开了
$("#banner_box .banner-ula li").eq(boss).fadeIn(500).siblings().fadeOut(500);
$("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");
}
//鼠标移入清除定时器,移出恢复定时器
$("#banner_box").hover(function () {
clearInterval(timer);
},function () {
timer = setInterval(runImg,1000);
})
//移入小点点后显示相应的图片
$(".banner-point li").mouseenter(function () {
boss = $(this).index();
//换图片
$("#banner_box .banner-ula li").eq(boss).fadeIn(600).siblings().fadeOut(500);
//点点变色
$("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");
})
</script>
</body>
</html>
研究之后加上上一页下一页功能啦---完整版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图完整版</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
}
.banner-lb{
min-width: 1200px;
height: 700px;
background: #74ACCF;
overflow: hidden;
}
.banner-lb #banner_box{
width: 1200px;
height: 600px;
margin: 50px auto;
position: relative;
}
/*轮播图片*/
.banner-lb #banner_box .banner-ula{
width: 100%;
height: 600px;
background: #666666;
}
.banner-lb #banner_box .banner-ula li{
position: absolute;
left: 0;
bottom: 0;
display: none;
width: 1200px;
height: 600px;
}
.banner-lb #banner_box .banner-ula li img{
width: 1200px;
height: 600px;
}
/*点点*/
.banner-lb #banner_box .banner-point{
width: 100px;
height: 30px;
/*overflow: hidden;*/
position: absolute;
left: 50%;
margin-left: -50px;
bottom: 0;
}
.banner-lb #banner_box .banner-point li{
float: left;
margin-right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #888888;
}
.banner-lb #banner_box .banner-point .point-bg{
background: red;
}
/*左右按钮*/
.banner-lb #banner_box .btns{
display: inline-block;
width: 30px;
height: 33px;
background: rgba(0,0,0,0.6);
position: absolute;
top: 50%;
margin-top: -20px;
font-size: 23px;
color: red;
text-align: center;
cursor: default;
z-index: 10;
}
.banner-lb #banner_box .btn-left{
left: 0;
}
.banner-lb #banner_box .btn-rigth{
right: 0;
}
</style>
</head>
<body>
<div class="banner-lb">
<div id="banner_box">
<ul class="banner-ula">
<li style="display: block;"><img src="images/a.jpg" alt="" ></li>
<li><img src="images/b.jpg" alt=""></li>
<li><img src="images/c.jpg" alt=""></li>
<li><img src="images/d.jpg" alt=""></li>
</ul>
<ul class="banner-point">
<li class="point-bg"></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="btns btn-left"><</span>
<span class="btns btn-rigth">></span>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
var boss = 0; //大总管变量
var len = $("#banner_box .banner-ula li").length;
//设置定时器
var timer = setInterval(runImg,2000);
//设置图片切换
function runImg() {
boss++;
if(boss > len-1){
boss = 0;
}
//这里不能直接找img,因为img没有兄弟元素,他被外层的li隔开了
$("#banner_box .banner-ula li").eq(boss).fadeIn(500).siblings().fadeOut(500);
$("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");
}
//鼠标移入清除定时器,移出恢复定时器
$("#banner_box").hover(function () {
clearInterval(timer);
},function () {
timer = setInterval(runImg,2000);
});
//移入小点点后显示相应的图片
$(".banner-point li").mouseenter(function () {
boss = $(this).index();
//换图片
$("#banner_box .banner-ula li").eq(boss).fadeIn(500).siblings().fadeOut(500);
//点点变色
$("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");
});
//左右按钮
$("#banner_box .btn-left").click(function () {
// alert(123);
boss --;
if(boss < 0){
boss = len-1;
}
//换图片
$("#banner_box .banner-ula li").eq(boss).fadeIn(500).siblings().fadeOut(500);
//点点变色
$("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");
});
$("#banner_box .btn-rigth").click(runImg);
</script>
</body>
</html>