js實(shí)現(xiàn)適合新聞?lì)悎D片的輪播效果
更新時(shí)間：2017年02月05日 16:39:40 作者：Lasy
本文主要分享了js實(shí)現(xiàn)適合新聞?lì)悎D片輪播效果的示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
話不多說(shuō)，請(qǐng)看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Picture carousel</title>
<style>
*
{
margin: 0;
padding: 0;
}
.carousel-container
{
overflow: hidden;
width: 405px;/* 130*3+5*3 = 405 */
height: 150px;
margin: 50px auto;
background-color: #2c2c2c;
}
.carousel-area
{
width: 1350px;/* 675*2 = 1350 */
height: 150px;
}
.carousel-ul
{
float: left;
overflow: hidden;
width: 675px;/* 130*5+5*5 = 675 */
height: 150px;
}
.carousel-ul li
{
float: left;
overflow: hidden;
width: 130px;
height: 130px;
margin: 10px 5px 10px 0;
list-style-type: none;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel-area">
<ul class="carousel-ul" id="carousel-ul-1">
<li><img src="img/1.gif" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.gif" alt=""></li>
</ul>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var carousel_interval_id, //interval ID
start_carousel_flag = false, //是否開(kāi)始interval
carousel_speed = 50, //滾動(dòng)速度（px/s）,carousel_speed=1000/interval時(shí)間間隔。
start_interval = function() { //執(zhí)行interval
start_carousel_flag = true;
carousel_interval_id = setInterval(function() {
var margin_left = $('.carousel-area').css('margin-left');
$('.carousel-area').css('margin-left', (parseInt(margin_left) - 1) + 'px'); //不斷左移1px
if (parseInt($('.carousel-area').css('margin-left')) <= -($('.carousel-ul').width())) { //輪播部分超出容器后復(fù)位
$('.carousel-area').css('margin-left', 0);
}
}, 1000 / carousel_speed)
},
end_interval = function() { //停止interval
start_carousel_flag = false;
carousel_interval_id = clearInterval(carousel_interval_id);
}
$('.carousel-area').append('<ul class="carousel-ul">' + $('.carousel-ul').html() + '</ul>'); //復(fù)制carousel-ul，填補(bǔ)左移后出現(xiàn)的無(wú)內(nèi)容區(qū)域，以此完成循環(huán)
start_interval();
$('.carousel-area').hover(
function() { //鼠標(biāo)懸停事件
if (start_carousel_flag) { //已經(jīng)開(kāi)始interval
end_interval();
}
},
function() { //鼠標(biāo)離開(kāi)事件
if (!start_carousel_flag) { //沒(méi)有開(kāi)始interval
start_interval();
}
}
)
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
不管瀏覽器更新的多快，號(hào)稱多么支持標(biāo)準(zhǔn)。廠商不同，他們之間還是有很多差異。我們需要區(qū)分出這些差異，針對(duì)不同的瀏覽器做不同的處理。2015-10-10
下面小編就為大家?guī)?lái)一篇淺談js的解析順序 作用域 嚴(yán)格模式。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
JavaScript中for..in循環(huán)陷阱介紹
for...in循環(huán)中的循環(huán)計(jì)數(shù)器是字符串，而不是數(shù)字它包含當(dāng)前屬性的名稱或當(dāng)前數(shù)組元素的索引，下面有個(gè)不錯(cuò)的示例大家可以參考下2013-11-11
這篇文章主要介紹了JS數(shù)組及對(duì)象遍歷方法代碼匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
純JavaScript代碼實(shí)現(xiàn)移動(dòng)設(shè)備繪圖解鎖
為了個(gè)人信息的安全起見(jiàn)，移動(dòng)設(shè)備上都有個(gè)繪圖解鎖，使用起來(lái)非常簡(jiǎn)單，代碼是怎么實(shí)現(xiàn)的呢？下面小編給大家介紹js實(shí)現(xiàn)移動(dòng)設(shè)備繪圖解鎖，需要的朋友可以參考下2015-10-10
js+css實(shí)現(xiàn)導(dǎo)航效果實(shí)例
這篇文章主要介紹了js+css實(shí)現(xiàn)導(dǎo)航效果,實(shí)例分析了下拉菜單導(dǎo)航的js實(shí)現(xiàn)方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性詳細(xì)解析
這篇文章主要是對(duì)js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
關(guān)于實(shí)現(xiàn)代碼語(yǔ)法標(biāo)亮 dp.SyntaxHighlighter
關(guān)于實(shí)現(xiàn)代碼語(yǔ)法標(biāo)亮 dp.SyntaxHighlighter...2007-02-02
js閉包的6種應(yīng)用場(chǎng)景總結(jié)
如果一個(gè)函數(shù)訪問(wèn)了此函數(shù)的父級(jí)及父級(jí)以上的作用域變量,那么這個(gè)函數(shù)就是一個(gè)閉包,本文將給大家分享js閉包的6種應(yīng)用場(chǎng)景,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
bootstrap實(shí)現(xiàn)的自適應(yīng)頁(yè)面簡(jiǎn)單應(yīng)用示例
這篇文章主要介紹了bootstrap實(shí)現(xiàn)的自適應(yīng)頁(yè)面簡(jiǎn)單應(yīng)用,結(jié)合具體實(shí)例形式分析了基于bootstrap的列表布局結(jié)構(gòu)頁(yè)面實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2017-03-03