js焦点图3d特效代码 焦点图片3D切换代码

特效描述：利用jQuery实现 焦点图片 3D切换代码，利用jQuery实现焦点图片3D切换代码

代码结构

1. 引入CSS

<link rel=’stylesheet’ href=’css/style.css’ type=’text/css’ />

2. 引入JS

<script type=’text/javascript’ src=’js/jquery.min.js’></script>

<script type="text/javascript" src="js/slider.js"></script>

3. HTML代码

<div style="height:100px;"></div>
<div class="warper">
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><a target="_blank" href="#"><img title="高级职位都在这里" src="images/bimg1.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="互联网设计布道者冯铁看诊把脉" src="images/bimg2.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="颜值不高别装“表”" src="images/bimg3.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="高级职位都在这里" src="images/bimg1.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="互联网设计布道者冯铁看诊把脉" src="images/bimg2.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="颜值不高别装“表”" src="images/bimg3.jpg" /></a></li>
</ul>
</div>
<div class="ws_thumbs">
<div>
<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>
</div>
</div>
<div class="ws_shadow"></div>
</div>
</div>
<script type="text/javascript">
jQuery("#wowslider-container1").wowSlider({effect:"cube",pv:"",next:"",duration:20*100,delay:20*100,width:716,height:297,autoPlay:true,playPause:true,stopOnHover:false,loop:false,bullets:0,caption:true,captionEffect:"slide",controls:true,onBeforeStep:0,images:0});
</script>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei’;">
</div>

下载地址

立即下载