简单的JQ横排响应式轮播图

最新推荐文章于 2024-03-14 19:48:19 发布

Sprite_code

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量1.4k

点赞数 2

分类专栏：轮播图文章标签：响应式 html 轮播图响应式轮播图

本文链接：https://blog.csdn.net/Sprite_code/article/details/78044703

版权

轮播图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

<div class="box">
            <div class="pic">
                <ul class="clearfix">
                    <li><img src="img/952-440-1.jpg" alt="" /></li>
                    <li><img src="img/952-440-2.jpg" alt="" /></li>
                    <li><img src="img/952-440-3.jpg" alt="" /></li>
                    <li><img src="img/952-440-4.jpg" alt="" /></li>
                </ul>                                                               
            </div>
            <div class="tab">
                <a href="#" class="on">01</a>
                <a href="#">02</a>
                <a href="#">03</a>
                <a href="#">04</a>
            </div>
        </div>

CSS

*{margin:0;padding:0;}
            ul,li{list-style: none;display: block;}
            a{text-decoration:none; font-size:20px;color: #302833;}
            .clearfix:after{content: '';display: block;height: 0;visibility: hidden;clear: both;}
            .box{position: relative;width:100%; overflow: hidden;}
            .pic{position: absolute;left:0;width:400%;}         
            li{float:left;width:25%;}
            img{display: block;width: 100%;}
            .tab{width:50%;position: absolute;right:0;bottom:0;}
            .tab a{display: inline-block;width:20%;height:30px;line-height: 30px;background: red;color: #fff;text-align: center;}
            .on{background: blue !important;}

JS

$(function(){
            var $window_wid=$(window).width();
            $(".box").height($window_wid*0.46);  //盒子的高度始终是浏览器宽度的0.43
            $(window).resize(function(){
                 $window_wid=$(window).width();
                 $(".box").height($window_wid*0.46); 
//               console.log($(".box").height())
            });
            var box=$(".box"),  //  大盒子
            btns=box.find(">div.tab>a"),  //  获取a标签
            pic=box.find(".pic"),   // 找ul
            p=0;                 //  指示         
            btns.each(function(index,btn){
                btn=$(btn);  // 相当于 $(this)
                btn.mouseenter(function(){
                    if(index !=p){// 1 2 3
                        $(btns[p]).removeClass("on"); // 移出默认
                        btn.addClass("on");//  给当前 指示（a链接） 设置  
                        p=index;// 更新p 移除默认样式 
                        pic.stop().animate({
                            "left":-100*index+"%"
                        },300)
                    }
                })
            }).eq(0).mouseenter()

        })