悬浮切换轮播图

2019独角兽企业重金招聘Python工程师标准>>>

<div class="rslide-imgs">
    <ul class="imgs-list">
        <li style="background:url(/images/1.png) no-repeat center top;"><a href="#" target="_blank" title="点击">点击</a>
            <p><a href="#" >详细页面</a></p>
        </li>
        <li style="background:url(/images/2.png) no-repeat center top;"><a href="#" target="_blank" title="点击">点击</a>
            <p><a href="#" >详细页面</a></p>
        </li>
        <li style="background:url(/images/3.png) no-repeat center top;"><a href="#" target="_blank" title="点击">点击</a>
            <p><a href="#" >详细页面</a></p>
        </li>
    </ul>
    <ul class="imgs-icon">
        <li style="display:block;"><img src="/images/first.jpg" width="13px" height="13px" /></li>
        <li><img src="/images/qhan.jpg" width="13px" height="13px" /></li>
        <li><img src="/images/qhan.jpg" width="13px" height="13px" /></li>
    </ul>
</div>
<script>
    $(function(){
        $(".imgs-icon li").mouseover(function(){
            var _this = $(this);
            $(".imgs-list li").each(function(){
                if(_this.index()!=$(this).index()){
                    $(this).hide();
                }else{
                    $(this).show();
                }
            });
            _this.parent().find('img').each(function(){
                $(this).attr('src','/images/normal_dot.jpg');
            })
            _this.find('img').each(function(){
                $(this).attr('src','/images/now_dot.jpg');
            })
        });
    })
</script>

转载于:https://my.oschina.net/glelaine/blog/42131