标签：
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>焦点图</title>
<script type="text/javascript" src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
<style>
*{padding:0; margin: 0;}
/***************焦点图******************/
.slide{
width:730px;
height:340px;
position:relative;
overflow:hidden
}
.slide ul{
height:340px;
overflow:hidden
}
.slide ul li{
float:left;
width:730px;
position:relative
}
.slide ul li img{
width:730px;
height:340px
}
.slide ul li p{
position:absolute;
bottom:0;
left:0;
width:100%;
height:49px;
font:22px/49px "微软雅黑","宋体";
filter:progid:DXImageTransform.Microsoft.gradient(enabled="true",startColorstr="#B2080B12",endColorstr="#B2080B12");
background-color:rgba(8,11,18,0.7)
}
:root .slide ul li p{
filter:none
}
.slide ul li p,.slide ul li p a{
color:#fff !important;
}
.slide ul li p a{
display:block;
width:610px;
text-indent:20px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.slide ol{
position:absolute;
right:20px;
bottom:16px;
width:500px;
text-align:right;
font-size:0;
word-spacing:-1px;
}
.slide ol li{
display:inline-block;
*display:inline;
*zoom:1;
width:10px;
height:10px;
text-indent:-9000px;
overflow:hidden;
margin-right:10px;
cursor:pointer;
background-position:-313px -152px;
}
.slide ol li.current{
background-position:-333px -152px
}
.slide-prev,.slide-next{
position:absolute;
top:135px;
width:31px;
height:70px;
cursor:pointer;
z-index:1000;
background: url(http://s0.ifengimg.com/static/news/images/icons_58594fc1.png) no-repeat;
}
.slide-prev{
left:0;
background-position:-80px -322px
}
.slide-next{
right:0;
background-position:-138px -322px
}
</style>
</head>
<body>
<div class="slide">
<div class="slide-prev"></div>
<div class="slide-next"></div>
<ul>
<li>
<a href="http://house.ifeng.com" target="_blank"><img src="http://s0.ifengimg.com/2015/03/05/e31ba298c56a1805663e237cba424713.jpg"></a>
<p>
<a href="http://house.ifeng.com" target="_blank">3.15消费者房屋质量维权线索征集令 说出你的困扰吧！</a>
</p>
</li>
<li>
<a href="http://house.ifeng.com" target="_blank"><img src_original="http://s1.ifengimg.com/2015/03/05/1de62b5e7ee29c3e3364bf78fe0e40be.jpg"></a>
<p>
<a href="http://house.ifeng.com" target="_blank">3.15消费者房屋质量维权线索征集令 说出你的困扰吧！</a>
</p>
</li>
<li>
<a href="http://house.ifeng.com" target="_blank"><img src_original="http://y3.ifengimg.com/mappa/2015/04/20/4233f6d6d68a8e9008c7a8a8eb96a022.jpg"></a>
<p>
<a href="http://house.ifeng.com" target="_blank">3.15消费者房屋质量维权线索征集令 说出你的困扰吧！</a>
</p>
</li>
<li>
<a href="http://house.ifeng.com" target="_blank"><img src_original="http://s1.ifengimg.com/2015/03/05/1de62b5e7ee29c3e3364bf78fe0e40be.jpg"></a>
<p>
<a href="http://house.ifeng.com" target="_blank">3.15消费者房屋质量维权线索征集令 说出你的困扰吧！</a>
</p>
</li>
<li>
<a href="http://house.ifeng.com" target="_blank"><img src_original="http://s0.ifengimg.com/2015/03/06/0a9e0d018bf7974adc39d7096d4fe60d.jpg"></a>
<p>
<a href="http://house.ifeng.com" target="_blank">3.15消费者房屋质量维权线索征集令 说出你的困扰吧！</a>
</p>
</li>
</ul>
<ol></ol>
</div>
<script type="text/javascript" src="http://s0.ifengimg.com/2016/04/12/focusSlide_79733359.js"></script>
<script>
$(function(){
var slide = new focusSlide($(".slide"));
slide.preButton = $(".slide-prev");
slide.nextButton = $(".slide-next");
slide.ispreNextShow = true;
slide.init();
});
</script>
</body>
</html>
JS:
define(function() {
function focusSlide(container){
this.slideList = container.find("ul");
this.thumb = container.find("ol");
this.preButton = null;
this.nextButton = null;
this.ispreNextShow = false;
this.interval = 4000;
this.speed = 1000;
this.currentIdx = null;
this.curInterval = null;
this.isLoadImg = null;
this.autoPlay = true;//true默认自动滚动，false不自动滚
}
focusSlide.prototype = {
init: function(){
this.currentIdx = 0;
this.isLoadImg = [];
if( this.ispreNextShow == false ){
if( this.preButton ) this.preButton.hide();
if( this.nextButton ) this.nextButton.hide();
}
for(var i=0; i<this.slideList.children().length; i++){
this.isLoadImg[i] = true;
}
this.creatThumb();
if(this.autoPlay){
this.autoSlide();
}
this.bind();
},
creatThumb: function(){
var thumb_html = "";
for(var i=0; i<this.slideList.children().length; i++){
thumb_html += "<li>" + (i + 1) + "</li>";
}
this.thumb.html(thumb_html);
this.thumb.children().eq(this.currentIdx).addClass("current");
},
loadImg: function(idx){
if( this.isLoadImg[idx] ){
var img = this.slideList.children().eq(idx).find("img");
var src_original = img.attr("src_original");
img.attr("src",src_original);
this.isLoadImg[idx] = false;
}
},
setCurrent: function(currentIdx){
this.thumb.children().eq(currentIdx).addClass("current").siblings().removeClass("current");
this.loadImg(currentIdx);
this.slideList.children().hide().css({"filter":"alpha(opacity=0)","opacity":0});
this.slideList.children().eq(currentIdx).show().animate({"filter":"alpha(opacity=100)","opacity":1}, this.speed);
},
bind: function(){
var me = this;
if( me.preButton ){
me.preButton.on("click", function(){
clearInterval(me.curInterval);
me.prev();
if(me.autoPlay){
me.autoSlide();
}
});
}
if( me.nextButton ){
me.nextButton.on("click", function(){
clearInterval(me.curInterval);
me.next();
if(me.autoPlay){
me.autoSlide();
}
});
}
me.thumb.on("mouseover", "li", function(e){
clearInterval(me.curInterval);
if( $(e.target).index() == me.currentIdx ) return;
me.currentIdx = $(e.target).index();
me.setCurrent(me.currentIdx);
});
me.thumb.on("mouseout", "li", function(e){
if(me.autoPlay){
me.autoSlide();
}
});
if( me.ispreNextShow == false){
me.slideList.parent().on("mouseover", function(){
if( me.preButton ){
me.preButton.show();
}
if( me.nextButton ){
me.nextButton.show();
}
});
me.slideList.parent().on("mouseout", function(){
if( me.preButton ){
me.preButton.hide();
}
if( me.nextButton ){
me.nextButton.hide();
}
});
}
},
prev: function(){
this.currentIdx--;
if( this.currentIdx < 0 ) this.currentIdx = this.slideList.children().length - 1;
this.setCurrent(this.currentIdx);
},
next: function(){
this.currentIdx++;
if( this.currentIdx >= this.slideList.children().length ) this.currentIdx = 0;
this.setCurrent(this.currentIdx);
},
autoSlide: function(){
var me = this;
if( me.slideList.children().length <= 1 ) return;
if( me.curInterval ) clearInterval(me.curInterval);
me.curInterval = setInterval(function(){
me.currentIdx++;
if( me.currentIdx >= me.slideList.children().length ) me.currentIdx = 0;
me.setCurrent(me.currentIdx);
},me.interval);
}
};
return focusSlide;
});
标签：
原文地址：http://www.cnblogs.com/mbyund/p/5484964.html
