大家在逛購物商城的時候不知道有沒有注意到商城首頁上面都會有各種輪播廣告，效果非常好，下面小編給大家整理特此分享給大家學習。具體內容如下所示：
1.HTML框架
如下圖,分為三個部分,首先有個div承載,然後一個ul存放圖片,一個ul存放數字,再兩個button即可
<div class="out"> <ul class="img"> <li><img src="img/1.png" alt=""></li> <li><img src="img/2.png" alt=""></li> <li><img src="img/3.png" alt=""></li> <li><img src="img/4.png" alt=""></li> <li><img src="img/5.png" alt=""></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <input class="left btn" type="button" value="<"> <input class="right btn" type="button" value=">"> </div>
2.CSS配置
首先外框div要設置和圖片大小一致,並且居中對齊,position設置為相對定位,因為後面的圖片什麼的都是相對這個大框來絕對定位的
//div外框
.out{
width: 560px;
height: 350px;
margin: 0 auto;
position: relative;
border: 2px solid red;
}
接著設置圖片,五張圖片疊加這個通過absolute這個屬性來實現,因為上面我們把父級容器設置為relative,所以裡面的子元素都是相對父級div來絕對定位的
.img {
list-style-type: none;
}
.img li{
position: absolute;
top:0;
cursor: pointer;
}
接下來的其他元素我會用注釋寫到代碼中
.num{
list-style-type: none;
/*這個屬性會使得text-align失效,所以下面手動寫上寬度即可*/
position: absolute;
width: 100%;
bottom:0;
text-align: center;
}
.num li{
width: 20px;
height: 20px;
/*行高這個屬性使得元素垂直居中*/
line-height: 20px;
text-align: center;
/*inline-block使得所有元素按行排列*/
display: inline-block;
background-color: #4a4a4a;
color: #fff;
border-radius: 50%;
/*鼠標放上去會有小手*/
cursor: pointer;
}
/*鼠標放到圖片上的時候才顯示btn*/
.out:hover .btn{
display: block;
}
.btn{
width: 30px;
height: 50px;
position: absolute;
display: none;
/*通過top和margin來定位屬性到垂直居中*/
top: 50%;
margin-top: -30px;
border: 0;
/*使用rgba可以修改透明度*/
background-color: rgba(0,0,0,.5);
color: #fff;
}
.right{
right: 0;
}
效果如下:
3.jquery控制輪播
實現手動輪播
意思就是鼠標移到下面數字,就顯示對應的圖片
//手動控制輪播圖
$(".img li").eq(0).fadeIn(300);//加載頁面的時候讓第一個圖片顯示
$(".num li").eq(0).addClass("active");//給序號為1的加上紅色背景
$(".num li").mouseover(function () {
//當前的數字顯示紅色背景,其他的數字都隱藏背景
$(this).addClass("active").siblings().removeClass("active");
//當前數字對應的圖片顯示,其他圖片都隱藏
var index = $(this).index();
$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
})
實現自動輪播
//實現自動輪播
var i = 0;//計時器控制數字
var t = setInterval(move,1500);
//該方法顯示與序號對應的圖片
function move() {
if (++i ==5){
i = 0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(300).siblings().stop().fadeOut(300);
}
//鼠標移入後停止自動輪播
$(".out").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(move,1500);
});
實現點擊輪播
//按鈕移動事件
$(".right").click(function () {
move();
});
$(".left").click(function () {
i = i-2;
move();
});
動態控制li數字顯示數量
通過圖片數量控制標簽數量即可
//手動控制li數量
var size = $(".img li").size();
for (var k=1;k<=size;k++){
$(".num").append("<li>"+k+"</li>");
}
$(".num li").eq(0).addClass("active");