jQuery实现各种轮播图

目录

                无限循环滚动

百叶窗

轮播一

轮播二

 轮播三

 

---

无限循环滚动

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 1120px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        
        ul {
            list-style: none;
            width: 3360px;
            height: 300px;
            background: #000;
            /* background: rgba(255, 0, 0, .5); */
        }
        
        ul>li {
            float: left;
        }

        $(function() {
            //0.定义变量，保存偏移位
            let offset = 0;

            //1.让图片滚动起来
            let timer = null;

            function autoPlay() {
                timer = setInterval(function() {
                    offset += -10;

                    if (offset <= -2240) {
                        offset = 0;
                    }

                    $("ul").css("marginLeft", offset);
                }, 50);
            }

            autoPlay();

            //2.监听li移入和移出事件
            $("li").hover(function() {
                //停止滚动
                clearInterval(timer);

                //给非当前选中添加蒙版
                $(this).siblings().fadeTo(100, 0.5);

                //去除当前选中的蒙版
                $(this).fadeTo(100, 1);
            }, function() {
                //继续滚动
                autoPlay();

                //去除所有蒙版
                $("li").fadeTo(100, 1);
            });
        });

---

百叶窗

---

轮播一

 

        
        
        
        

        
        

            <
                
>


                
                

                    

                    

                    

                    

                
        

---

轮播二

 

        

            
            
            
            
            
            
            
        
        

            
            
            
            
            
        
        <
        >
    

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    padding: 20px;
}

#container {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
    margin: 45px auto;
}

#list {
    width: 4200px;
    height: 400px;
    position: absolute;
    z-index: 1;
}

#list img {
    float: left;
}


/* 小圆点区域 */

#buttons {
    position: absolute;
    height: 10px;
    width: 100px;
    z-index: 2;
    bottom: 20px;
    left: 250px;
}

#buttons span {
    cursor: pointer;
    float: left;
    border: 1px solid #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    margin-right: 5px;
}

#buttons .on {
    background: orangered;
}


/* 按钮区域 */

.arrow {
    cursor: pointer;
    display: none;
    line-height: 39px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 2;
    top: 180px;
    background-color: RGBA(0, 0, 0, .3);
    color: #fff;
}

.arrow:hover {
    background-color: RGBA(0, 0, 0, .7);
}

#container:hover .arrow {
    display: block;
}

#prev {
    left: 20px;
}

#next {
    right: 20px;
}

$(function() {
    //获取元素
    var container = $('#container');
    var list = $('#list');
    var buttons = $('#buttons span');
    var prev = $('#prev');
    var next = $('#next');

    var index = 1; //存放当前显示的图片的下标
    var len = 5;
    var interval = 3000; //位移时间间隔
    var timer;


    function animate(offset) {
        var left = parseInt(list.css('left')) + offset;

        // 边界判断
        if (offset > 0) {
            offset = '+=' + offset;
        } else {
            offset = '-=' + Math.abs(offset);
        }

        list.animate({ 'left': offset }, 300, function() {
            if (left > -200) {
                list.css('left', -600 * len);
            }
            if (left < (-600 * len)) {
                list.css('left', -600);
            }
        });
    }

    //亮起小圆点
    function showButton() {
        //当前图片的小圆点亮起，其他小圆点不亮
        buttons.eq(index - 1).addClass('on').siblings().removeClass('on');
    }

    // 鼠标离开图片区域时，轮播继续
    function play() {
        timer = setTimeout(function() {
            next.trigger('click');
            play();
        }, interval);
    }

    //鼠标进入图片区域时，停止轮播
    function stop() {
        clearTimeout(timer);
    }

    // 右按钮点击事件
    next.bind('click', function() {
        // 判断当前是否在动画
        if (list.is(':animated')) {
            return;
        }

        // 判断当前图片是否是最后一张
        if (index == 5) {
            index = 1;
        } else {
            index += 1;
        }

        animate(-600);
        showButton();
    });

    // 左按钮事件
    prev.bind('click', function() {
        // 判断当前是否在动画
        if (list.is(':animated')) {
            return;
        }

        // 判断当前图片是否是第一张
        if (index == 1) {
            index = 5;
        } else {
            index -= 1;
        }

        animate(600);
        showButton();
    });

    // 小圆点点击事件
    buttons.each(function() {
        $(this).bind('click', function() {
            // 判断当前是否在进行动画
            if (list.is(':animated') || $(this).attr('class') == 'on') {
                return;
            }
            // 获取属性
            var myIndex = parseInt($(this).attr('index'));

            //计算偏移量
            var offset = -600 * (myIndex - index);

            animate(offset);

            //切换后，更新当前的偏移量
            index = myIndex;

            showButton();
        })
    });

    container.hover(stop, play);

    play();

});

---

 轮播三

 核心：

• 旧的图片淡出、新的图片淡入
• 鼠标单击左右按钮，图片进行左右切换
• 鼠标点击相应的锚点，图片就自动切换到锚点对应的图片
• 但鼠标既没有单击左右按钮也没有单击锚点时，图片就按一定周期自动循环轮播

 

        

            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
        
        

            <
                
>
                

                    
0
                    
1
                    
2
                    
3
                    
4