<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 632px;
height: 340px;
margin: 50px auto;
position: relative;
background: url(image/1.jpg) no-repeat;
}
.left{
width: 50px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background-color: #333;
color: white;
position: absolute;
left: 0px;
top: 120px;
cursor: pointer;
opacity: 0.7;
}
.right{
width: 50px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background-color: #333;
color: white;
position: absolute;
top: 120px;
right: 0px;
cursor: pointer;
opacity: 0.7;
}
.menu{
width: 100px;
height: 20px;
display: flex;
justify-content: space-between;
position: absolute;
right: 50px;
bottom: 20px;
}
.menu li{
width: 20px;
width: 20px;
background-color: black;
color: white;
line-height: 20px;
text-align: center;
list-style-type: none;
cursor: pointer;
}
.lm{
width: 100px;
height: 340px;
position: absolute;
left: 0px;
top: 0px;
background-color: #333;
opacity: 0.7;
}
</style>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var arr = ["1.jpg","2.jpg","3.jpg","4.jpg"];
//當前頁面顯示的圖片的下標
var flag = 0;
var interId = 0;
$(function(){
//第一次加載的時候開啓輪播
openLunbo();
//向左箭頭的點擊事件
$(".left").click(function(){
if(flag == 0){
flag = arr.length-1;
}else{
flag--;
}
xiugaiImg();
});
//向右箭頭的點擊事件
$(".right").click(function(){
if(flag == arr.length-1){
flag = 0;
}else{
flag++;
}
xiugaiImg();
});
//鼠標浮動到圖片上關閉輪播 鼠標離開圖片 再次開啓輪播
$(".box").hover(function(){
clearInterval(interId);
},function(){
openLunbo();
});
//菜單欄點擊事件
$(".menu li").click(function(){
var t = $(this).attr("flag");
flag = t;
xiugaiImg()
});
//模擬點擊菜單的第一個選項
$(".menu li:eq(0)").trigger("click");
});
//開啓輪播的方法
function openLunbo(){
interId = setInterval(function(){
if(flag == arr.length-1){
flag = 0;
}else{
flag++;
}
xiugaiImg();
},3000);
}
//每次切換圖片需要修改菜單的樣式
function xiugaiImg(){
$("li[flag="+flag+"]").css({"background-color":"red","color":"white"});
$("li[flag="+flag+"]").siblings().css({"background-color":"black","color":"white"});
//$("#bc").attr("src","image/"+arr[flag]);
//$(".box").animate({"background":"url(image/"+arr[flag]+")"},500);
$(".box").css({"background":"url(image/"+arr[flag]+")"});
}
</script>
</head>
<body>
<div class="box">
<!-- <img src="image/1.jpg" id="bc" /> -->
<div class="left">
<
</div>
<div class="right">
>
</div>
<div class="menu">
<li flag="0">1</li>
<li flag="1">2</li>
<li flag="2">3</li>
<li flag="3">4</li>
</div>
<div class="lm">
</div>
</div>
</body>
</html>
利用JQuery實現圖片輪播實例
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
【CSS基礎篇】——常用屬性
文字的設置 顏色 div{ color: #FF0000; color: red; color: rgb(255,0,0); color: rgba(255,0,0,0.5); } 設置顏色有以