輪播圖在生活中很常見延窜，比如網(wǎng)頁(yè)的廣告宣傳什么的恋腕。輪播圖的寫法也有很多種，有手動(dòng)點(diǎn)擊輪播的逆瑞，還有自動(dòng)輪播的荠藤，當(dāng)然也有兩者結(jié)合的。那今天就介紹一下簡(jiǎn)單的點(diǎn)擊輪播圖呆万，和自動(dòng)輪播圖吧商源。
使用的方法：
- 注冊(cè)點(diǎn)擊事件
- 利用圖片的透明度 實(shí)現(xiàn)切換
- 計(jì)時(shí)器的使用
1.自動(dòng)輪播
首先要給圖片定位，使其重疊谋减，就可以通過(guò)透明度的改變使其輪播。
外層的ul設(shè)置相對(duì)定位relative扫沼。內(nèi)層的li設(shè)置絕對(duì)定位absolute出爹，就可使圖片重疊，其中還設(shè)置了transition,讓其產(chǎn)生漸變的效果缎除。然后通過(guò)設(shè)置計(jì)時(shí)器严就，改變圖片的透明度，就可實(shí)現(xiàn)自動(dòng)輪播了器罐。
那來(lái)看下代碼吧
<style>
*{
margin: 0;
padding: 0;
}
#container{
position: absolute;
top:25%;
left:35%;
width: 600px;
height: 400px;
border: 1px solid #949595;
box-shadow: 0 0 8px #cccccc;
}
ul{
position:relative;
list-style-type: none;
}
li{
position: absolute;
padding: 20px;
overflow: hidden;
opacity: 1;
transition: 1s;
}
img{
width: 560px;
height: 350px;
box-shadow: 0 0 8px #cccccc;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><img src="image/99.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
<li><img src="image/1.jpg"></li>
<li><img src="image/38.jpg"></li>
<li><img src="image/7.jpg"></li>
<li><img src="image/8.jpg"></li>
<li><img src="image/53%20(2).jpg"></li>
<li><img src="image/10.jpg"></li>
<li><img src="image/18.jpg"></li>
<li><img src="image/11.jpg"></li>
<li><img src="image/98.jpg"></li>
<li><img src="image/47.jpg"></li>
<li><img src="image/14.jpg"></li>
</ul>
</div>
<script>
var i=0;
var lis = document.getElementsByTagName("li");
function settime() {
i++;
if(i == lis.length){ //實(shí)現(xiàn)圖片循環(huán)播放
i = 0;
}
for(var j=0;j<lis.length;j++){
lis[j].style.opacity = 0;
}
lis[i].style.opacity = 1;
}
var time = setInterval("settime()",1000); //每隔一秒換一張圖片
</script>
看下效果圖：
2.點(diǎn)擊輪播
與自動(dòng)輪播的區(qū)別，就是設(shè)置按鈕注冊(cè)點(diǎn)擊事件。前進(jìn)和后退铸董，主要是通過(guò)
index來(lái)計(jì)算點(diǎn)擊的次數(shù)祟印，然后將其他的圖片通過(guò)循環(huán)都隱藏，將點(diǎn)擊的圖片lis[index]顯示粟害。這個(gè)方法很簡(jiǎn)單蕴忆，也很容易理解，但是也存在問(wèn)題悲幅。
比如：每點(diǎn)擊一次都要循環(huán)隱藏所有圖片套鹅，效率太低，還需要改進(jìn)汰具。
來(lái)看下代碼：
（在自動(dòng)輪播的基礎(chǔ)上卓鹿，加上左右點(diǎn)擊的按鈕樣式）
<style>
.btn{
width: 50px;
height: 80px;
top:180px;
position: absolute;
text-align: center;
line-height: 60px;
background-color: transparent;
}
.btn:hover{
background-color: rgba(0,0,0,0.2);
}
.mycss{
font-size: 30px;
color: #949595;
line-height: 80px;
}
#next{
right: 15px;
}
</style>
<body>
<div id="prev" class="btn" onclick="prev()">
<i class="iconfont icon-houtui1 mycss"></i>
</div>
<div id="next" class="btn" onclick="next()">
<i class="iconfont icon-qianjin1 mycss"></i>
</div>
<script>
var index= 0；
function next() {
index++;
if(index == lis.length){
index = 0; //這樣點(diǎn)擊到最后一張留荔，又可以回到第一張
}
for(var i =0;i<lis.length;i++){ //將所有的圖片都隱藏
lis[i].style.opacity = 0;
}
lis[index].style.opacity = 1; //將點(diǎn)擊的相應(yīng)次數(shù)的圖片顯示
}
function prev() {
index--;
if(index == -1){
index = lis.length -1; //后退到第一張吟孙，又回到最后一張
}
for(var i=0;i<lis.length;i++){
lis[i].style.opacity = 0;
}
lis[index].style.opacity = 1;
}
</script>
<body>
看下效果圖：
當(dāng)然也可以兩者結(jié)合，既可以自動(dòng)既荚，也可以再手動(dòng)稚失。輪播圖的切換，有很多的方法恰聘，我只是選擇了一種簡(jiǎn)單好理解的方法去做句各。暑假學(xué)習(xí)已經(jīng)過(guò)了大半，還有很多需要學(xué)習(xí)晴叨，自己進(jìn)步也是有的吧凿宾，但是最近有點(diǎn)懶，需要反思一下了兼蕊，有點(diǎn)懈怠初厚。要學(xué)習(xí)的東西還有太多，加油孙技！
