jquery实现渐变轮播图

1.使用jquery实现小米渐变轮播图的效果
2.轮播图的html代码如下：

<div class="container">
        <div class="slide">
            <a href="#"><img src="images/1.jpg" alt=""></a>
            <a href="#"><img src="images/2.jpg" alt=""></a>
            <a href="#"><img src="images/3.jpg" alt=""></a>
            <a href="#"><img src="images/4.jpg" alt=""></a>
            <a href="#"><img src="images/5.jpg" alt=""></a>
            <div class="slide-pag">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
        </div>
    </div>

2.1 container 为整个轮播的容器，slide为轮播项，slide-pag为分页项，arrow-left，arrow-right为左右导航；

3.轮播图的css样式代码如下：

		*{
			margin: 0;
			padding: 0;
		}
        li{
            list-style: none;
        }
        .slide {
        	position: relative;
            width: 992px;
            height: 420px;
            margin: 100px auto;
            overflow: hidden;
        }
        .slide img{
        	position: absolute;
            display: none;
        }
        .slide .slide-pag{
        	bottom: 10px;
        	right: 10px;
        	position: absolute;
        }
        .slide .slide-pag ul li{
        	float:left;
        	color: #fff;
        	background-color: #999;
        	width: 25px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			margin: 0 2px;
			font-style: normal;
			font-family:SimHei;
			cursor: pointer;
        }
        
        .slide .arrow-left{
        	position: absolute;
        	height: 68px;
        	width: 41px;
        	top:50%;
			margin-top: -34px;
			background: url('../images/arr.png') no-repeat -83px 0;
			cursor: pointer;
        }
        .slide .arrow-right{
        	position: absolute;
        	height: 68px;
        	width: 41px;
        	top:50%;
        	right:0;
			margin-top: -34px;
        	background: url('../images/arr.png') no-repeat -124px 0;
        	cursor: pointer;
        }

4.轮播图的jquery代码如下：

 <script src="JS/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //转成DOM对象
            var leftmove = $('.arrow-left')[0];
            var rightmove = $('.arrow-right')[0];
            //遍历添加索引值
            var lis = $('ul li');
            for (var i = 0; i < lis.length; i++) {
                lis[i].index = i;
            }
            //将第一张图片设为可见，css()方法修改样式
            $('.slide img').eq(0).css({
                display: "block"
            });
            $('.slide-pag ul li').eq(0).css({
                backgroundColor: "skyblue"
            });
            //注册点击事件函数
            $('.slide-pag ul li').click(function () {
                var index = this.index;
                $(this).css({
                    backgroundColor: 'skyblue'
                }).siblings().css({
                    backgroundColor: '#999'
                });
                $('.slide img').stop().fadeOut(500);
                $('.slide img').eq(index).stop().fadeIn(600);
            });
            var keyIndex = 0;
            var slideImgs = $('.slide img');
            // 向左滑动事件函数
            function moveLeft() {
                keyIndex--;
                if (keyIndex < 0) {
                    keyIndex = slideImgs.length - 1;
                }
                $('.slide img').stop().fadeOut(500);
                $('.slide img').eq(keyIndex).stop().fadeIn(600);
                $('.slide-pag ul li').eq(keyIndex).css({
                    backgroundColor: 'skyblue'
                }).siblings().css({
                    backgroundColor: '#999'
                });
            };
            // 绑定向左滑动事件函数
            leftmove.onclick = moveLeft;
            // 向右滑动事件函数
            function moveRight() {
                keyIndex++;
                if (keyIndex > slideImgs.length - 1) {
                    keyIndex = 0;
                }
                $('.slide img').stop().fadeOut(500);
                $('.slide img').eq(keyIndex).stop().fadeIn(600);
                $('.slide-pag ul li').eq(keyIndex).css({
                    backgroundColor: 'skyblue'
                }).siblings().css({
                    backgroundColor: '#999'
                });
            };
            // 绑定右左滑动事件函数
            rightmove.onclick = moveRight;
            // 定时器实现定时轮播
            var timer = setInterval(moveRight, 3000);
            // 当鼠标停在轮播图上面停止滑动，移开后恢复滑动
            $('.slide').hover(function () {
                clearInterval(timer);
            }, function () {
                timer = setInterval(moveRight, 3000);
            })
        })
    </script>

4.1 由于写在html文档的标签中 所以使用了入口函数$(function(){});

5效果图如下:

来源：CSDN

作者：moni110

链接：https://blog.csdn.net/qq469234155/article/details/83051999