用js写的简单轮播特效

来源：互联网发布：饺子皮知乎编辑：程序博客网时间：2024/06/05 06:04

效果如下

功能分析

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" alt=""><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>

0 0