如题。
代码如下。代码是@学习是人类进化的阶梯 的,我在粘贴代码的过程中遇到了这个问题。
<script>
window.onload = function(){
var box=this.document.getElementsByClassName("re")[0];
var lik=box.getElementsByTagName("li");
function fun(i,j){//转换图片函数,就是把透明度改了一下
lik[i].style.opacity=1;
lik[j].style.opacity=0;
lik[i+5].style.backgroundColor="#ffffff";//改一下小图标
lik[j+5].style.backgroundColor="#00000000"
}
fun(0,1);//初始化下
var i =0;
function auto(){//轮播循环函数
if(++i>=5){
i=0;
fun(0,4);
}
else fun(i,i-1);
}
timer=this.setInterval(auto,2000);
box.onmouseover = function () { //鼠标划上去,停止轮播
console.log('good');
clearInterval(timer);
}
box.onmouseout = function () { //鼠标划出,继续轮播
timer = setInterval(auto, 2000); //调用定时器
}
var j =0;
for(;j<5;j++){//点击小图标也可以转换图片
lik[j+5].ind=j;
lik[j+5].onclick=function(){
fun(this.ind,i)
i=this.ind;
}
}
}</script>
<style>
#max{
width: 900px;
height: 500px;
align-items: center;
margin: 5% auto;
margin-top: 0%;
position: absolute;
left: 190px;
top: 130px;
}
.re{
position: relative;
height: 400px;
}
.re ul{
list-style-type:none ;
}
.re ul>li{
width: 600px;
height: 300px;
position: absolute;
transition: 1s;
opacity: 0;
}
.re ul>li img{
width: 900px;
height: 500px;
border-radius: 10%;
border: 15px solid #fffbd6;
}
#max ol {
position: relative;
display: grid;
grid-template-columns: repeat(5,75px);
grid-template-rows: auto;
grid-gap: 1em;
float: right;
margin-top: 450px;
list-style: none;
top:0;left:0;
}
#max ol li {
width: 25px;
height: 10px;
font-size: 15px;
line-height: 20px;
float: left;
text-align: center;
border-radius: 2em;
border: 5px solid #999999;
}
</style>
<body>
<div id="max">
<div class="re">
<ul>
<li><a href="Fibonacci数列.html"><img src="file:///C|Users/Lenovo/Desktop/数学/图片/我的数学笔记002.png" alt="" title="Fibonacci数列"></a></li>
<li><a href="Euler常数.html"><img src="file:///C|Users/Lenovo/Desktop/数学/图片/我的数学笔记015.png" alt="" title="Euler常数"></a></li>
<li><a href="Wallis公式.html"><img src="file:///C|Users/Lenovo/Desktop/数学/图片/我的数学笔记037.png" alt="" title="Wallis公式"</a>></li>
<li><a href="Newton-Leibniz公式.html"><img src="file:///C|Users/Lenovo/Desktop/数学/图片/我的数学笔记061.png" alt="" title="Newton-Leibniz公式"</a>></li>
<li><a href="Ceva定理.html"><img src="file:///C|Users/Lenovo/Desktop/数学/图片/我的数学笔记154.png" alt="" title="Ceva定理"></a></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</body>
运行结果如下
我实在不会了。麻烦大家帮帮我。谢谢。
我希望让图片轮播到那一张就链接到哪一个相应的网页。