今早写了一个发布之后，又修改了一下，优化一下代码
html:
<div id="dlunbo">
<!-- 图片 -->
<div id="igs"></div>
<!--按钮 --><div id="tabs"></div>
<!-- 左边按钮 -->
<div class="btn btn1"><</div>
<!--右边按钮 -->
<div class="btn btn2">></div>
</div>
css:
*{
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
#dlunbo{
width: 500px;
height: 333px;
position: relative;
}
#igs .ig,#dlunbo img{
width: 500px;
height: 333px;
}
.ig{
position: absolute;
}
#tabs{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -80px;
}
.tag{
width: 15px;
height: 15px;
border: 1px solid #fff;
float: left;
border-radius: 50%;
margin-right: 5px;
}
.tag:hover{
background: red;
}
.bg{
background: red;
}
.btn{
width: 30px;
height: 40px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 50%;
margin-top: -20px;
color: #fff;
font-size: 25px;
line-height: 40px;
text-align: center;
}
.btn1{
left: 10px;
}
.btn2{
right: 10px;
}
js:
var timer; //定时器的名字
var i = 0;
$(function(){
// 第一个图片显示，其余的图片隐藏,找兄弟元素.siblings().
$(".ig").eq(0).show().siblings().hide();
// 定时器
startLunbo();
// 左点击
$(".btn1").click(function(){
clearInterval(timer);//清除定时器
i--;
var imgs = $(".ig").length;
if(i == -1){
i = imgs-1;
}
// 停止图片轮播
showPicTab();
// 开始轮播
startLunbo();
})
// 右点击
$(".btn2").click(function(){
clearInterval(timer);//清除定时器
i++;
var imgs = $(".ig").length;
if(i == imgs){
i=0;
}
// 停止图片轮播
showPicTab();
// 开始轮播
startLunbo();
})
});
// 封装 停止
function showPicTab(){
// stop() 方法停止当前正在运行的动画。
$(".ig").eq(i).stop(true,true).fadeIn(300).siblings().stop(true,true).fadeOut(300);
$(".tag").eq(i).addClass("bg").siblings().removeClass("bg");
}
// 自动播放
function startLunbo(){
timer = setInterval(function(){
i++;
var imgs = $(".ig").length;
// alert(imgs);
if(i == imgs){
i=0;
}
showPicTab();
},3000);
}
// 写json数据
var img = [
{img: "1.jpg"},
{img: "2.jpg"},
{img: "3.jpg"},
{img: "4.jpg"},
{img: "5.jpg"},
{img: "6.jpg"},
];
window.onload=function(){
igs();
tabs();
$(".tag:first-child").addClass("bg");
//把这段代码拿到这里，因为按钮是js加载进入
// 鼠标经过的时候
$(".tag").hover(function(){
clearInterval(timer);//清除定时器
i = $(this).index(); //获取到当前鼠标放在那个下标的索引
// 停止图片轮播
showPicTab();
},function(){
// 开始轮播
startLunbo();
});
}
// 图片
function igs(){
var igs="<div class='ig-conent'>";
for(var i=0;i<img.length;i++){
igs+="<div class='ig'></img src='images/"+(i+1)+".jpg' alt=''></div>;
}
igs+="</div>";
document.getElementById("igs").innerHTML = igs;
}
// 按钮
function tabs(){
var tabs="<div class='tabs'>";
for(var i=0;i<img.length;i++){
tabs+="<div class='tag'></div>";
}
tabs+="</div>";
document.getElementById("tabs").innerHTML = tabs;
}
