完美的js图片轮换效果
本文实例为大家分享了js轮播图焦点的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>轮播图焦点</title>
<metacontent="还是有地点小瑕疵，1左转变4,4右转变1的时候，图片切换有空白，换下动画模式应该可以？">
<style>
*{
padding:0;
margin:0;
}
ul{
list-style:none;
}
.scroll{
width:300px;
height:200px;
border:1pxsolidred;
margin:100pxauto;
position:relative;
overflow:hidden;
}
.scrollul.imgUl{
width:400%;
position:absolute;
top:0;
left:0;
}
.scrollul.imgUlli{
float:left;
}
.scroll.imgUlimg{
vertical-align:middle;/*消除图片间3px的间距*/
}
.scrollul.focus{
position:absolute;
left:50%;
bottom:10px;
margin-left:-80px;
}
.scrollul.focusli{
width:20px;
height:20px;
padding:5px;
text-align:center;
margin-right:10px;
border:2pxsolidyellow;
float:left;
color:red;
font-weight:700;
background-color:#333;
color:white;
}
.scrollul.focusli.current{
background-color:deeppink;
}
.scroll.arrow{
width:100%;
position:absolute;
top:50%;
left:0;
margin-top:-20px;
display:none;
}
.scroll.arrowdiv{
width:40px;
height:40px;
font:70018px/40px"宋体";
text-align:center;
background:rgba(0,0,0,.3);
color:#fff;
cursor:pointer;
}
.scroll.arrowdiv.left{
float:left;
}
.scroll.arrowdiv.right{
float:right;
}
</style>
<script>
window.onload=function(){
function$(id){returndocument.getElementById(id);}
varscrollDiv=$('scrollDiv');
varimgul=$('images');
varfocusUl=$('focuses');
varimgLis=imgul.children;
varleader=0,target=0;
varcurIndex=0;//记录当前图片的序号
varleftArrow=$('leftArrow');
varrightArrow=$('rightArrow');
//可自动生成和图片对应的序号
/*for(vari=0;i<imgLis.length;i++){
varnewLi=document.createElement('li');
newLi.innerHTML=i+1;
focusUl.appendChild(newLi);
}*/
varfocusLis=focusUl.children;
for(vari=0;i<focusLis.length;i++){
focusLis[i].index=i;
focusLis[i].onmouseover=function(){
curIndex=this.index;
switchFocus(curIndex);
target=-this.index*300;
}
}
scrollDiv.onmouseover=function(){
$('arrowDiv').style.display="block";
clearInterval(timer);
}
scrollDiv.onmouseout=function(){
$('arrowDiv').style.display="none";
timer=setInterval(autoPlay,3000);
}
leftArrow.onclick=function(){
target+=300;
curIndex=curIndex==0?focusLis.length-1:curIndex-1;
switchFocus(curIndex);
}
rightArrow.onclick=function(){
target-=300;
curIndex=(curIndex+1)%focusLis.length;
switchFocus(curIndex);
}
//缓动效果
setInterval(function(){
if(target>0){
target=-900;
leader=-1000;
}elseif(target<-900){
target=0;
leader=100;
}
leader=leader+(target-leader)/10;
imgul.style.left=leader+"px";
},10);
switchFocus(0);
//每隔3s左移图片
vartimer=null;
timer=setInterval(autoPlay,3000);
functionautoPlay(){
target-=300;
curIndex=(curIndex+1)%focusLis.length;
switchFocus(curIndex);
}
//转换样式
functionswitchFocus(curIndex){
for(varj=0;j<focusLis.length;j++){
focusLis[j].className="";
}
focusLis[curIndex].className="current";
}
}
</script>
</head>
<body>
<divclass="scroll"id="scrollDiv">
<ulclass="imgUl"id="images">
<li><imgsrc="images/01.jpg"alt=""></li>
<li><imgsrc="images/02.jpg"alt=""></li>
<li><imgsrc="images/03.jpg"alt=""></li>
<li><imgsrc="images/04.jpg"alt=""></li>
</ul>
<ulclass="focus"id="focuses">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<divclass="arrow"id="arrowDiv">
<divclass="left"id="leftArrow"><</div>
<divclass="right"id="rightArrow">></div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。