杏哩~

京东轮播图效果实现 

第一次发，内容中如有错误和更好的方法请指出，嘿嘿

 

// css样式
<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            display: block;
        }

        .slider {
            height: 340px;
            width: 790px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .slider li {
            position: absolute;
            display: none;
        }

        .slider li:first-child {
            display: block;
        }

        /*文字部分的样式*/

        .slider li p {
            position: absolute;
            width: 100%;
            padding: 10px 0;
            text-indent: 2em;
            background-color: rgba(0, 0, 0, .6);
            bottom: 0;
            left: 0;
            font-size: 18px;

            /*给文字设置位移到底部去*/
            transform: translate3d(0, 100%, 0);
            /*添加过渡*/
            transition: all .8s;
        }

        /*当前展示li 下的文字样式*/

        .slider li.current p {
            /*文字位移到0的位置，正常显示*/
            transform: translate3d(0, 0, 0);
        }

        .slider li a {
            color: #fff;
        }

        .arrow {
            display: none;
        }

        .slider:hover .arrow {
            display: block;
        }

        .arrow-left,
        .arrow-right {
            font-family: "SimSun", "宋体";
            width: 30px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-weight: 700;
            font-size: 30px;
        }

        .arrow-left:hover,
        .arrow-right:hover {
            background-color: rgba(0, 0, 0, .5);
        }

        .arrow-left {
            left: 0;
        }

        .arrow-right {
            right: 0;
        }
    </style>


<body>

      <div class="slider">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/1.jpg" alt="">
                        <p>这是第1张图片的文字说明</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/2.jpg" alt="">
                        <p>这是第2张图片的文字说明</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/3.jpg" alt="">
                        <p>这是第3张图片的文字说明</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/4.jpg" alt="">
                        <p>这是第4张图片的文字说明</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/5.jpg" alt="">
                        <p>这是第5张图片的文字说明</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/6.jpg" alt="">
                        <p>这是第6张图片的文字说明</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/7.jpg" alt="">
                        <p>这是第7张图片的文字说明</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/8.jpg" alt="">
                        <p>这是第8张图片的文字说明</p>
                    </a>
                </li>
            </ul>
            <!--箭头-->
            <div class="arrow">
                <span class="arrow-left">&lt;</span>
                <span class="arrow-right">&gt;</span>
            </div>
        </div>
 <script src="../jquery-2.2.4.js"></script> // 使用的jquery插件包
        <script>
            // 使用到的方法
            //   addClass()添加类名
            //   sibling() 找到同类型的兄弟节点
            //   removeClass()删除类名

            // 设置索引 ，设置第一张图片为默认
            var index = 0;
            // 获取ul下面的li,然后给每个li添加一个类,找到同类型的兄弟节点删除这个类
            $('ul li').eq(index).addClass('current').siblings().removeClass('current');

            // 给右边按钮设置点击事件
            $('.arrow-right').click(function () {
                index++;
                // 判断 索引长度等于图片长度，那么设置索引为0
                if (index == $('ul li').length) {
                    index = 0;
                }
                movement()

            })


            // 给左边按钮设置点击事件
            $('.arrow-left').click(function () {
                index--;
                // 判断 索引小于0
                if (index > 0) {
                    index = $('ul li').length - 1
                }
                movement()  //调用
            })

            function movement() {
                // 让图片进行淡入淡出的效果
 $('ul li').eq(index).addClass('current').fadeIn().siblings().removeClass('currenrt').fadeOut();
            }


            // 实现自动播放，设置定时器
            var times = 0;

            $('.slider').mouseout(function () {
                times = setInterval(function () {
                    $('.arrow-right').click()
                    // console.log($('.arrow-right'));
                }, 1000)
            })

            // 鼠标移出继续播放
            $('.slider').mouseout()


            // 鼠标移入清空定时器
            $('.slider').mousemove(function () {
                clearInterval(times);
                // console.log( $('.slider'));
            })

        </script>

 

posted on 2020-10-18 14:51  魔法少女~  阅读(189)  评论(0)    收藏  举报

导航