標籤：圖片輪播
效果如下
650) this.width=650;" src="http://images2015.cnblogs.com/blog/601849/201609/601849-20160917220146523-52456133.png" style="border:0px;" />
功能分析
1.每隔1秒換一張圖片
2.滑鼠移入停止切換、滑鼠離開繼續切換
3.滑鼠移入到數字上面的時候,顯示和數字對應的圖片,並且停止切換,被選中的數字,背景顯示橙色
4.滑鼠離開數字,從該數字後面繼續顯示
代碼如下
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><style type="text/css">div,img,ul,li {padding: 0px;margin: 0px;}.content {width: 480px;height: 300px;border: 1px solid red;margin: 100px auto;}img {width: 100%;height: 100%;padding-bottom: 10px;}ul li {list-style: none;float: left;border: 1px solid orange;height: 30px;width: 58px;text-align: center;line-height: 30px;}</style></head><body><div class="content"><img src="./img/1.jpg" ><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></div><script type="text/javascript">var oImg = document.getElementsByTagName(‘img‘)[0];var count = 1;function changePic(){count ++;if (count > 8) {count = 1;}oImg.src = ‘img/‘+count+ ‘.jpg‘;}var interID = setInterval(changePic, 1000);//滑鼠移入停止播放oImg.onmouseover = function(){clearInterval(interID);}//滑鼠移出繼續播放oImg.onmouseout = function(){//console.log(interID);clearInterval(interID);interID = setInterval(changePic, 1000);}//滑鼠移入到數字上的時候,顯示對應的圖片var oLi = document.getElementsByTagName(‘li‘);//console.log(oLi.length);for (var num = 0; num < oLi.length; num++) {//給每個li標籤增加屬性，儲存當前的索引位置oLi[num].index = num;//移到到數字上,停止播放oLi[num].onmouseover = function(){//停止播放clearInterval(interID);this.style.background = ‘orange‘;count = this.index;//調用迴圈播放圖片方法changePic();}//移出時,繼續從停止的地方播放oLi[num].onmouseout = function(){clearInterval(interID);interID = setInterval(changePic, 1000);this.style.background = ‘white‘;count = this.index;changePic();}}</script></body></html>
本文出自 “流體石頭部落格” 部落格，請務必保留此出處http://flowstone.blog.51cto.com/8188216/1853451
用js寫的簡單輪播特效
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
