JS實現(xiàn)圖片自動播放效果
更新時間：2021年08月20日 09:48:21 作者：Tanersci
這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片自動播放效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)圖片自動播放效果的具體代碼，供大家參考，具體內(nèi)容如下
JS實現(xiàn)圖片自動播放
1、先看效果圖
2、完整代碼
<!DOCTYPE html>
<html>
<head>
<style>
/* 定義樣式 */
body{
margin: 5% 30%;
}
.bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-shadow: 0 0 12px 2px #142732;}
.box{width:700px;height:400px;margin:0px auto;overflow: hidden;}
/* box的寬度為img的個數(shù)乘以bannerimage的寬度*/
.img-g{width:4900px;height:400px;position:relative;}
.img-g img{float:left;width:700px;height:400px;}
.button-g{position:relative;top:-35px;text-align:center;}
.button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0 5px;border-radius:100%;cursor: pointer;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
// 實現(xiàn)自動播放
var p=document.getElementsByClassName('img-g')[0];
var button=document.querySelectorAll('.button-g span')
// 設(shè)置3秒播放
window.timer=setInterval(move,3000);
// 輪播設(shè)置
function move(){
// bannerimage的寬度乘以圖片的個數(shù)
if(parseInt(p.style.left)>-4200){
// 和bannerimage的寬度保持一致即可：700
p.style.left=parseInt(p.style.left)-700+'px'
p.style.transition='left 1s';
tog(-Math.round(parseInt(p.style.left)/700))
if(parseInt(p.style.left)<=-4200){
setTimeout(function(){
tog(0)
p.style.left='0px'
p.style.transition='left 0s';
},1000)
}
}else{
p.style.left='0px'
p.style.transition='left 0s';
}
}
// 設(shè)置小圓點
for(var i=0;i<button.length;i++){
// button[i].style.backgroundColor='#eee';
button[i].onclick=function(){
p.style.left=-700*this.getAttribute('data-index')+'px'
tog(this.getAttribute('data-index'))
clearInterval(window.timer)
window.timer=setInterval(move,3000);
}
}
// 設(shè)置小圓點
function tog(index){
if(index>5){
tog(0);
return;
}
for(var i=0;i<button.length;i++){
button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
}
button[index].style.backgroundColor='rgb(255, 255, 255)';
}
// 鼠標移上事件
p.onmouseover=function(){
clearInterval(window.timer)
}
// 鼠標移除事件
p.onmouseout=function(){
window.timer=setInterval(move,3000);
}
});
</script>
</head>
<body>
<div class="bannerimage">
<div class='box'>
<div class='img-g' style='left:0px;transition:left 1s;'>
<img src="images/img_1.jpg" alt="1">
<img src="/images/img_2.jpg" alt="2">
<img src="/images/img_3.jpg" alt="3">
<img src="/images/img_4.jpg" alt="4">
<img src="/images/img_5.jpg" alt="5">
<img src="/images/img_6.jpg" alt="6">
<img src="/images/img_1.jpg" alt="1">
</div>
<div class='button-g'>
<span data-index='0' style="background-color: #eeeeee"></span>
<span data-index='1' style="background-color: rgba(255, 255, 255, 0.5)"></span>
<span data-index='2' style="background-color: rgba(255, 255, 255, 0.5)"></span>
<span data-index='3' style="background-color: rgba(255, 255, 255, 0.5)"></span>
<span data-index='4' style="background-color: rgba(255, 255, 255, 0.5)"></span>
<span data-index='5' style="background-color: rgba(255, 255, 255, 0.5)"></span>
</div>
</div>
</div>
</body>
</html>
3、關(guān)鍵代碼講解
3.1、css設(shè)置注意事項：img-g的寬度為：img的個數(shù)乘以bannerimage的寬度，如下：
.img-g{width:4900px;height:400px;position:relative;}
3.2、輪播常量及事件設(shè)置
常量1設(shè)置為：bannerimage的寬度乘以圖片的個數(shù)，如下：
if(parseInt(p.style.left)>-4200){}
常量2設(shè)置為：bannerimage的寬度保持一致即可（700），如下：
p.style.left=parseInt(p.style.left)-700+'px'
小圓點顯示設(shè)置：
// 設(shè)置小圓點
for(var i=0;i<button.length;i++){
button[i].style.backgroundColor='#eee';
button[i].onclick=function(){
p.style.left=-700*this.getAttribute('data-index')+'px'
tog(this.getAttribute('data-index'))
clearInterval(window.timer)
window.timer=setInterval(move,3000);
}
}
// 設(shè)置小圓點點擊事件
function tog(index){
// 圓點的個數(shù)
if(index>5){
tog(0);
return;
}
for(var i=0;i<button.length;i++){
// 默認圓點的顯示顏色
button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
}
// 當前圓點的顯示顏色
button[index].style.backgroundColor='rgb(255, 255, 255)';
}
鼠標事件：鼠標移上停止播放，移除3秒后播放。
// 鼠標移上事件
p.onmouseover=function(){
clearInterval(window.timer)
}
// 鼠標移除事件
p.onmouseout=function(){
window.timer=setInterval(move,3000);
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js判斷當頁面無法回退時關(guān)閉網(wǎng)頁否則就history.go(-1)
當頁面沒有前驅(qū)歷史記錄時，點擊返回按鈕時直接關(guān)閉頁面，否則就退回到前一頁2014-08-08
這篇文章主要介紹了js怎么判斷瀏覽器類型，當類型為ie6時如何不執(zhí)行,需要的朋友可以參考下2014-06-06
本文主要分享了javascript實現(xiàn)淡入淡出輪播切換功能的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
js 如何打印預(yù)覽，實局部打印頁面很簡單。就是把你需要打印的部分做一個起始標記，下面有個示例大大家不妨參考下2014-07-07
詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積
這篇文章主要介紹了詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
JavaScript之事件委托實例(附原生js和jQuery代碼)
下面小編就為大家?guī)硪黄狫avaScript之事件委托實例(附原生js和jQuery代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要給大家介紹了關(guān)于如何使用less實現(xiàn)隨機下雪動畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
JS的encodeURI和java的URLDecoder.decode使用介紹
如果不想在url中看到有明文可以使用js的encodeURI的URLDecoder.decode一起使用一起來把url加密下，下面有個不錯的示例，大家不妨參考下2014-05-05
這篇文章主要為大家詳細介紹了JavaScript生成圖形驗證碼的相關(guān)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07