jQuery全屏焦点图左右滚动特效

使用方法：

核心CSS样式

.slide-wp{width: 1900px;height:398px;position: relative;left:50%;margin-left:-950px;}
.slides, .slide-bg{height: 398px;background-color: #fff;overflow: hidden;}
.slidesjs-pagination{position: absolute;top: 371px;left: 50%;z-index: 11;margin-left: -52px;}
.slidesjs-pagination li{float: left;margin-right: 10px;}
.slidesjs-pagination li a{text-indent: -9999px;background-color: #333;display: inline-block; *display:block;_display: block;width: 25px;height: 7px;padding: 0;_height: 2px;_line-height: 1;}
.slidesjs-pagination li a.active{background-color: #fff;}
.slideChild{width: 945px;margin: 0 auto;z-index: 10;height: 398px;position: relative;}
.slideChild a.opa{position: absolute;top: 0;left: 0;display: inline-block; *display:block;_display: block;width: 100px;height: 50px;background-color: #fff;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";opacity: 0;}
.slideImg{position: absolute;top: 0;left: 0;z-index: 9;}

HTML结构

<div id="slides" class="slides">
  <div>
    <div class="slideChild"><a class="a-jd opa js-log-login" style="top:280px;left:310px;width:230px;height:70px;" href="http://www.sucainiu.com"></a></div>
    <img class="slideImg" src="http://p15.qhimg.com/t01e1e8852e037a60a0.jpg"></div>
  <div>
  
   <div class="slideChild"><a href="http://www.sucainiu.com" class="a-jd opa" style="top:280px; left:165px; width:200px; height:60px;"></a> </div>
    <img class="slideImg" src="http://p18.qhimg.com/t0104f9ecd5c7b2a1c2.jpg"> </div>
  <div>
    
    <div class="slideChild"> <a class="a-video opa" href="http://www.sucainiu.com"></a></div>
    <img class="slideImg" src="http://p15.qhimg.com/t01be9172490f469218.jpg"></div>
  <div>
  
 <div class="slideChild"> <a class="a-video opa" href="http://www.sucainiu.com"></a> </div>
    <img class="slideImg" src="http://p15.qhimg.com/t0177dc4fceef118790.jpg"> </div>
</div>

引入jQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.slides.min.js"></script> 

插件初始化、参数配置

$(function() {
	$('#slides').slidesjs({
		play:{
			active: false,
			effect: "fade",
			auto: true,
			interval: 4000
		},
		effect: {
			fade: {
			speed: 1500,
			crossfade: true
			}
		},
		pagination: {
			active: true
		},
		navigation:{
			active: false
		}
	});
});