使用jquery封装的一个幻灯片插件 写的好差 参考了别人写的 后面再重构 现在这个应该可以直接用了
主要实现思路就是 添加当前选中状态 index相对应的 选中的图总是在第一位(也就是加选中状态的li 总是第一个) 这样不管前滚动还是后滚动都是选中的第一个
这里用的关键的jquery prepend()函数 在匹配元素内部 前置 就是一直第一位插入 使用方法$('p').prepend(获取到的元素) 这里获取的元素可以用$('.slide').find('ul').eq(1),不需要再获取下面的内容html()
自己整理修改的一个jquery 后面会在重构一下的
完整例子下载
http://pan.baidu.com/s/1ntJ08I1
使用讲解：
HTML 最外层的div控制位置和宽度 使用的是ul li 一个图片在一个li里就行
<div style=" width: 1366px; margin: 0px auto; overflow: hidden;"> <div class="focus" id="focus001">
<ul>
<li><a href="#" target="_blank"><img src="data:images/slide.png" height="520" /></a>
<div class="slide-text">
<p class="slide-text-header">111111111111111111安全管控物联网应用平台</p>
<p class="slide-text-content">安全管控物联网应用平台根据*实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="data:images/slide.png" height="520" /></a>
<div class="slide-text">
<p class="slide-text-header">222222222222222222安全管控物联网应用平台</p>
<p class="slide-text-content">安全管控物联网应用平台根据*实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p>
</div>
</li>
<li>
<a href="#" target="_blank"><img src="data:images/slide.png" height="520" />
</a>
<div class="slide-text">
<p class="slide-text-header">33333333333333333333安全管控物联网应用平台</p>
<p class="slide-text-content">安全管控物联网应用平台根据*实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p>
</div></li>
<li>
<a href="#" target="_blank"><img src="data:images/slide.png" height="520" /></a>
<div class="slide-text">
<p class="slide-text-header">444444444444444444444444444安全管控物联网应用平台</p>
<p class="slide-text-content">安全管控物联网应用平台根据*实际情况，依托最新的物联网技术，结合视频监控智能分析等技术，建设相应系统。</p>
</div>
</li>
</ul>
</div> </div>
css 这个我写在页面内里 可以单独拿出来 弄个css 注意图片的路径位置即可
/*slide*/
.focus {width:100%; height:520px; overflow:hidden; position:relative; font-family: "\5FAE\8F6F\96C5\9ED1"}
.focus ul {
height:520px;
position:absolute;
padding-left: 0px;
margin-left: 0px\9
}
.focus ul li {float:left; height:520px; overflow:hidden;
position:relative;
background:#000;}
.focus ul li div.slide-text{ position:absolute; color:#fff; top:42%; left:25%; }
.focus ul li div.slide-text .slide-text-header{ font-size: 24px; }
.focus ul li div.slide-text .slide-text-content{ font-size: 14px; width: 480px;}
.focus ul li div {position:absolute; overflow:hidden;}
.focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000; display:none;}
.focus .btn {
position:absolute;
/* width:780px;*/
height:23px;
padding:0px 10px 0px 0px;
left:612px;
top:90%;
/* margin-left: -10%;*/
bottom:6px;
text-align:left;
}
.focus .btn span {
display:inline-block;
_display:inline;
_zoom:1;
width:18px;
height:18px;
line-height:18px;
text-align:center;
_font-size:0;
margin-left:5px;
cursor:pointer;
background:#fff;
border-radius: 18px;
text-indent:-99999px;
}
.focus .btn span.on {background:#fff;}
.focus .preNext {width:45px; height:100px; position:absolute; top:90px;cursor:pointer;}
.focus .pre {left:170px;top:40%; background:url('images/prev.png') no-repeat left center;}
.focus .next {right:170px;top:40%; background:url('images/next.png') no-repeat right center;}
JS 这个就是封装的插件 jquery的插件 然后 复制下来保存一个js文件 比如1.js
$(function() {
jQuery.focus = function(slid) {
var sWidth = $(slid).width(); //获取焦点图的宽度（显示面积）
var len = $(slid).find("ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
/*为图片添加可视宽度*/
$(slid).find('ul li a img').css({"width":sWidth});
/*添加img index索引位置*/
for(var j= 0,jj=$(slid).find('ul li').length;j<jj;j++){
$(slid).find('ul').find('li').eq(j).attr({"img-index":j});
}
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
var ii = i;
btn += "<span>"+ii+"</span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$(slid).append(btn);
$(slid).find("div.btnBg").css("opacity",0.5);
//为小按钮添加鼠标滑入事件，以显示相应的内容
$(slid+" div.btn span").css("opacity",0.4).mouseenter(function() {
index = $(slid+" .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//上一页、下一页按钮透明度处理
$(slid+" .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
//上一页按钮
$(slid+" .pre").click(function() {
index -= 1;
if(index == -1) {index = len-1;}
showPics(index);
});
//下一页按钮
$(slid+" .next").click(function() {
index += 1;
if(index == len) {
index = 0;
}
showPics(index);
});
//左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$(slid+" ul").css("width",sWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$(slid).hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index,'next');
index++;
if(index == len) {
index = 0;
}
},2000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) {
addState(index);
/*向左滚动一个图片宽度*/
var nowLeft = - sWidth;
if(index !== 0){
scrollLeft(nowLeft);
}
else{
/*索引为0时候 第一个元素如果是最后的索引值 就添加到队尾*/
var first_li =$(slid).find("ul li").first();
/*最后一个元素单独执行 添加到队尾*/
if(first_li.attr('img-index') == len-1){
scrollLeft(nowLeft);
}
if(index == 0){
scrollLeft(nowLeft);
}
}
}
/*执行animate滚动效果*/
function scrollLeft(nowLeft){
$(slid+" ul").animate({"left":nowLeft},"normal",function(){
/*var li_first = $(slid).find("ul li").first();
$(slid).find("ul").append(li_first);*/
$(this).css({"left":"0px"});
});
}
function addState(index){
var lis =$(slid).find("ul li").length;
var first_li =$(slid).find('ul li').first();
for(var j= 0,jj=lis;j<jj;j++){
var attr =$(slid).find("ul li").eq(j).attr('img-index');
if( attr == index){
$(slid).find("ul li").eq(j).addClass("on").siblings().removeClass("on");
/*当前的li总是在第一个*/
$(slid).find("ul").prepend($(slid).find("ul li").eq(j));
$(slid+" .btn span").removeClass("on").eq(attr).addClass("on");
$(slid+" .btn span").stop(true,false).animate({"opacity":"0.4"},500).eq(attr).stop(true,false).animate({"opacity":"1"},500);
}
}
}
};
});
记得加载js文件 头部底部都可以 最好底部
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/1.js"></script>