<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ padding:0; margin:0; list-style:none;}
/************************樣式區。原本都打算寫到JS裏面的。不過這玩意改的比較多。新手改CSS沒啥問題我就寫在這了*****************************************/
/* 修改輸出屏大小 */
.banner{/* 修改輸出屏大小 */ width: 100%; height: 300px; overflow: hidden; position: relative; margin-left: auto; margin-right: auto; margin-top:50px;}
.banner .img{width: 99999px; position:absolute; left:0px; top:0;}
.banner .img li{ float:left;}
/*/ 修改圖片大小 /*/
.banner .img img{ width: 550px;}
/*/ 小圓圈 /*/
.banner .num{ position:absolute; width:100%; bottom:10px; left:0; text-align:center; font-size:0px;}
.banner .num li{ width:10px;height:10px; background:#888; border-radius:50%; display:inline-block; margin:0 3px; cursor:pointer;}
.banner .num li.on{ background:#F60;}
/*/ 按鈕 /*/
.banner .btn{ width:30px; height:50px; background:rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; color:#fff; font-size:40px; font-family:"宋體"; display:none;}
.banner:hover .btn{ display:block;}
.banner .btn_l{ left:0;}
.banner .btn_r{ right:0;}
/*/ 第一個輪播 /*/
#ban1 .banner{width: 1000px;height:500px;margin:100px auto; border:5px solid #000; }
#ban1 .banner .img img{width: 1000px;height:500px;}
</style>
</head>
<body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/gdlb.js"></script>
<div id="ban1">
<div class="banner">
<ul class="img">
<li><a href="#"><img src="images/1.png"></a></li>
<li><a href="#"><img src="images/2.png"></a></li>
<li><a href="#"><img src="images/3.png"></a></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
</div>
<div id="ban2">
<div class="banner">
<ul class="img">
<li><a href="#"><img src="images/1.png"></a></li>
<li><a href="#"><img src="images/2.png"></a></li>
<li><a href="#"><img src="images/3.png"></a></li>
<li><a href="#"><img src="images/4.png"></a></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
</div>
</body>
</html>
以下是js文件內容：
//1個是父級名。
$(function(){
imgscrool('#ban1');
imgscrool('#ban2');
})
function imgscrool(obj){
// 控制輪播圖片的寬度和高度大小
var width = document.body.scrollWidth;
// console.log(width);
$('.banner .img img').width(width);
var i=0;
var clone=$(obj+" .banner .img li").first().clone();
$(obj+" .banner .img").append(clone);
var size=$(obj+" .banner .img li").size();
for(var j=0;j<size-1;j++){
$(obj+" .banner .num").append("<li></li>");
}
$(obj+" .banner .num li").first().addClass("on");
/*鼠標劃入圓點*/
$(obj+" .banner .num li").hover(function(){
var index=$(this).index();
i=index;
$(obj+" .banner .img").stop().animate({left:-index*width},500)
$(this).addClass("on").siblings().removeClass("on")
})
/*自動輪播*/
var t=setInterval(function(){
i++;
move();
},2000)
/*對banner定時器的操作*/
$(obj+" .banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move();
},2000)
})
/*向左的按鈕*/
$(obj+" .banner .btn_l").stop(true).delay(800).click(function(){
i--
move();
})
/*向右的按鈕*/
$(obj+" .banner .btn_r").stop(true).delay(800).click(function(){
i++
move()
})
function move(){
if(i==size){
$(obj+" .banner .img").css({left:0})
i=1;
}
// 修改輪播沒屏寬度
if(i==-1){
$(obj+" .banner .img").css({left:-(size-1)*width})
i=size-2;
}
$(obj+" .banner .img").stop(true).animate({left:-i*width},500)
if(i==size-1){
$(obj+" .banner .num li").eq(0).addClass("on").siblings().removeClass("on")
}else{
$(obj+" .banner .num li").eq(i).addClass("on").siblings().removeClass("on")
}
}
} jquery實現圖片輪播圖效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）
絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie