左右箭头滚动幻灯片

近期实现个幻灯片，看见个小伙伴使用的插件不错，遂copy下来，3Q峰，哈。

 

========================HTML==============================

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en">
<html>

<head>
<title> slide </title>
<meta name="generator" content="editplus">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="css/base.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/tabscroll.js"></script>
</head>

<body>
<!--wrapper-->
<div class="wrapper">
<div id="focus" class="focus">
<ul class="clearfx">
<li>
<a href="javascript:void(0);"><img src="images/01.jpg" title="" /></a>
</li>
<li>
<a href="javascript:void(0);"><img src="images/02.jpg" title="" /></a>
</li>
<li>
<a href="javascript:void(0);"><img src="images/03.jpg" title="" /></a>
</li>
<li>
<a href="javascript:void(0);"><img src="images/04.jpg" title="" /></a>
</li>
</ul>
</div>
</div>
<!--wrapper-->
<script>
$(function() {　　　　　
$('#focus').slideFocus();
});
</script>
</body>

</html>

======================CSS============================

ul {
list-style: none;
}
a {
text-decoration: none;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
form {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #fff;
font-size: 12px;
font-family: Microsoft YaHei;
SimSun, Arial, Helvetica, sans-serif;
}
.fl {
float: left;
}
.fr {
float: right;
}
img {
border: none;
}
/*下面开始*/

.wrapper {
width: 990px;
height: 450px;
margin: 50px auto 40px;
}
.focus {
width: 990px;
height: 450px;
overflow: hidden;
position: relative;
}
.focus ul {
height: 400px;
position: absolute;
overflow: hidden;
}
.focus ul li {
float: left;
width: 990px;
height: 397px;
overflow: hidden;
position: relative;
}
.focus ul li img {
width: 990px;
height: 397px;
}
.clearfx:after {
display: block;
clear: both;
content: "";
height: 0;
visibility: hidden;
}
.focus .btn {
position: absolute;
width: 970px;
height: 10px;
padding: 5px 10px;
right: 0;
bottom: 5px;
text-align: center;
}
.focus .btn span {
display: inline-block;
_display: inline;
_zoom: 1;
width: 15px;
height: 15px;
_font-size: 0;
margin-left: 25px;
cursor: pointer;
background: #e7e7e7;
border-radius: 50%;
}
.focus .btn span.on {
background: yellow;
}

.focus .preNext{width:45px;height:100px;position:absolute;top:150px;background:url(../images/sprite.png) no-repeat 0 0;cursor:pointer;display:none;}
.focus .pre{left:0;}
.focus .next{right:0;background-position:right top;}

======================JS========================

jQuery.fn.extend({

slideFocus: function(){
var This = $(this);
var sWidth = $(This).width(),
len =$(This).find('ul li').length,
index = 0,
Timer;

// btn event
var btn = "<div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
};
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$(This).append(btn);
$(This).find('.btn span').eq(0).addClass('on');


$(This).find('.btn span').mouseover(function(){
index = $(This).find('.btn span').index(this);
Tony(index);
});

$(This).find('.next').click(function(){
index++;
if(index == len){index = 0;}
Tony(index);
});

$(This).find('.pre').click(function(){
index--;
if(index == -1){index = len - 1;}
Tony(index);
});


// start setInterval
$(This).find('ul').css("width",sWidth * (len));
$(This).hover(function(){
clearInterval(Timer);
show($(This).find('.preNext'));
},function(){
hide($(This).find('.preNext'));
Timer=setInterval(function(){
Tony(index);
index++;
if(len == index){index = 0;}
}, 2000)
}).trigger("mouseleave");

function Tony(index){
var new_width = -index * sWidth;
$(This).find('ul').stop(true,false).animate({'left' : new_width},300);
$(This).find('.btn span').stop(true,false).eq(index).addClass('on').siblings().removeClass('on');
};


// show hide
function show(obj){ $(obj).stop(true,false).fadeIn();}
function hide(obj){ $(obj).stop(true,false).fadeOut();}
}
});

 

==================================

当然还要添加jquery-1.7.2.min.js

==================================

 链接地址：https://files.cnblogs.com/files/leshao/slide.rar

posted @ 2015-10-09 10:08  乐少007  阅读(160)  评论(0)    收藏  举报