JavaScript輪播圖簡單制作方法
更新時間：2017年02月20日 14:59:47 作者：carlyin
這篇文章主要為大家詳細(xì)介紹了JavaScript輪播圖簡單的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript制作輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<style>
.container{
position: absolute;
left: 0;
top:0;
width: 100%;
overflow: hidden;
border:1px solid #c3c3c3;
border-radius: 4px;
}
.block1{
margin:0;
padding: 0;
display: inline-block;
height: 400px;
background-color: #008800;
}
.block2{
margin:0;
padding: 0;
display: inline-block;
height: 400px;
background-color: #ffff00;
}
.block3{
margin:0;
padding: 0;
display: inline-block;
height: 400px;
background-color: #FF9900;
}
</style>
</head>
<body>
<div class="container" style="position: absolute;left: 0;top:0; width: 100%;height: 400px;">
<div class="block1" style="position: absolute;left: 0;top:0;"></div>
<div class="block2" style="position: absolute;left:0;top:0;"></div>
<div class="block3" style="position: absolute; left:0;top:0;"></div>
</div>
</body>
<script>
var wt=window.innerWidth;
$(".block1").css({width:wt});
$(".block2").css({width:wt,left:wt});
$(".block3").css({width:wt,left:wt*2});
var aa=setInterval(function(){
$(".block1").css({left:parseFloat($(".block1")[0].style.left)-1});
$(".block2").css({left:parseFloat($(".block2")[0].style.left)-1});
$(".block3").css({left:parseFloat($(".block3")[0].style.left)-1});
if($(".block3")[0].style.left=="0px"){
// clearInterval(aa);
// 清除循環(huán)滾動
$(".block1").css({left:0})
$(".block2").css({left:wt})
$(".block3").css({left:wt*2})
}
},2)
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)支持手機(jī)滑動切換的輪播圖片效果實(shí)例
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- zepto中使用swipe.js制作輪播圖附swipeUp,swipeDown不起效果問題
- 原生js實(shí)現(xiàn)移動開發(fā)輪播圖、相冊滑動特效
- JS實(shí)現(xiàn)左右無縫輪播圖代碼
- 簡單的JS輪播圖代碼
- js 基礎(chǔ)篇必看(點(diǎn)擊事件輪播圖的簡單實(shí)現(xiàn))
- 利用AngularJs實(shí)現(xiàn)京東首頁輪播圖效果
- 完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖（下篇）
- 完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖（上篇）
相關(guān)文章
JavaScript是否可實(shí)現(xiàn)多線程 深入理解JavaScript定時機(jī)制
JavaScript的setTimeout與setInterval是兩個很容易欺騙別人感情的方法,因為我們開始常常以為調(diào)用了就會按既定的方式執(zhí)行, 我想不少人都深有同感,2009-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出菜單功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07 
js實(shí)現(xiàn)超酷的照片墻展示效果圖附源碼下載
這篇文章主要介紹了超酷的照片墻展示效果圖附源碼下載的相關(guān)資料,需要的朋友可以參考下
2015-10-10 
使用auto.js實(shí)現(xiàn)自動化每日打卡功能
這篇文章主要介紹了使用auto.js實(shí)現(xiàn)自動化每日打卡,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-08-08 
FullCalendar日歷插件應(yīng)用之?dāng)?shù)據(jù)展現(xiàn)(一)
fullcalendar作為一個功能完善的日歷插件使用非常廣泛，在web開發(fā)開發(fā)過程 中非常流行。它與ext js 中的calendar非常類似，但考慮到extjs 比較“復(fù)雜龐大”，所以我在開發(fā)開發(fā)過程中都會優(yōu)先考慮fullcalendar
2015-12-12 
這篇文章主要介紹了微信小程序中實(shí)現(xiàn)自定義一個帶確定取消的彈窗組件的方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)小程序開發(fā)有一定幫助，需要的可以參考一下
2022-06-06 
這篇文章主要介紹了taro開發(fā)微信小程序的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05 
JS獲取浮動(float)元素的style.left值為空的快速解決辦法
這篇文章主要介紹了JS獲取浮動(float)元素的style.left值為空的快速解決辦法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02 
這篇文章主要給大家介紹了關(guān)于微信小程序組件生命周期的踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03