輪播圖片程式碼整理：型別一：閃現 JQ+原生JS
阿新 • • 發佈：2019-01-06
CSS
<style> li{list-style: none;cursor: pointer;} .playWrap{width:1000px;height:400px;overflow: hidden;margin:0 auto; } .playWrap li{height:400px;line-height: 400px;text-align: center;font-size: 50px;display: none;} .navWrap{width: 200px;height: 50px; margin: 0 auto; position: relative;top: -40px;left: 400px;} .navWrap li{float: left;width: 20px;height: 20px; text-align: center;border:1px solid #000;border-radius: 30px;margin-left: 10px;background-color:#575757;} .onPlay{display: block !important;} .onNav{background-color: #fff !important;} </style>
HTML
<ul class="playWrap"> <li class="onPlay">image1</li> <li>image2</li> <li>image3</li> <li>image4</li> <li>image5</li> </ul> <ul class="navWrap"> <li class="onNav">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
JQ是這段程式碼
<script> //需求分析 //1、點選小圓點顯示與其索引值一致的對應的圖片 //2、圖片自動定時播放時，且對應的指示圓點顯示高亮 //3、滑鼠放在圖片上時候圖片停止播放，滑鼠移開時圖片繼續播放 $(document).ready(function(){ var colorArr = ["pink","red","green","yellow","blue"];//宣告一個顏色陣列 var nav = $(".navWrap").find("li"); //樓層導航 var floor = $(".playWrap").find("li"); //樓層 var playLength = $(".playWrap").find("li").length; var timer = null; var i = 0; console.log(playLength); for(let i=0;i<floor.length;i++){ floor.eq(i).css("background-color",colorArr[i]); } //1、點選小圓點顯示與其索引值一致的對應的圖片 nav.click(function(){ $(".navWrap li").eq($(this).index()).addClass("onNav").siblings().removeClass("onNav"); $(".playWrap li").eq($(this).index()).addClass("onPlay").siblings().removeClass("onPlay"); }) //2、圖片自動定時播放時，且對應的指示圓點顯示高亮 //3、定時播放函式 autoPlay(); //滑鼠移開時繼續自動播放 floor.on("mouseout",function(){ autoPlay() }) function autoPlay(){ var timer = setInterval(function(){ floor.eq(i).addClass("onPlay").siblings().removeClass("onPlay"); nav.eq(i).addClass("onNav").siblings().removeClass("onNav"); i++; if(i===playLength){ i=0; } },1000) //滑鼠放在上面時停止自動播放 floor.mouseover(function(){ clearInterval(timer); }) } }) </script>
原生JS是這段程式碼