首页 > 代码库 > 用js写的简单轮播特效
用js写的简单轮播特效
效果如下
功能分析
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="http://www.mamicode.com/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 = http://www.mamicode.com/‘img/‘+count+ ‘.jpg‘;>
用js写的简单轮播特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。