层级轮播图(animate)

2019-11-25 16:06:26来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

层级轮播图(animate)

层级轮播图(animate)

css

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style: none;
        }

        .wrap {
            width: 650px;
            height: 250px;
            margin: 100px auto 0;
            position: relative;
            overflow: hidden;
        }

        .wrap img {
            display: block;
        }

        .wrap ul {
            height: 250px;
            z-index: 1;
            position: relative;
        }

        .wrap ol {
            height: 30px;
            z-index: 2;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .wrap > ul > li {
            position: absolute;
            top: 0;
            left: 650px;
        }

        .wrap > ol > li {
            float: left;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border: 1px solid white;
            margin-right: 5px;
            background: Gray;
        }

        .wrap > ol > li:hover {
            cursor: pointer;
        }

        .wrap li.active {
            padding: 2px;
            color: orange;
            margin-top: -4px;
            border: 1px solid orange;
        }
    </style>

  html、js

<div class="wrap">
    <ul>
        <li style="z-index:0;left:0;"><img src="images/01.jpg" alt=""/></li>
        <li><img src="images/02.jpg" alt=""/></li>
        <li><img src="images/03.jpg" alt=""/></li>
        <li><img src="images/04.jpg" alt=""/></li>
        <li><img src="images/05.jpg" alt=""/></li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>

<script type="text/javascript">
   var timer = null;
   	var index = 0;
   	var $olist = $("ol li");
   	var $ulist = $("ul li");
   	timer = setInterval( autoPlay , 3000 );
   	function autoPlay(){
   		index++;
   		if( index == $olist.size() ){
   			index = 0;
   		}
   		$olist.eq(index).addClass("active").siblings().removeClass("active");
   		$ulist.eq(index).animate({"left":0},1500,function(){
   			//当前运动的图片达到目标值后  将其余所有的图片恢复到left:650位置 
   			 $(this).css("zIndex",0).siblings().css({"left":650,"zIndex":1})
   		})
   	}
</script>

  


原文链接:https://www.cnblogs.com/xiaoyaolang/p/11925915.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:移动端流式布局

下一篇:飞机跑道进度条