JavaScript实现大图轮播效果
本文实例为大家分享了js图片轮播效果的具体代码，供大家参考，具体内容如下
<head>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>大图轮播</title>
<styletype="text/css">
*{
margin:0px;
padding:0px;
}
#container{
width:500px;
height:300px;
/*border:1pxsolidblack;*/
position:relative;
overflow:hidden;
}
.btn{
height:100%;
width:30px;
/*border:1pxsolidred;*/
position:absolute;
text-align:center;
line-height:300px;
font-size:40px;
font-weight:900;
color:black;
opacity:0.3;
transition:0.6s;
z-index:999;
background-color:white;
}
.btn:hover{
cursor:pointer;
opacity:0.8;
}
#left-btn{
left:0px;
top:0px;
}
#right-btn{
right:0px;
top:0px;
}
#ad-container{
width:2500px;
height:300px;
/*border:1pxsolidblue;*/
position:relative;
}
.ad{
width:500px;
height:300px;
float:left;
text-align:center;
line-height:300px;
font-size:100px;
font-family:"微软雅黑";
}
</style>
</head>
<body>
<divid="container">
<divid="left-btn"class="btn">
<</div>
<divid="right-btn"class="btn">></div>
<divid="ad-container">
<divclass="ad"style="background-color:mediumpurple;">1</div>
<divclass="ad"style="background-color:yellowgreen;">2</div>
<divclass="ad"style="background-color:rosybrown;">3</div>
<divclass="ad"style="background-color:salmon;">4</div>
<divclass="ad"style="background-color:cyan;">5</div>
</div>
</div>
</body>
</html>
<scripttype="text/javascript">
varrightBtn=document.getElementById("right-btn");
varleftBtn=document.getElementById("left-btn");
varn=1;
/*varcount=1*/;
vararr=newArray();
/*varm=1;
*/rightBtn.onclick=function(){
varx=window.setInterval("to_right()",20);
arr.push(x);
}
functionclear(){
for(variinarr){
window.clearInterval(arr[i]);
}
}
functionto_right(){
varadContainer=document.getElementById("ad-container");
if(n==5){
clear();
}elseif(adContainer.offsetLeft!=n*(-500)){
adContainer.style.marginLeft=adContainer.offsetLeft-25+"px";
}else{
n++;
clear();
}
}
vararr1=newArray();
leftBtn.onclick=function(){
vary=window.setInterval("to_left()",20);
arr1.push(y);
}
functionclear2(){
for(varyinarr1){
window.clearInterval(arr1[y]);
}
}
functionto_left(){
varadContainer=document.getElementById("ad-container");
if(n==1){
clear2();
}elseif(adContainer.offsetLeft!=(n-2)*(-500)){
adContainer.style.marginLeft=adContainer.offsetLeft+25+"px";
}else{
n--;
clear2();
}
}
</script>
精彩专题分享：jQuery图片轮播JavaScript图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。