您的位置：首页 > Web前端 > JQuery

jQuery FlexSlider滑动插件的使用

2017-03-15 21:28 453 查看
 <style>

      *{margin: 0; padding: 0;}

      body{

          font-family: Arial,"Microsoft YaHei","微软雅黑",sans-serif;

          background-color: #fff;

          min-width:1080px;

      }

      ul{

          font-weight: normal;

      }

      li{list-style: none;}

      .block_home_slider { position: relative; ); /*半透明兼容*/ line-height: 0px; margin:0 auto; width:100%; top:0px;

      }

      .block_home_slider .slide {position:relative; display:inline-block; width:100%;}

      .block_home_slider .flex-control-paging { display:inline-block; position:absolute; bottom:15px; width:88px; left:50%; margin-left:-44px; text-align:center;}

      .block_home_slider .flex-control-paging li { margin:0px; padding:0px; float:left; overflow:hidden; list-style-type: none; margin-right:9px;

      }

      .block_home_slider .flex-control-paging li a {width:13px; height:13px; display:block; text-indent:-9000px; cursor:pointer; -moz-border-radius: 55px; -webkit-border-radius: 55px; border-radius: 55px;  background: url("imag/btn_visited.png") no-repeat;
-webkit-highlight-color:rbga(255,255,255,0)}

      .block_home_slider .flex-control-paging li a.flex-active { background: url("imag/btn_hover.png") no-repeat;}

      .block_home_slider .flex-direction-nav a {width:25px; height:25px; margin-top:-27px; display:block; position:absolute; top:50%; background-repeat:no-repeat;   text-indent:-9000px;background: url("imag/case_control.png") no-repeat;}

      .block_home_slider .flex-direction-nav a.flex-prev {left:0px; background-position:left top;}

      .block_home_slider .flex-direction-nav a.flex-prev:hover {background-position:left bottom;}

      .block_home_slider .flex-direction-nav a.flex-next {right:0px; background-position:right top;}

      .block_home_slider .flex-direction-nav a.flex-next:hover {background-position:right bottom;}

      .flexslider {margin: 0; padding: 0;}

      .flexslider .slides  li { display: none; -webkit-backface-visibility: hidden; list-style-type: none;

      }

      .flexslider .slides img {width: 100%; display: block; height: 400px}

    </style>

</head>

<body>

<div class="block_home_slider">

    <div id="home_slider" class="flexslider">

        <ul class="slides">

            <li><img src="imag/1.jpg/"></li>

            <li><img src="imag/2.jpg" /></li>

            <li><img src="imag/3.jpg" /></li>

            <li><img src="imag/4.jpg" /></li>

        </ul>

    </div>

</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="js/jquery.flexslider-min.js"></script>

<script>

    $(function () {

        $('#home_slider').flexslider({

            animation : 'slide',

            controlNav : true,

            directionNav : true,

            animationLoop : true,

            slideshow : true,

            useCSS : false,

            slideshowSpeed: 1000,

        });

    });

</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  插件 jquery
相关文章推荐
新的分享
章节导航