您的位置：首页 > Web前端 > JQuery

CSS+jQuery/JavaScript图片切换播放

2011-12-12 14:21 295 查看

主要用到的是CSS样式控制和简单的Jquery逻辑控制。

CSS：使得图片播放框的大小适合并固定，同时实现溢出隐藏，这样就可以使尚没应该播放的图片得以隐藏；另外，它还自定义手动切换按钮的效果。

Jquery：根据逻辑和设置的时间，循环移除/添加控件里面的样式class，实现图片的隐与显。

总之一句，核心原理是对图片相对位置的控制。

下面是最基本和简陋Demo。完全可以再拓展，用到函数方法的封装，OOP之类的。

页面代码：

<!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>
<title></title>
<script src="../script/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../script/keyImg.js" type="text/javascript"></script>
<style type="text/css">
.img_play
{

}
.img_play_left
{
position:relative;
overflow:hidden;
background-color:Silver;
}
.img_play_left img, .img_play_left
{
float:left;
width:700px;
height:400px;
}

.img_play_left img
{
position:absolute;
left:700px;
}
.img_play_left .img_play_left_current
{
left:0px;
}
.img_play_left_btn_panel
{
width:100%;
clear:left;
}
.btn
{
cursor:pointer;
float:left;
margin:2px;
}
.img_play_left_btn_current
{
background-color:#fe4020;
}
.img_play_left_btn_box
{
width:20px;
height:20px;
float:left;
text-align:center;
}
</style>
</head>
<body>
<div>
<div class="img_play">
<div class="img_play_left">
<img src="../images/1.jpg" alt="img0" id="img0" class="img_play_left_current" />
<img src="../images/2.jpg" alt="img1" id="img1" />
<img src="../images/3.jpg" alt="img2" id="img2" />
</div>

<div class="img_play_left_btn_panel">
<div class="btn img_play_left_btn img_play_left_btn_current" id="img_play_left_btn_0">
<div class="btn img_play_left_btn_box">1</div>
</div>
<div class="btn img_play_left_btn" id="img_play_left_btn_1">
<div class="btn img_play_left_btn_box">2</div>
</div>
<div class="btn img_play_left_btn" id="img_play_left_btn_2">
<div class="btn img_play_left_btn_box">3</div>
</div>
</div>
</div>
</div>
</body>
</html>

关键的JS代码来了：

$(document).ready(function () {
//start
var currentImgIndex = 0;
var nextImgIndex = 1;
var moveImgAuto = true;

jQuery('.img_play_left_btn').click(function () {
var tmp = parseInt(this.id.split('_')[4]);
if (tmp == currentImgIndex)
return;

nextImgIndex = tmp;
moveImgAuto = false;
moveImg();
});

setInterval(moveImg, 3000);

function moveImg()
{
var $currentImg=jQuery('#img'+currentImgIndex);
var $nextImg=jQuery('#img'+nextImgIndex);
var $currentBtn=jQuery('#img_play_left_btn_'+currentImgIndex);
var $nextBtn=jQuery('#img_play_left_btn_'+nextImgIndex);

if (nextImgIndex>currentImgIndex || moveImgAuto)
{
$nextImg.css('left', 700).animate({left:0}, 500);
$currentImg.animate({left:-700}, 500);
$currentBtn.removeClass('img_play_left_btn_current');
}
else
{
$nextImg.css('left', -700).animate({left:0}, 500);
$currentImg.animate({left:700}, 500);
}
$currentBtn.removeClass('img_play_left_btn_current');
$nextBtn.addClass('img_play_left_btn_current');

currentImgIndex=nextImgIndex;
nextImgIndex=(currentImgIndex+1)%3;
moveImgAuto=true;
}

//over
});

效果图很简陋，需要的可以在页面代码的CSS样式中重新自定义。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航