通过javascript实现图片轮播效果

以下文案均为原创，若借鉴后有得到启发，希望点个赞。若有错误之处，或者可以用更好的方式解决，可以留言评论。

地址：https://mp.csdn.net/postedit/83063209

 

以下方法均实现图片轮播的效果，层层递进关系。

第一种方式：

在js里通过索引的方式实现。

①先设置图片的名称，分别从t1.jpg到t7.jpg(共8张图片)

②设置索引为0，若索引能被8整除，则令索引为0。实现重复更换图片的效果

③使用document.getElementById()，通过指定的Id来获得html对象

④通过对象.src属性得到图片的URL

⑤最后通过setInterval按照指定的周期(2s)来调用函数，实现图片轮播效果。

 

第二种方式：

在第一种方式的前提下，又实现了圆圈点中会选中对应的图片以及点击左右两边的图标实现图片的切换。

（1） 实现圆圈点中会选中对应的图片

 

（2） 点击左右两边的图标实现图片的切换

    
    
    
    


    
 
        

            
<
            
>
        
    

 

（3）两者结合实现的代码：

    
    
    
    


    
 
        

            
<
            
>
        
        

            

            

            

            

            

            

            

            

        
    

 

第三种方式：

使用jQuery实现。作用：代码量精简

    
    
    
    
    


 
    

        
<
        
>
    
    

        

        

        

        

        

        

        

        

    

date: 2018-10-15

authon: cymx66688