| <!----大家好，我是小張，本次将為大家講解一下輪播圖在Javascript中的實作，希望對大家有所幫助。---> |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
*{
margin:0;
padding:0;
}
ul{list-style: none;}
#banner{
width: 1000px;
height: 400px;
border:1px solid #ccc;
margin: 50px auto;
position: relative;
}
.img_box{
width:1000px;
height:400px;
}
.img_box img{
width:100%;
height:100%;
display: none;
}
.img_box img.select{
display: block;
}
.num{
position: absolute;
width: 160px;
height:30px;
right:20px;
bottom: 20px;
}
.num li{
float:left;
width:20px;
height:20px;
margin-right:20px;
background: #ccc;
border-radius: 50%;
}
.num li.select{
background: orange;
}
a{
width: 30px;
height:50px;
background: url(img/pre.png);
position:absolute;
top:50%;
margin-top:-35px;
opacity: 0.4;
}
.banner_right{
right: 0;
background-position:-50px 0;
}
a.select{
opacity: 1;
}
</style>
</head>
<body>
<div id="banner">
<div class="img_box">
<img class="select" src="img/banner1.jpg" alt="" />
<img src="img/banner2.jpg" alt="" />
<img src="img/banner3.jpg" alt="" />
<img src="img/banner4.jpg" alt="" />
</div>
<ul class="num">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class="banner_left"></a>
<a href="javascript:;" class="banner_right"></a>
</div>
</body>
<script>
var oBanner=document.getElementById("banner");
var aImgs=document.getElementsByTagName("img");
var aLis=document.getElementsByTagName("li");
var bannerRight=document.getElementsByClassName("banner_right")[0];
console.log(bannerRight)
var bannerLeft=document.getElementsByClassName("banner_left")[0];
function change(n){
for(var i=0;i<aLis.length;i++){
aLis[i].className="";
aImgs[i].className="";
}
aLis[n].className="select";
aImgs[n].className="select";
}
var step=0;
for(var i=0;i<aLis.length;i++){
aLis[i].index=i;
aLis[i].onclick=function(){
change(this.index);
step=this.index;
}
}bannerRight.onclick=function(){
}
function change(n){
for(var i=0;i<aLis.length;i++){
aLis[i].className="";
aImgs[i].className="";
}
aLis[n].className="select";
aImgs[n].className="select";
}
var step=0;
//選項點選
for(var i=0;i<aLis.length;i++){
aLis[i].index=i;
aLis[i].onclick=function(){
change(this.index);
step=this.index;
}
}
//右點選
bannerRight.onclick=fn;
function fn(){
console.log("hah")
step++;
if(step>3){
step=0;
}
change(step);
}
bannerLeft.onclick=function(){
step--;
if(step<0){
step=3;
}
change(step);
}
var timer=window.setInterval(fn,4000);
oBanner.onmouseover=function(){
window.clearInterval(timer);
bannerLeft.className="banner_left select";
bannerRight.className="banner_right select";
}
oBanner.onmouseout=function(){
timer=window.setInterval(fn,1000);
bannerLeft.className="banner_left";
bannerRight.className="banner_right";
}
</script>
</html>
| <!----大家好，我是小張，本次将為大家講解一下放大器在Javascript中的實作，希望對大家有所幫助。 |
| 放大器在購物網站中很常用，京東，淘寶，都會用到放大器的相關知識，而本次部落格将為大家介紹使用javascript編寫放大器的例子。 |
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)