2018-07-30

css和js实现最简单的轮播图效果

html代码

• 1


• 2


• 3


• 4

css代码

/* 先取消默认样式 /
a { text-decoration: none; }
ul { list-style-type: none; }
ul, li {
padding: 0;
margin: 0;
}
.banner li {
float: left;
}
.banner img {
width: 600px;
height: 400px;
}
/ relative和absolute用于控制切换按钮位置 /
.banner {
position: relative;
width: 600px;
height: 400px;
margin: auto;
}
.banner ul {
position: absolute;
right: 10px;
bottom: 10px;
}
.banner ul li {margin-left: 5px;}
.banner ul li a {
display: inline-block;
width: 20px;
height: 20px;
background-color: #8c8c8c;
text-align: center;
border-radius: 50%; / 让按钮变圆形 */
color: #FFF
}

js代码

导入jquery库

(document).ready(function(){ // 在一开始绑定a的点击切换轮播图事件(".banner>ul>li>a").click(function(){
banner(this);
return false;
});
bannerRoll();
});
// 用a标签按钮切换轮播图
function banner(obj) { // obj 当前标签
var img = (obj).parent().parent().prev();(img).attr("src", (obj).attr("href")); } var t; // 用于标识定时器 function bannerRoll() { t = setInterval(showPic, 3000); // 设置每三秒调用换图函数换张图 } var x = 0; // 全局变量，记录当前第几张轮播图 function showPic() { // 获取a父标签li的个数，轮流播放 var arr_uls =(".banner>ul");
arr_uls.each(function() { // 遍历ul标签，给它的img换张图
if (x >= (this).children().length) x = 0;(this).prev("img").attr("src", arr_uls.children("li").eq(x).children("a").attr("href"));
});
x++;
}
//鼠标经过盒子时，清除定时
$(".banner").mouseenter( function(){
clearInterval(t);
}).mouseleave( function(){
//鼠标离开盒子时，再次定时
bannerRoll();
});