//锋利的jQuery幻灯片实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} body {
font-size: 12px;
} .v_show {
width: 592px;
margin: 20px 0px 0 30px;
border: 1px solid #ccc;
} .v_caption {
width: 592px;
height: 40px;
line-height: 40px;
overflow: hidden;
background: url("images/btn_cartoon.gif") repeat-x;
} .cartoon {
float: left;
width: 85px;
margin-right: 10px;
background: url("images/btn_cartoon.gif") 0px -100px no-repeat;
text-indent: -9999px;
} .highlight_tip {
float: left;
padding-top: 16px;
margin-right: 10px
} .highlight_tip span.current {
background: url("images/btn_cartoon.gif") 0px -220px;
} .highlight_tip span {
display: inline;
float: left;
width: 7px;
height: 7px;
overflow: hidden;
margin: 0 2px;
background: url(images/btn_cartoon.gif) no-repeat 0 -320px;
text-indent: -9999px;
} .change_btn {
float: left;
overflow: hidden;
width: 65px;
padding-top: 8px;
} .change_btn span.prev {
display: block;
float: left;
width: 30px;
height: 23px;
background: url("images/btn_cartoon.gif") 0px -400px no-repeat;
text-indent: -9999px;
} .change_btn span.next {
display: block;
float: left;
width: 30px;
height: 23px;
background: url("images/btn_cartoon.gif") -30px -400px no-repeat;
text-indent: -9999px;
} .v_caption em {
float: right;
padding-right: 10px; } .v_caption em a {
font-size: 12px;
text-decoration: none;
color: #2B93D2;
} .v_content {
position: relative;
height: 160px;
overflow: hidden;
} .v_content_list {
height: 160px;
width: 2500px;
position: absolute;
left: 0;
top: 0;
} .v_content_list ul {
list-style: none;
} .v_content_list li {
float: left;
margin: 10px 5px 0;
padding: 5px;
} .v_content_list li a {
display: block;
width: 128px;
height: 80px;
overflow: hidden;
} .v_content_list h4 {
margin-top: 10px;
color: #2B93D2;
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
var page = 1;//初始版面为1
var i = 4;//每个版面放四张图片
$(".next").click(function () {
var $parent = $(this).parents(".v_show");
var $contentlist = $parent.find(".v_content_list");
var $content = $parent.find(".v_content");//left位置要变换的盒子
var v_width = $content.width();//获取到盒子的宽度
var len = $contentlist.find("li").length;//获取到li的个数
var pagecount = Math.ceil(len / i);//最多能够放四张版面
if(!$contentlist.is(":animated")){
if(page==pagecount){//若是第四个版面
$contentlist.animate({left: '0px'}, "slow")//改变left位置，返回为第一个版面
page=1;
}else{
$contentlist.animate({left: '-=' + v_width}, "slow")//v_width向左减宽度
page++;
}
}
$(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current");
})
$(".prev").click(function () {
var $parent = $(this).parents(".v_show");
var $contentlist = $parent.find(".v_content_list");
var $content = $parent.find(".v_content");
var v_width = $content.width();
var len = $contentlist.find("li").length;
var pagecount = Math.ceil(len / i);
if(!$contentlist.is(":animated")){
if(page==1){
$contentlist.animate({left: '-='+v_width*(pagecount-1)}, "slow");//改变为第四个版面
page=4;
}else{
$contentlist.animate({left: '+=' + v_width}, "slow")
page--;
}
}
$(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current")
})
})
</script>
<script></script>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" alt="卡通动漫">卡通动漫</h2>
<div class="highlight_tip">
<span class="current">0</span><span>1</span><span>2</span><span>3</span>
</div>
<div class="change_btn">
<span class="prev">上一个</span><span class="next">下一个</span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>
</ul>
</div>
</div>
</div>
</body>
</html>