关于轮播

最新推荐文章于 2025-10-10 00:25:27 发布

原创最新推荐文章于 2025-10-10 00:25:27 发布 · 466 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js-轮播

php 同时被 2 个专栏收录

5 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript实现的图片轮播效果案例，包括自动切换与手动选择功能。通过定时器控制图片切换，并利用按钮进行手动选择，同时支持鼠标悬停暂停播放的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻切换-图片切换</title>
<style type="text/css">
*{ margin:0px; padding:0px; border:0px;}
#box{ width:650px; height:450px; background:#000;position:relative; overflow:hidden; }
#pics{ position:absolute; width:100%; height:100%; }
#pics a{ position:absolute; z-index:1; display:block;}
#bottom{ position:absolute; z-index:10; width:100%; height:30px; background:rgba(0,0,0,0.5); bottom:0px; }
/*默认按钮样式*/
#bottom .bt{ width:10px; height:10px; background:#d2d3d4; margin:10px 10px 0px 0px; float:right;}
/*被选中的按钮样式*/
#bottom .bt_on{ background:#30b1eb;}
</style>
<script type="text/javascript">
var currIndex=1;
var timer=null;
function init(){
    //生成5个按钮
    var len=5;
    btn=document.getElementById('bottom');
    for(var i=0;i<len;i++){
       btn.innerHTML+='<div class="bt" index="'+(len-i)+'"></div>';
        }
    //a=btn.innerHTML;
        //alert(a);
        //默认按钮每隔3秒滑动一次
    timer=setInterval(function (){
        if(currIndex+1>5){
            currIndex=0;
            }
            slideTo(currIndex+1);
        },3000);
    var pics=document.getElementById('pics');
    pics.onmouseover=function(){
        clearInterval(timer);
        }
    pics.onmouseout=function(){
        timer=setInterval(function (){
        if(currIndex+1>5){
            currIndex=0;
            }
            slideTo(currIndex+1);
        },3000);
        }
    }
function slideTo(index){
    index=parseInt(index);   //处理成整型数据
    var picArr=document.getElementById('pics').childNodes;
    //alert(picArr.length);
    for(var i=0; i<picArr.length;i++){
        if( picArr[i].attributes 
        && picArr[i].attributes['index'] 
        && parseInt(picArr[i].attributes['index'].value)==index ){
            picArr[i].style.zIndex=2;
            currIndex=index;
            }else if(picArr[i].attributes 
        && picArr[i].attributes['index']){
                picArr[i].style.zIndex=1;
                }
        }
        var btns=document.getElementsByClassName('bt');      //找到所有类名是bt的按钮
        for(var i=0;i<btns.length;i++){
            if(parseInt(btns[i].attributes['index'].value)==index){
                btns[i].className='bt bt_on';
                }else{
                btns[i].className='bt'; 
                    }
            }
    }
</script>
</head>

<body onload="init()">
  <div id="box">
    <div id="pics">
      <a href="#" style="z-index:2" index="1"><img src="images/2.jpg" /></a>
      <a href="#" style="z-index:1" index="2"><img src="images/3.jpg" /></a>
      <a href="#" style="z-index:1" index="3"><img src="images/2.jpg" /></a>
      <a href="#" style="z-index:1" index="4"><img src="images/3.jpg" /></a>
      <a href="#" style="z-index:1" index="5"><img src="images/2.jpg" /></a>
    </div>
    <div id="bottom">
    </div>
  </div>
</body>
</html>