jQuery FlexSlider滑动插件的使用
巫马泰
<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>
*{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>
类似资料：