<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery制作车模焦点图全屏图片滑动插件cbpFWSlider - 源码搜藏网【www.codesocang.com】</title>
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div id="cbp-fwslider" class="cbp-fwslider">
<ul>
<li><a href="#"><img src="images/1.jpg" alt="img01"/></a></li>
<li><a href="#"><img src="images/2.jpg" alt="img02"/></a></li>
<li><a href="#"><img src="images/3.jpg" alt="img03"/></a></li>
<li><a href="#"><img src="images/4.jpg" alt="img04"/></a></li>
<li><a href="#"><img src="images/5.jpg" alt="img05"/></a></li>
</ul>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.cbpFWSlider.min.js"></script>
<script>
$( function() {
/*
- how to call the plugin:
$( selector ).cbpFWSlider( [options] );
- options:
{
// default transition speed (ms)
speed : 500,
// default transition easing
easing : 'ease'
}
- destroy:
$( selector ).cbpFWSlider( 'destroy' );
*/
$( '#cbp-fwslider' ).cbpFWSlider();
} );
</script>
</body>
</html>
兼容IE8的jQuery幻灯片切换代码
jQuery全屏banner图片切换焦点图简洁代码
基于slick幻灯片插件制作的一款jQuery背景图片切换效果
jQuery带视觉差效果幻灯片代码
JS+CSS3制作3D翻转式幻灯片代码