网站首页滚动图片右下数字点击切换对应图片怎么实现？ 200

PS：我是实实在在的小白，上学学过代码，后面根本没操作过，所以知道答案的朋友能否直接告诉我代码？不想直接贴就回复我我发邮箱，谢谢。图片滚动是已经存在了的，图片识别的是后台... PS：我是实实在在的小白，上学学过代码，后面根本没操作过，所以知道答案的朋友能否直接告诉我代码？不想直接贴就回复我我发邮箱，谢谢。图片滚动是已经存在了的，图片识别的是后台上传的图片。下面是这段代码，如果不完全可以跟我说，谢谢。测试实现了给分，全部家当了啊-- 展开





 我来答

1个回答

#合辑# 面试问优缺点怎么回答最加分？

低代码应用开发平台
2018-05-03 · 白码是一个为企业级需求打造的低代码平台，支持私有化部署，分享...

低代码应用开发平台

采纳数：13 获赞数：29

向TA提问私信TA

关注

展开全部

对应切换图片主要就是关联索引，可以用自定义属性来实现，具体看我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="Fly">
<title>图片无缝轮播</title>
<style>
*{ margin: 0; padding: 0; font-family:Microsoft yahei,serif;}
li{ list-style:none;float: left;}
#banner{
position: relative;
width: 520px;
height: 280px;
margin: 50px auto;
overflow: hidden;
}
#banner #pic{
position: relative;
width: 100%;
height: 100%;
}
#banner #pic ul li{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
#banner #pic ul li img{
width: 100%;
height: 100%;
}
#banner #pic ul li:not(:first-child){
left: 520px;
}
#dock{
position: absolute;
left: 50%;
margin-left: -57.5px;
bottom: 20px;
width: 115px;
height: 15px;
background: #000;
background: rgba(0,0,0,.5);
border-radius: 5px;
}
#dock ul li{
width: 15px;
height: 15px;
background: #fff;
border-radius: 100%;
cursor: pointer;
}
#dock ul li:not(:last-child){
margin-right: 10px;
}
#dock ul li.active{
background: #f40;
}
#arrow span{
position:absolute;
top:50%;
margin-top: -15px;
display: inline-block;
width: 30px;
height: 30px;
font-weight: bold;
font-size: 35px;
line-height: 30px;
text-align: center;
background: #000;
background: rgba(0,0,0,.5);
color: #fff;
cursor: pointer;
}
#arrow span#left{
left: 0;
}
#arrow span#right{
right: 0;
}
</style>
</head>
<body>
<div id="banner">
<div id="pic">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
</div>
<div id="dock">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="arrow">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script type="text/javascript">
var oBanner = document.getElementById('banner'),
arrPicLi = oBanner.querySelectorAll('#pic ul li'),
arrDockLi = oBanner.querySelectorAll('#dock ul li'),
arrSpan = oBanner.querySelectorAll('#arrow span'),
index = 0,
timer;
auto();
for(var i = 0; i < arrDockLi.length; i++){//循环下侧dock栏
arrDockLi[i].index = i;
arrDockLi[i].onclick = function(){
arrDockLi[index].className = '';
if(index > this.index){
for(var j = index; j > this.index;j--){
move(arrPicLi[j],{left:'520px'},500)
}
}else{
for(var j = index; j < this.index;j++){
move(arrPicLi[j],{left:'-520px'},500)
}
}
index = this.index;
this.className = 'active';
move(arrPicLi[index],{left:'0'},500)
}
}
for(i = 0; i < 2;i++){//循环左右按钮
arrSpan[i].index = i;
arrSpan[i].onclick = function(){
arrDockLi[index].className = '';
var target = 0;
if(this.index){
//除index外，将所有图片放到右边
for(var k = 0; k < arrPicLi.length;k++){
if(k != index){
arrPicLi[k].style.left = '520px';
}
}
move(arrPicLi[index],{left:'-520px'},500);
index++;
index %= arrPicLi.length;
}else{
//除index外，将所有图片放到左边
for(var k = 0; k < arrPicLi.length;k++){
if(k != index){
arrPicLi[k].style.left = '-520px';
}
}
move(arrPicLi[index],{left:'520px'},500);
index--;
if(index < 0){
index = arrPicLi.length - 1;
}
}

arrDockLi[index].className = 'active'
move(arrPicLi[index],{left:'0'},500);
}
}
oBanner.onmouseleave = auto;
oBanner.onmouseenter = function(){
clearInterval(timer);
}
function auto(){
timer = setInterval(function(){
arrDockLi[index].className = '';
//除index外，将所有图片放到左边
for(var k = 0; k < arrPicLi.length;k++){
if(k != index){
arrPicLi[k].style.left = '520px';
}
}
move(arrPicLi[index],{left:'-520px'},500);
index++;
index %= arrPicLi.length;
arrDockLi[index].className = 'active'
move(arrPicLi[index],{left:'0'},500);
},3000);
}
//封装的时间版运动框架
function move(obj,target,time){
var startVal = {},
targetVal = {},
startTime = new Date();
for (var key in target) {
startVal[key] = parseFloat(getStyle(obj,key));
targetVal[key] = parseFloat(target[key]);
}
m();
function m(){
var prop = (new Date() - startTime)/time;
prop >= 1 ? prop = 1 : requestAnimationFrame(m);
for(var key in target){
obj.style[key] = startVal[key] + prop*(targetVal[key]-startVal[key])+'px';
}
}
}
function getStyle(obj,attr){
return obj.currentStyle? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
</script>
</body>
</html>