js实现图片轮播效果

js实现图片轮播效果

一、准备图片和轮播按钮（单击轮播按钮可切换到指定图片）

1. html

   li标签用来设计轮播按钮，给图片和列表分别加上id和类名

   （这里假设有三张图片）

   <div>
       <img id="focusImg" src="pic1.jpg">
           <ul class="focusBox">
               <li></li>
               <li></li>
               <li></li>
           </ul>
   </div>
   

2. css

   • 为列表设置一些样式，使其变为横排的三个圆点，并将ul定位在图片的某个位置

   ul.focusBox>li{
   	float: left;
       width:15px;
       height:15px;
       background: #f00;
       margin-right: 20px;
       border-radius: 10px;
   }
   ul.focusBox{
   	position:absolute;
   	bottom: 10px;
   	left:50%;
   }
   

   • 预先设置一个轮播按钮的样式，当轮播按钮在显示对应轮播图片时呈现

     （显示轮播图时通过给li标签添加名为current的类名来实现该样式）

     .current{
         background: #f60;
         opacity:0.5;
         /*透明度*/
         /*浏览器兼容*/
         filter:alpha(opacity=50);
     }
     

二、通过js实现轮播

1. 实现showPic函数，利用index显示相应图片，同时改变轮播按钮的样式

   （三张图片的src分别为：pic1.jpg、pic2.jpg、pic3.jpg）

   var showPic=function(index){
    document.getElementById('focusImg').src="pic"+index+".jpg";
     //改变图片路径
    var lis=document.getElementsByClassName('focusBox')[0].getElementsByTagName('li');
     //获取列表中所有的li标签
           
    for(var i=0;i < lis.length; i++){
     lis[i].className="";
    }//清空类名
     lis[index-1].className="current";
     //添加类名
    }
   

2. 实现changePic函数，利用setInterval函数实现轮播，sign用来不断获取数字1,2,3

   var sign=0;
   var changePic=function(){
       showPic(sign%3+1);
       sign++;
   }
   window.onload=function(){
       window.setInterval("changePic()",1000);//自动轮播   
       showPic(1);
   }
   

三、实现点击轮播按钮切换图片

• 给li标签添加onclick属性

<div>
    <img id="focusImg" src="pic1.jpg">
        <ul class="focusBox">
            <li onclick="showPic(1)"></li>
            <li onclick="showPic(2)"></li>
            <li onclick="showPic(3)"></li>
        </ul>
</div>