今早寫了一個(gè)發(fā)布之后，又修改了一下，優(yōu)化一下代碼
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; //定時(shí)器的名字
var i = 0;
$(function(){
? ? ? ? // 第一個(gè)圖片顯示，其余的圖片隱藏,找兄弟元素.siblings().
? ? ? ? $(".ig").eq(0).show().siblings().hide();
? ? ? ? // 定時(shí)器
? ? ? ? ?startLunbo();
? ? ? ? ? ?// 左點(diǎn)擊
? ? ? ? ? ?$(".btn1").click(function(){
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(timer);//清除定時(shí)器
? ? ? ? ? ? ? ? ? ? ? ? i--;
? ? ? ? ? ? ? ? ? ? ? ? ?var imgs = $(".ig").length;
? ? ? ? ? ? ? ? ? ? ? ? ?if(i == -1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?i = imgs-1;
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? // 停止圖片輪播
? ? ? ? ? ? ? ? ? ? ? ? ? showPicTab();
? ? ? ? ? ? ? ? ? ? ? ? ? // 開始輪播
? ? ? ? ? ? ? ? ? ? ? ? ? startLunbo();
? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ?// 右點(diǎn)擊
? ? ? ? ? ? ? ?$(".btn2").click(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? clearInterval(timer);//清除定時(shí)器
? ? ? ? ? ? ? ? ? ? ? ? ? ? i++;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var imgs = $(".ig").length;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(i == imgs){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? i=0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 停止圖片輪播
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?showPicTab();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 開始輪播
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?startLunbo();
? ? ? ? ? ? ? ? ? ?})
});
// 封裝 停止
function showPicTab(){
? ? ? ? ? ? ? ?// stop() 方法停止當(dāng)前正在運(yùn)行的動(dòng)畫。
? ? ? ? ? ? ? ?$(".ig").eq(i).stop(true,true).fadeIn(300).siblings().stop(true,true).fadeOut(300);
? ? ? ? ? ? ? ?$(".tag").eq(i).addClass("bg").siblings().removeClass("bg");
}
// 自動(dòng)播放
function startLunbo(){
? ? ? timer = setInterval(function(){
? ? ? ? ? ? ? i++;
? ? ? ? ? ? ? ?var imgs = $(".ig").length;
? ? ? ? ? ? ? ?// alert(imgs);
? ? ? ? ? ? ? ?if(i == imgs){
? ? ? ? ? ? ? ? ? ? ? ? ?i=0;
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? showPicTab();
? ? ? ? ?},3000);
}
// 寫json數(shù)據(jù)
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");
//把這段代碼拿到這里，因?yàn)榘粹o是js加載進(jìn)入
// 鼠標(biāo)經(jīng)過的時(shí)候
$(".tag").hover(function(){
clearInterval(timer);//清除定時(shí)器
i = $(this).index(); //獲取到當(dāng)前鼠標(biāo)放在那個(gè)下標(biāo)的索引
// 停止圖片輪播
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;
}
