當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
CSS+jQuery/JavaScript图片切换播放
生活随笔
收集整理的這篇文章主要介紹了
CSS+jQuery/JavaScript图片切换播放
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
主要用到的是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樣式中重新自定義。
轉載于:https://www.cnblogs.com/oneivan/archive/2011/12/12/2284785.html
總結
以上是生活随笔為你收集整理的CSS+jQuery/JavaScript图片切换播放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python基础之---03基本语法
- 下一篇： 《大西洋月刊》：在线能影响中国高等教育吗