圖片輪播的實現：HTML+CSS+ JavaScript

片輪播的實現：HTML+CSS+ JavaScript

用到的技術：HTML+CSS+ JavaScript；

操作步驟：

1. 首先制作一個html頁面，代碼如下

<body>

<ul>

</li>

</ul>

</div>

</body>

2.用CSS做好背景和圖片，

#play{width:500px;height:230px; border:#ccc 1px solid;}

#playBg{margin-top:200px;z-index:1;filter:alpha(opacity=70);opacity:0.7;width:500px;position:absolute;height:30px;background:#000;}

#playText{margin-top:200px;z-index:2;padding-left:10px;font-size:14px;font-weight:bold;width:340px;color:#fff;line-height:30px; overflow:hidden;position:absolute;cursor:pointer;}

#playNum{margin:205px 5px 0 350px;z-index:3;width:145px; text-align:right;position:absolute;height:25px;}

#playNum a{margin:0 2px;width:20px;height:20px;font-size:14px; font-weight:bold;line-height:20px;cursor:pointer;color:#000;padding:0 5px;background:#D7D6D7;text-align:center}

#playShow img{width:500px;height:230px;}

</style>

common.css內容如下：

body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd{padding:0;margin:0;}

li{list-style:none;}

img{border:none;}

u{text-decoration:none;}

em{font-style:normal;}

a{color:#424242;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}

body{font-size:12px;font-family: Arial,Verdana, Helvetica, sans-serif; word-break:break-all;}

.box{margin:0 auto;text-align:left;width:920px;}

.clear{clear:both;}

3.用js實現點擊切換輪播效果：

var t = n = 0, count = $("#playShow a").size();

$(function(){

$("#playShow a:not(:first-child)").hide();

$("#playText").html($("#playShow a:first-child").find("img").attr('alt'));

$("#playNum a:first").css({"background":"#FFD116",'color':'#A8471C'});

$("#playText").click(function(){window.open($("#playShow a:first-child").attr('href'), "_blank")});

$("#playNum a").click(function() {

var i = $(this).text() - 1;

n = i;

if (i >= count) return;

$("#playText").html($("#playShow a").eq(i).find("img").attr('alt'));

$("#playText").unbind().click(function(){window.open($("#playShow a").eq(i).attr('href'), "_blank")})

$("#playShow a").filter(":visible").hide().parent().children().eq(i).fadeIn(1200);

$(this).css({"background":"#FFD116",'color':'#A8471C'}).siblings().css({"background":"#D7D6D7",'color':'#000'});

});

t = setInterval("showAuto()", 5000);

$("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 5000);});

})

function showAuto()

{

n = n >= (count - 1) ? 0 : ++n;

$("#playNum a").eq(n).trigger('click');

}

</script>

石家莊康諾網絡科技有限公司

2017/7/11

言

輪播圖已經是一個很常見的東西，尤其是在各大App的首頁頂部欄，經常會輪番顯示不同的圖片。

一提到輪播圖如何實現時，很多人的第一反應就是使用Javascript的定時器，當然這種方法是可以實現的。不過就是有些繁瑣，今天這篇文章我們來看看如何不用Javascript，而使用純CSS代碼去實現輪播圖吧。

這篇文章的所有代碼我都放在了github上，感興趣的同學可以去看看。

https://github.com/zhouxiongking/article-pages/blob/master/articles/carousel/carousel.html

CSS

實現效果

首先我們來看看只使用CSS實現的輪播圖效果。

實現效果圖

具體分析

看到上述的實現效果后，我們來具體分析下頁面的構成。

頁面在布局上首先要有5張圖片，圖片固定寬度。
每張圖片對應一個標題，標題通過ul>li實現，事先算好寬度，跟隨圖片一起滾動。
下邊有個1,2,3,4,5表示圖片順序的索引，鼠標放上去后會顯示對應的圖片。

HTML頁面

接下來我們通過代碼層面去看看整個效果是如何實現的。

首先來看看HTML頁面的實現，代碼中都有每個區域的描述。

HTML頁面

CSS部分

實現這個效果主要是通過CSS代碼的，其代碼量比較大，我們分開來看。

外層容器

對于最外層容器我們設置絕對定位，方便圖片標題子元素的定位。

外層容器

圖片標題

對于圖片的標題我們也采用絕對定位，并且讓標題橫向一行展示，方便在動畫的時候直接橫向滾動。

得到的代碼如下所示。

圖片標題

圖片與圖片容器

接下來是設置圖片容器屬性以及圖片的基本大小。

圖片容器也采用絕對定位，寬度可以動態設置，根據圖片數量計算。每張圖片設置寬度與高度，得到的代碼如下。

圖片與圖片容器

圖片動畫效果

然后設置圖片的動畫效果，對于任意的圖片都有進入和靜止兩個狀態，中間的效果可以任意定制。

在這里，中間效果設置成5%的間隔，其他時間在進行位置的切換，因為圖片是處于水平分布，通過設置margin-left的值為負數進行偏移即可。

圖片動畫效果

數字索引的基本屬性

對于下面的數字圖標也是通過基本的CSS屬性進行設置的，包括寬高，行高，透明度等等。

在鼠標移動到對應的數字上后，數字會顯示不同的顏色。而且在鼠標停留在數字上后，動畫效果會暫停。

數字索引基本屬性

數字索引的偏移量

因為數字是水平方向展示的，因此要設定每個數字的水平偏移量。

數字水平偏移量

鼠標停在數字上的動畫效果

然后就是處理鼠標停留在數字上的動畫效果，因為每張圖片對應特定的數字，需要計算出每次的動畫開始位置和結束位置。

鼠標停在數字上的動畫效果

動畫效果賦予指定的數字

最后一步就是將定義的動畫效果賦予指定的數字上，每個數字都有特定的id。得到的代碼如下。

動畫效果賦予指定的數字

至此所有步驟完成了，就可以得到文章開始的動畫效果了。

結束語

這篇文章完全通過CSS實現了一個輪播圖的效果，相比于使用JS來說減少頁面阻塞程度，效果更好。

說一下需要的知識 setinterval函數，明白document. getelementsById是什么意思。

輪播呈現方式多種多樣，鄙人在這里給出一個比較low的方法，若有大神指教，不甚感激！

思路：

1、在body里面設置一個img標簽，src路徑暫且不設置，并給img標簽設置id。

2、寫一個function函數，里面設置src隨著某種變量而改變的條件。

下面擼代碼！！！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img id = "image"/>
<script >
function $(id){
return document.getElementById(id);
}
var index=1;
function setSrc(){
$("image").src="./img/"+index+".png";
++index;
if(index==3){
index=1;
}
}
setSrc();
setInterval("setSrc()",500);
</script>
</body>
</html>

在這里我采用了投機取巧的方式，我的圖片名都是：

讀者可以按照需要改變一下函數的結構

在線咨詢

上一篇：巧用CSS3-Animation動畫，實現小程序彈幕效果
下一篇：國慶風格的活動抽獎頁面的示例代碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

圖片輪播的實現：HTML+CSS+ JavaScript

言

實現效果

具體分析

HTML頁面

CSS部分

結束語

您的項目需求