快捷導(dǎo)航

JavaScript仿商城實(shí)現(xiàn)圖片廣告輪播實(shí)例代碼

更新時(shí)間：2016年02月06日 15:44:49 作者：茶飲月

大家在逛購(gòu)物商城的時(shí)候不知道有沒有注意到商城首頁(yè)上面都會(huì)有各種輪播廣告，效果非常好，下面小編給大家整理特此分享給大家學(xué)習(xí)

大家在逛購(gòu)物商城的時(shí)候不知道有沒有注意到商城首頁(yè)上面都會(huì)有各種輪播廣告，效果非常好，下面小編給大家整理特此分享給大家學(xué)習(xí)。具體內(nèi)容如下所示：

1.HTML框架

如下圖,分為三個(gè)部分,首先有個(gè)div承載,然后一個(gè)ul存放圖片,一個(gè)ul存放數(shù)字,再兩個(gè)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要設(shè)置和圖片大小一致,并且居中對(duì)齊,position設(shè)置為相對(duì)定位,因?yàn)楹竺娴膱D片什么的都是相對(duì)這個(gè)大框來絕對(duì)定位的

//div外框
.out{
width: 560px;
height: 350px;
margin: 0 auto;
position: relative;
border: 2px solid red;
}

接著設(shè)置圖片,五張圖片疊加這個(gè)通過absolute這個(gè)屬性來實(shí)現(xiàn),因?yàn)樯厦嫖覀儼迅讣?jí)容器設(shè)置為relative,所以里面的子元素都是相對(duì)父級(jí)div來絕對(duì)定位的

.img {
list-style-type: none;
}
.img li{
position: absolute;
top:0;
cursor: pointer;
}

接下來的其他元素我會(huì)用注釋寫到代碼中

.num{
list-style-type: none;
/*這個(gè)屬性會(huì)使得text-align失效,所以下面手動(dòng)寫上寬度即可*/
position: absolute;
width: 100%;
bottom:0;
text-align: center;
}
.num li{
width: 20px;
height: 20px;
/*行高這個(gè)屬性使得元素垂直居中*/
line-height: 20px;
text-align: center;
/*inline-block使得所有元素按行排列*/
display: inline-block;
background-color: #4a4a4a;
color: #fff;
border-radius: 50%;
/*鼠標(biāo)放上去會(huì)有小手*/
cursor: pointer;
}
/*鼠標(biāo)放到圖片上的時(shí)候才顯示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控制輪播

實(shí)現(xiàn)手動(dòng)輪播

意思就是鼠標(biāo)移到下面數(shù)字,就顯示對(duì)應(yīng)的圖片

//手動(dòng)控制輪播圖
$(".img li").eq(0).fadeIn(300);//加載頁(yè)面的時(shí)候讓第一個(gè)圖片顯示
$(".num li").eq(0).addClass("active");//給序號(hào)為1的加上紅色背景
$(".num li").mouseover(function () {
//當(dāng)前的數(shù)字顯示紅色背景,其他的數(shù)字都隱藏背景
$(this).addClass("active").siblings().removeClass("active");
//當(dāng)前數(shù)字對(duì)應(yīng)的圖片顯示,其他圖片都隱藏
var index = $(this).index();
$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
})

實(shí)現(xiàn)自動(dòng)輪播

//實(shí)現(xiàn)自動(dòng)輪播
var i = 0;//計(jì)時(shí)器控制數(shù)字
var t = setInterval(move,1500);
//該方法顯示與序號(hào)對(duì)應(yīng)的圖片
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);
}
//鼠標(biāo)移入后停止自動(dòng)輪播
$(".out").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(move,1500);
});

實(shí)現(xiàn)點(diǎn)擊輪播

//按鈕移動(dòng)事件
$(".right").click(function () {
move();
});
$(".left").click(function () {
i = i-2;
move();
});

動(dòng)態(tài)控制li數(shù)字顯示數(shù)量

通過圖片數(shù)量控制標(biāo)簽數(shù)量即可

//手動(dòng)控制li數(shù)量
var size = $(".img li").size();
for (var k=1;k<=size;k++){
$(".num").append("<li>"+k+"</li>");
}
$(".num li").eq(0).addClass("active");

您可能感興趣的文章: