span ++ 改变 func fadein red int tom lis
jQuery 轮播图鼠标移入停止,移出播放,点击小横条切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner</title>
</head>
<style>
.banner {
min-width: 1200px;
min-height: 350px;
position: relative;
}
.banner-img {
position: relative;
}
.banner img {
width: 100%;
height: auto;
position: absolute;
}
.banner-ul {
list-style: none;
display: flex;
z-index: 5;
position: absolute;
bottom: 21px;
left: 50%;
transform: translateX(-50%);
}
.banner-ul li {
width: 80px;
height: 11px;
background-color: #fff;
margin-right: 15px;
}
.banner .banner-active{
background-color: red;
}
.banner1,.banner2{
display:none;
}
</style>
<body>
<div class="banner">
<div class="banner-img">
<img src="img/banner0.png" alt="轮播图">
<img class="banner1" src="img/banner1.png" alt="轮播图">
<img class="banner2" src="img/banner2.png" alt="轮播图">
</div>
<ul class="banner-ul">
<li class="banner-active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
// 轮播图
var i = 0;
function autoPlay() { //自动播放暂停
function play() {//play函数-begin
i++;
if (i > 2) {
i = 0;
}
$('.banner-img img').eq(i).fadeIn(1000).siblings().fadeOut(1000);
//改变下面三条横杠状态
$(".banner-ul li").eq(i).CSS(
"background", "red"
).siblings().css(
"background", "#fff"
)
} //play函数-end
setplay = setInterval(play, 3000);
}
autoPlay();
//鼠标移进移出轮播暂停和启动
$(".banner").hover(function() {
clearInterval(setplay);
}, autoPlay);
//点击小长条方框 图片切换
$(".banner-ul li").click(function() {
$(this).css(
"background", "red"
).siblings().css(
"background", "#fff"
)
var index = $(this).index();
$(".banner-img img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
});
})
// 监听浏览器窗口大小发生变化时,改变banner的高度
//用来处理banner下的ul定位用
window.onresize = function() {
var bannerImgHeight = $('.banner-img img').css('height');
var y = $('.banner').css("height", bannerImgHeight);
}
//f5刷新页面后定位
var bannerImgHeight = $('.banner-img img').css('height');
var y = $('.banner').css("height", bannerImgHeight);
</script>
</html>
来源: http://www.bubuko.com/infodetail-2459501.html