完美的js图片轮换效果
程序员文章站
2022-06-08 15:41:22
本文实例为大家分享了js轮播图焦点的具体代码，供大家参考，具体内容如下
本文实例为大家分享了js轮播图焦点的具体代码，供大家参考，具体内容如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>轮播图焦点</title>
<meta content="还是有地点小瑕疵，1左转变4,4右转变1的时候，图片切换有空白，换下动画模式应该可以？">
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.scroll{
width: 300px;
height: 200px;
border: 1px solid red;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.scroll ul.imgul{
width: 400%;
position: absolute;
top: 0;
left: 0;
}
.scroll ul.imgul li{
float: left;
}
.scroll .imgul img{
vertical-align: middle; /* 消除图片间3px的间距 */
}
.scroll ul.focus{
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -80px;
}
.scroll ul.focus li{
width: 20px;
height: 20px;
padding: 5px;
text-align: center;
margin-right: 10px;
border: 2px solid yellow;
float: left;
color: red;
font-weight: 700;
background-color: #333;
color: white;
}
.scroll ul.focus li.current{
background-color: deeppink;
}
.scroll .arrow{
width: 100%;
position: absolute;
top: 50%;
left: 0;
margin-top: -20px;
display: none;
}
.scroll .arrow div{
width: 40px;
height: 40px;
font: 700 18px/40px "宋体";
text-align: center;
background: rgba(0,0,0,.3);
color: #fff;
cursor: pointer;
}
.scroll .arrow div.left{
float: left;
}
.scroll .arrow div.right{
float: right;
}
</style>
<script>
window.onload = function(){
function $(id){ return document.getelementbyid(id);}
var scrolldiv = $('scrolldiv');
var imgul = $('images');
var focusul = $('focuses');
var imglis = imgul.children;
var leader = 0, target = 0;
var curindex = 0;//记录当前图片的序号
var leftarrow = $('leftarrow');
var rightarrow = $('rightarrow');
//可自动生成和图片对应的序号
/*for(var i=0; i< imglis.length; i++){
var newli = document.createelement('li');
newli.innerhtml=i+1;
focusul.appendchild(newli);
}*/
var focuslis = focusul.children;
for(var i=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;
}else if(target < -900){
target = 0;
leader = 100;
}
leader = leader + (target - leader) / 10;
imgul.style.left = leader +"px";
} ,10);
switchfocus(0);
//每隔3s左移图片
var timer = null;
timer = setinterval(autoplay,3000);
function autoplay(){
target -= 300;
curindex = (curindex+1) % focuslis.length;
switchfocus(curindex);
}
//转换样式
function switchfocus(curindex){
for(var j=0; j<focuslis.length;j++){
focuslis[j].classname="";
}
focuslis[curindex].classname="current";
}
}
</script>
</head>
<body>
<div class="scroll" id="scrolldiv">
<ul class="imgul" id="images">
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
</ul>
<ul class="focus" id="focuses">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="arrow" id="arrowdiv">
<div class="left" id="leftarrow"><</div>
<div class="right" id="rightarrow">></div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。