插件 :
bootstrap(页面效果) 和 font-awesome (小图标) 和 bxSlider(轮播图)
https://blog.csdn.net/weixin_42100915/article/details/80705624
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.ourter{
width: 790px;
height: 340px;
position: relative;
left: 200px;
top:50px;
}
.ourter:hover .btn{
display: block;
}
img{
position: absolute;
left: 0;
top:0;
list-style: none;
}
.u{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
/*background-color: grey;*/
}
.u li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
}
.btn{
position: absolute;
background-color: grey;
opacity: 0.7;
width: 35px;
height: 60px;
top:50%;
margin-top: -30px;
text-align: center;
line-height: 60px;
color: red;
display: none;
}
.left{
left: 0;
}
.right{
right: 0;
}
.u .active{
!important;
background-color: red;
}
</style>
<body>
<div class="ourter">
<ul class="be">
<li><a href="#"><img src="img/1.jpg"/></a></li>
<li><a href="#"><img src="img/2.jpg"/></a></li>
<li><a href="#"><img src="img/3.jpg"/></a></li>
<li><a href="#"><img src="img/4.jpg"/></a></li>
<li><a href="#"><img src="img/5.jpg"/></a></li>
</ul>
<ul class="u">
<!--<li>1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
</ul>
<div class="left btn" > < </div>
<div class="right btn"> > </div>
</div>
<script src="jquery-3.1.js">
</script>
<script>
var i=0;
var $num=$(".be li").length; // 动态添加标签
for (var s=0;s<$num;s++){
var $ele=$("<li></li>");
$(".u").append($ele);
};
// 手动轮播
$(".u li").eq(0).addClass("active"); // 设置默认样式
$(".u li").mouseover(function () {
i=$(this).index(); // 给i赋值
$(this).addClass("active").siblings().removeClass("active");
// $(".be li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
$(".be li").eq(i).stop().show(1000).siblings().stop().hide(1000);
});
//自动轮播
var c=setInterval(GO_R,1500); // 一定时间执行函数
function GO_R() {
if(i==$num-1){
i=-1;
}
i++; // 根据索引
$(".u li").eq(i).addClass("active").siblings().removeClass("active");
// 改变红点
$(".be li").eq(i).stop().show(1000).siblings().stop().hide(1000);
// 改变图片
}
function GO_L() {
if(i==0){
i=$num;
}
i--;
$(".u li").eq(i).addClass("active").siblings().removeClass("active");
// 改变红点
$(".be li").eq(i).stop().show(1000).siblings().stop().hide(1000);
// 改变图片
}
// 鼠标放到盒子上停止
$(".ourter").hover(function () {
clearInterval(c); // 清除自动轮播
},function () {
c=setInterval(GO_R,1500); // 创建自动轮播
});
// button 定播
$(".right").click(GO_R); // 调用函数
$(
".
left
").
click(
GO_L);
</
script
>
</
body
>
</
html
>