jQuery淡入淡出轮播图实现

　　大家好我是QD小白，这是人生第一次写博客，准备写的内容是Jquery淡入淡出轮播图实现，在此之前学习JS写的轮播图效果都感觉不怎么好，学习了jQuery里的淡入淡出效果后又写了一次轮播图效果明显感觉好了许多。现在我就来分享下自己写轮播图的思路和方法。

 

HTML部分：

 

        
        
        
        
        
        
        
 < 
 
        
 > 
        

                
0
                
1
                
2
                
3
                
4
                
5
        
    

HTML：

 CSS部分:

　　 这是HTML 和 CSS两部分。展示的效果是这样的:

 下面的就是JS部分:

 

 　　我就来说说我写这个轮播图的想法和思路:

　　这个 time()函数 是整个轮播图的关键，轮播图通过jQuery的 fadeTo() 实现显示和隐藏， 定义的 n 是显示哪一张图片的下标, time() 里的 for循环是在显示下一张图片之前 遍历所有图片都隐藏 防止有图片和显示的图片透明度都为1的情况。

　　点击按钮切换效果中: for循坏的目的是为了获取6张图片里显示的那一张图片的下标，然后根据 左 右切换的情况 传值 给 n 并且 执行函数 time()。

　　鼠标移入移出函数: 启动计时器： timer = setInterval(time,4000);  停止计时器 ：clearInterval(timer); 。

　　点击li序号切换图片: 通过for()循坏遍历整个li， 这还有个闭包问题 必须使用 立即执行函数，思路和 点击按钮切换效果相同。

 

　　这就是写整个轮播图的要用到的,希望大家可以采纳，博客的图片来自天堂图片网挺好看的 。蟹蟹大家哦！！

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2019-10-16 20:57:14