图片横向动态显示
程序员文章站
2024-01-02 12:25:58
...
注意事项：
- :animated选择器，选中有动画效果的元素；
2.animate()方法，使用"+="和"-="创建相对动画
//:animated选择器实例
div{
height: 40px;
width: 100px;
position: relative;
margin-bottom: 5px;
background: #98bf21;
}
<div></div>
<div id="box"></div>
<div></div>
<button class="btn1">点击选中有动画效果的元素</button>
//js
$(function() {
function box() {
$("#box").animate({width: 300},"slow");
$("#box").animate({width: 100}, "slow", box); //这里box表示自己调用自己
}
box();
$(".btn1").click(function{
$(":animated").css("background-color": "green");
})
})
//出现的是效果是，有动画状态的div会变成绿色
图片动态显示
<body>
<div id="box">
<div id="title">
<h1>图片展示</h1>
<div class="point">
<span class="select">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="page">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div id="mian">
<div class="a">
<ul>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题一</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题2</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题3</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题4</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
<li>
<a href="#"></a>
<h1><a href="#">标题5</a></h1>
<span>时间：<em>2016-7-8</em></span>
</li>
</ul>
</div>
</div>
</div>
</body>
/*css*/
*{
margin: 0;
padding: 0;
font-size: "宋体";
}
body {
font-size: 14px;
}
ul {
list-style-type: none;
}
a {
color: red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: 0;
}
h1 {
font-size: 14px;
}
#box {
width: 595px;
margin: 0 auto;
border: 1px solid #e7e7e7;
}
#title {
height: 35px;
background: #eee;
/*line-height: 35px;*/
}
#title h1 {
height: 35px;
line-height: 35px;
padding-left: 10px;
float: left;
}
#title .point {
float: left;
margin: 14px 0 0 10px;
}
#title .point span{
width: 7px;
height: 7px;
float: left;
margin: 0 2px;
background: url(../img/15/1.gif) no-repeat center center;
text-indent: -999px;
cursor: pointer;
}
#title .point .select {
background: url(../img/15/2.gif) no-repeat center center;
}
#title .page span{
float: left;
background: url(../img/15/3.gif) no-repeat;
width: 31px;
height: 22px;
margin-top: 7px;
text-indent: -999px;
cursor: pointer;
}
#title .page span.next {
background-position: -31px 0;
}
#title em {
float: right;
padding-right: 10px;
padding-top: 8px;
}
#mian {
overflow: hidden;
width: 595px;
height: 165px;
/*overflow: hidden;*/
position: relative;
/*border: 1px solid #e7e7e7;*/
border-top: none;
}
#mian .a {
width: 2222px;
position: absolute;
top: 0;
left: 0;
}
#mian ul li{
float: left;
margin: 10px 2px 0 2px;
padding: 8px;
}
#mian ul li h1 {
padding-top: 4px;
padding-left: 5px;
}
//js
$(function() {
var page = 1; //定义显示页面只有1个
var i = 4; // 每个页面显示4副图片
//点击向右移动
$(".next").click(function() {
var e1 = $(this).parents("#box");//找到ID为box的父元素
// find()搜索当前元素所有的后代元素
var e2 = e1.find(".a");
var e3 = e1.find("#mian");
var width = e3.width();//
console.log(width)
var len = e2.find("li").length; //获取有li的个数
var page_count = Math.ceil(len / i);//计算出有几页图片;
console.log(page_count)
if (!e3.is(":animated")) { //不是动画的时候执行
// += 或者 -=创建相对动画
if (page_count === page) {
//如果显示的是第最后页，那么div的left为0px
e2.animate({left: "0px"}, "slow");
console.log(page)
page = 1;
}else {
e2.animate({
left: "-=" + width
}, "slow")
page++;
console.log(page)
}
}
var point = e1.find(".point");
var a = point.find("span")
console.log(e1.find("span"))
// 给第eq(page - 1)个span元素添加class
a.eq(page - 1).addClass("select").siblings().removeClass("select");
});
//向左移动
$(".prev").click(function() {
var e1 = $(this).parents("#box");
var e2 = e1.find("#mian");
var e3 = e2.find(".a");
var width = e2.width();
var len = e3.find("li").length;
var page_count = Math.ceil(len / i);
if (page === 1) {
e3.animate({left: "-=" + width * (page_count - 1)}, "slow");
page = page_count
}else {
e3.animate({left: "+=" + width}, "slow");
page--;
}
e1.find("span").eq(page - 1).addClass("select").siblings().removeClass("select");
})
})