JavaScript仿商城實現圖片廣告輪播執行個體代碼，javascript圖片廣告

JavaScript仿商城實現圖片廣告輪播執行個體代碼，javascript圖片廣告

大家在逛購物商城的時候不知道有沒有注意到商城首頁上面都會有各種輪播廣告，效果非常好，下面小編給大家整理特此分享給大家學習。具體內容如下所示：

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");

您可能感興趣的文章:

• js實現支援手機滑動切換的輪播圖片效果執行個體
• 原生js和jquery實現圖片輪播淡入淡出效果
• 原生js和jquery實現圖片輪播特效
• JS實現簡易圖片輪播效果的方法
• js實現點擊左右按鈕輪播圖片效果執行個體
• 用box固定長寬實現圖片自動輪播js代碼
• js圖片自動輪播代碼分享(js圖片輪播)
• 簡單的js圖片輪換代碼(js圖片輪播)
• 帶左右箭頭圖片輪播的JS代碼
• 原生javascript實現圖片輪播效果代碼
• js 圖片輪播(5張圖片)