<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试jquery</title>
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile.custom.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0; }
img{border:none;}
ul,li{ list-style: none;}
/**
* 幻灯片样式 ↓
**/
.bwslide{ width:100%; overflow:hidden; position:relative; height:380px;}
.bwslide ul{ width:100%; position:relative;}
.bwslide li{ width:100%; text-align:center;}
.bwslide li a{ display:block;}
.bwslide li img{ max-width:100%;}
/*初始化li*/
.bwslide ul li{ opacity:0; position:absolute; left:0; top:0; z-index:3;}
/*节点*/
.bw_list{ position:absolute; z-index:5; bottom:20px; text-align:center; width:100%;}
.bw_list a{ display:inline-block; width:30px; height:5px; margin:0 5px; background:#fff; opacity:0.8;filter:alpha(opacity=80);}
.bw_list a:hover{ background:#000;}
.bw_list a.bw_list_a{ background:#000 !important;}
/*上下按钮*/
.bw_last,.bw_next{width:30px; height:80px; background:#000;opacity:0.8;filter:alpha(opacity=80); cursor:pointer; color:#fff; line-height:80px; font-size:30px; text-align:center; position:absolute; z-index:5;}
.bw_last{ left:0;}
.bw_next{ right:0;}
</style>
</head>
<body>
<div class="bwslide">
<li><a><img src="1.jpeg" /></a></li>
<li><a><img src="2.jpeg" /></a></li>
<li><a><img src="3.jpeg" /></a></li>
<li><a><img src="4.jpeg" /></a></li>
<li><a><img src="5.jpeg" /></a></li>
</div>
<center>
<h1>淡入淡出:t=fade 向左移动:t=slide</h1>
</center>
</body>
</html>
<script type="text/javascript">
/**
* jquery+jquery.mobile 兼容手机滑动 自适应屏幕高宽 幻灯片
* 作者：斌Star in
**/
;(function($){
$.fn.extend({
bwslider:function(m,t,n,b){
var e=0;
var thiss=this;
var bodyw=$("body").width();
var init_cont="<ul></ul><ol class='bw_list'></ol><div class='bw_last'><</div><div class='bw_next'>></div>"; //添加容器
var list_a="bw_list_a";
var init_h=this.children("li").height();
if(init_h>0){
this.height(init_h);
}
var num=this.children().length; //变换图片数量
if(num<2){
return;
}
var init_ul=this.html(); //储存变化图片
this.html(init_cont);
var ul=this.find("ul");
var b_top=(this.height()-$(".bw_last").height())/2;
$(".bw_last,.bw_next").css("top",b_top);
if(n==false){
$(".bw_list").hide();
}
if(b==false){
$(".bw_last,.bw_next").hide();
}
ul.html(init_ul);
var list="";
for(var i=1;i<=num;i++){
list=list+"<a href='javascript:;'></a>";
}
$(".bw_list").html(list);
function is_pc(){
var os = new Array("Android","iPhone","Windows Phone","iPod","BlackBerry","MeeGo","SymbianOS");
var info = navigator.userAgent;
var len = os.length;
for(var i = 0; i < len; i++){
if(info.indexOf(os[i]) > 0){
return false;
}
}
return true;
}
function eqjs(j){
ul.children().css({"z-index":3,"opacity":0});
ul.children().eq(j).css("z-index",4);
ul.children().eq(j).animate({opacity:1},"slow");
$(".bw_list").children().removeClass(list_a);
$(".bw_list").children().eq(j).addClass(list_a);
if(t=="slide"){
ul.children().css({"z-index":3,"opacity":1,"left":"100%"});
ul.children().eq(j).css("left",0);
}
e=j;
}
function eqslide(j){
var k=j-1;
if(k<0){
k=num-1;
}
ul.children().eq(k).animate({left:-bodyw},"slow",function(){$(this).css("left","100%");});
ul.children().eq(j).animate({left:0},"slow");
$(".bw_list").children().removeClass(list_a);
$(".bw_list").children().eq(j).addClass(list_a);
e=j;
}
function eqslide_last(j){
var k_last=j+1;
if(k_last>num-1){
k_last=0;
}
ul.children().eq(j).css("left",-bodyw);
ul.children().eq(k_last).animate({left:"100%"},"slow");
ul.children().eq(j).animate({left:0},"slow");
$(".bw_list").children().removeClass(list_a);
$(".bw_list").children().eq(j).addClass(list_a);
e=j;
}
//初始化图片
eqjs(0);
//按钮动作
$(".bw_next").click(function(){
e=e+1;
if(e>num-1){
e=0;
}
if(t=="fade"){
clearInterval(fade);
eqjs(e);
fade=setInterval(bwfade,m*1000);
}else{
clearInterval(slide);
eqslide(e);
slide=setInterval(bwslide,m*1000);
}
});
$(".bw_last").click(function(){
e=e-1;
if(e<0){
e=num-1;
}
if(t=="fade"){
clearInterval(fade);
eqjs(e);
fade=setInterval(bwfade,m*1000);
}else{
clearInterval(slide);
eqslide_last(e);
slide=setInterval(bwslide,m*1000);
}
});
//节点动作
$(".bw_list a").click(function(){
if(t=="fade"){
clearInterval(fade);
eqjs($(this).index());
fade=setInterval(bwfade,m*1000);
}else{
clearInterval(slide);
eqjs($(this).index());
slide=setInterval(bwslide,m*1000);
}
});
if(!is_pc()){
$(".bw_last,.bw_next").hide();
//手机滑动变换
ul.children("li").on("swipeleft",function(){
e=e+1;
if(e>num-1){
e=0;
}
if(t=="fade"){
clearInterval(fade);
eqjs(e);
fade=setInterval(bwfade,m*1000);
}else{
clearInterval(slide);
eqslide(e);
slide=setInterval(bwslide,m*1000);
}
});
ul.children("li").on("swiperight",function(){
e=e-1;
if(e<0){
e=num-1;
}
if(t=="fade"){
clearInterval(fade);
eqjs(e);
fade=setInterval(bwfade,m*1000);
}else{
clearInterval(slide);
eqslide_last(e);
slide=setInterval(bwslide,m*1000);
}
});
}
//自动变换函数
function bwfade(){
e=e+1;
if(e>num-1){
e=0;
}
eqjs(e);
}
function bwslide(){
e=e+1;
if(e>num-1){
e=0;
}
eqslide(e);
}
function bwslide_last(){
e=e-1;
if(e<0){
e=num-1;
}
eqslide_last(e);
}
if(t=="fade"){
var fade=setInterval(bwfade,m*1000);
}else{
var slide=setInterval(bwslide,m*1000);
}
$(window).resize(function(){
bodyw=$("body").width();
thiss.height(thiss.children("ul").children("li").eq(0).find("img").height());
$(".bw_last,.bw_next").css("top",(thiss.height()-$(".bw_last").height())/2);
});
}
});
})(jQuery);
/**
* bwslider 传4个参数
* 第一个参数是变换时间，
* 第二个参数变换方式 有两种 fade是渐变变换 slide是图片向左滑动变换，
* 第三个参数是否打开节点 true是 false否，
* 第四个参数是否打开左右按钮 true是 false否 (移动端界面较小默认隐藏按钮)
* 调用方法 ↓
**/
$(window).load(function(){
$(".bwslide").bwslider(3,"slide",true,true);
});
</script>
jquery全屏自适应宽度和手机滑动幻灯片
需积分: 19 182 浏览量
2016-05-26
11:11:46
上传
评论 1
收藏 1.33MB ZIP 举报
jquery全屏自适应宽度和手机滑动幻灯片.zip （18个子文件） 
jquery全屏自适应宽度和手机滑动幻灯片 
index.html 7KB
3.jpeg 128KB index.min.html 6KB js jquery.mobile.custom.js 24KB jquery-1.8.1.js 91KB jquery.mobile.custom.min.js 8KB 4.jpeg 77KB 1.jpeg 116KB 5.jpeg 176KB 2.jpeg 139KB mobile index.html 3KB 3.jpeg 154KB js jquery-1.8.1.js 91KB jquery.mobile.custom.min.js 8KB 4.jpeg 107KB 1.jpeg 153KB 5.jpeg 123KB 2.jpeg 152KB资源评论
