实现利用jq图片点击轮播

来源：互联网发布：ie没有java加载项编辑：程序博客网时间：2024/05/18 01:58

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
*{margin:0;padding:0;}
ul li {
float: left;
list-style-type:none;
}
.v_content_list {
height: 300px;
position: relative;
width: 1100px;
}
.v_content {
height: 300px;
width: 200px;
position: relative;
overflow:hidden;
}
.current{width:10px;height:10px;border:1px #ff0000 solid;}
</style>
<meta charset="utf-8" />
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
<div class="highlight_tip">
<span class="current">1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="change_btn">
<span class="next">下一页</span>
<span class="prev">上一页</span>
</div>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><img src="1.jpg" /><h4>图片1</h4><span>播放量：<em>2531</em></span></li>
<li><img src="2.jpg" /><h4>图片2</h4><span>播放量：<em>2531</em></span></li>
<li><img src="3.jpg" /><h4>图片3</h4><span>播放量：<em>2531</em></span></li>
<li><img src="4.jpg" /><h4>图片4</h4><span>播放量：<em>2531</em></span></li>
<li><img src="1.jpg" /><h4>图片1</h4><span>播放量：<em>2531</em></span></li>
</ul>
</div>
</div>
</div>
<script>
$(function(){
var page = 1;
var i = 1;
$("span.next").click(function () {
var $parent = $(this).parents("div.v_show");//找到父元素
var $v_show = $parent.find("div.v_content_list");//找到要变化的子元素
var $v_content = $parent.find("div.v_content"); //找到要变化的外围元素
var v_width = $v_content.width(); //获取他的宽度
var len = $v_show.find("li").length;//得到有几个子元素
var page_count = Math.ceil(len / i);//向上取整
if (!$v_show.is(":animated")) {//当前没在运动
if (page == page_count-1) {//当在第四张的时候,这里我直接算出了800，200一张，再用回调函数重新设置位置
$v_show.animate({ left: "-800px" }, 1000, function () { $v_show.css({left:"0px"}) });
page = 1;
}
else {
$v_show.animate({ left: '-=' + v_width }, 1000);
page++;//移动的距离
}
}
$parent.find("span").eq(page - 1).addClass("current").siblings().removeClass("current");
});//得到当前的索引值，给当前的span元素添加current，而他的兄弟则移出
$("span.prev").click(function () {
var $parent = $(this).parents("div.v_show");
var $v_show = $parent.find("div.v_content_list");
var $v_content = $parent.find("div.v_content");
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i);
if (!$v_show.is(":animated")) {
if (page == 1) {
$v_show.css({ left: "-800px" }); $v_show.animate({ left: "-600px" },1000)
page = page_count-1;
}
else {
$v_show.animate({ left: '+=' + v_width }, 1000);
page--;
}
}
$parent.find("span").eq(page - 1).addClass("current").siblings().removeClass("current");
});
})//同上
</script>
</body>
</html>

阅读全文

0 0