css+js製作簡單的輪播圖效果
阿新 • • 發佈：2019-02-05
各大電商網站首頁一般都離不開輪播圖，下面將通過css+javascript完成一個簡單的輪播圖效果。
slide.html程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/slide.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="lunbo"> <ul id="content"> <li class="selected"> <a href="#" target="_blank"> <img alt="聖誕立減30" class="lunbo_pic" src="img/17290254.jpg" /> </a> </li> <li> <a href="#" target="_blank"> <img alt="16" class="lunbo_pic" src="img/10105142.jpg" /> </a> </li> <li> <a href="#" target="_blank"> <img alt="1" class="lunbo_pic" src="img/17533546.jpg" /> </a> </li> <li> <a href="#" target="_blank"> <img alt="16" class="lunbo_pic" src="img/10105142.jpg" /> </a> </li> </ul> <ul id="nav"> <li class="selected"></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script type="text/javascript"> var index = 0; var len = $("#nav li").length; var timer = null; start(); $("#nav li").hover(function(){ index = $(this).index(); move(); clearInterval(timer); },function(){ start(); }); function start(){ clearInterval(timer); timer = setInterval(function(){ index ++; if(index == len){ index = 0; } move(); },1000); } function move(){ $("#nav li").eq(index).addClass("selected").siblings().removeClass("selected"); $("#content li").eq(index).addClass("selected").siblings().removeClass("selected"); } </script> </html>
slide.css程式碼：
#lunbo {
width:100%;
height: 390px;
}
#lunbo #content {
width:980px;
height:390px;
margin:0 auto;
list-style: none;
}
#lunbo #content li {
width:980px;
height: 390px;
display: none;
}
#lunbo #content li.selected{
display: block;
}
#lunbo #nav {
list-style: none;
width:200px;
height: 30px;
position: absolute;
top:350px;
left:500px;
}
#lunbo #nav li {
float:left;
width:20px;
height: 20px;
padding-left: 5px;
margin-left: 25px;
border-radius: 50%;
background-color: #E9F3E0;
}
#lunbo #nav li.selected {
background-color: #587832;
}
小結：
1、控制圖片滑動的小圓點通過將容器的width和height屬性設定相同，
然後再將border-radius屬性設定為50%實現。
2、通過定時器設定圖片滑動效果的函式和圖片滑動的時間間隔。
3、定義一個selected類選擇器，由li是否設定selected類選擇器控制當前正在顯示的圖片。
（當前圖片所在節點新增selected類選擇器，並且兄弟節點移除selected類選擇器）。