當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
CSS+jQuery/JavaScript图片切换播放
生活随笔
收集整理的這篇文章主要介紹了
CSS+jQuery/JavaScript图片切换播放
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
主要用到的是CSS樣式控制和簡(jiǎn)單的Jquery邏輯控制。
CSS：使得圖片播放框的大小適合并固定，同時(shí)實(shí)現(xiàn)溢出隱藏，這樣就可以使尚沒(méi)應(yīng)該播放的圖片得以隱藏；另外，它還自定義手動(dòng)切換按鈕的效果。
Jquery：根據(jù)邏輯和設(shè)置的時(shí)間，循環(huán)移除/添加控件里面的樣式class，實(shí)現(xiàn)圖片的隱與顯。
總之一句，核心原理是對(duì)圖片相對(duì)位置的控制。
下面是最基本和簡(jiǎn)陋Demo。完全可以再拓展，用到函數(shù)方法的封裝，OOP之類的。
頁(yè)面代碼：
<!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>
關(guān)鍵的JS代碼來(lái)了：
$(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
});
效果圖很簡(jiǎn)陋，需要的可以在頁(yè)面代碼的CSS樣式中重新自定義。
轉(zhuǎn)載于:https://www.cnblogs.com/oneivan/archive/2011/12/12/2284785.html
總結(jié)
以上是生活随笔為你收集整理的CSS+jQuery/JavaScript图片切换播放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python基础之---03基本语法
- 下一篇： 如何成为一个伟大的 JavaScript