求javascript简单图片切换代码,如图下
发布网友
发布时间：2022-05-16 08:02
共1个回答
热心网友
时间：2022-05-16 09:31
#con {width:400px; height:300px; margin:20px auto; border:1px solid #ccc; position:relative; overflow:hidden;}
#con ul.img {position:absolute;}
#con ul.img li {float:left; width:400px; height:300px; overflow:hidden;}
#con ul.btn {position:absolute; text-align:right; width:400px; height:16px; left:0; bottom:5px;}
#con p {position:absolute; width:200px; height:16px; left:5px; bottom:5px; text-align:left;}
#con ul.btn li, #con p span {display:inline-block; *display:inline; *zoom:1; padding:0 5px; margin-right:5px; height:16px; line-height:16px; background:#333; color:#fff; text-align:center; cursor:pointer;}
#con ul.btn li.on {background:#666;}
</style>
<script type="text/javascript">
window.onload=function () {
var oCon = document.getElementById('con');
var aUl = oCon.getElementsByTagName('ul');
var aImgLi = aUl[0].getElementsByTagName('li');
var aBtnLi = aUl[1].getElementsByTagName('li');
var aBtnSpan = oCon.getElementsByTagName('span');
var index = 0;
var timer;
aUl[0].style.width = aImgLi[0].offsetWidth*(aImgLi.length)+'px';
for(var i=0; i<aImgLi.length; i++) {
aImgLi[i].index = aBtnLi[i].index = i;
aBtnLi[i].onclick = function() {
index = this.index;
showImg(index);
};
}
function showImg(idx) {
for(var i=0; i<aImgLi.length; i++) {
if(aBtnLi[i].index == idx) {
aBtnLi[i].className = 'on';
} else {aBtnLi[i].className = '';}
}
aUl[0].style.left = -idx*aImgLi[0].offsetWidth+'px';
index++;
if(index == aImgLi.length) {index = 0;}
}
oCon.onmouseover = function() {clearInterval(timer);};
oCon.onmouseout = function() {
timer = setInterval(function() {
showImg(index);
}, 3000);
};
aBtnSpan[0].onclick = function() {
if(index == 0) {index = aImgLi.length-2;}
else if(index == 1) {index = aImgLi.length-1;}
else {index -= 2;}
showImg(index);
};
aBtnSpan[1].onclick = function() {
showImg(index);
};
showImg(index);
timer = setInterval(function() {
showImg(index);
}, 3000);
};
</script>
</head>
<body>
<div class="wrapper">
<h1>原生javascript效果：焦点图</h1>
<div id="con">
<ul class="img">
<li><a href="#"><img src="img/01.jpg" /></a></li>
<li><a href="#"><img src="img/02.jpg" /></a></li>
<li><a href="#"><img src="img/03.jpg" /></a></li>
<li><a href="#"><img src="img/04.jpg" /></a></li>
</ul>
<ul class="btn">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p><span><</span><span>></span></p>
</div>
</div>追问能不能详细一点
