图片轮播代码
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>jQuery轮播图代码-jq22.com</title> | |
| <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul, li { | |
| list-style: none; | |
| } | |
| img { | |
| border: none; | |
| } | |
| .clear { | |
| clear: both; | |
| zoom: 1; | |
| } | |
| .clear:after { | |
| content: ''; | |
| height: 0; | |
| display: visibility; | |
| clear: both; | |
| overflow: hidden; | |
| } | |
| #box { | |
| width: 500px; | |
| height: 300px; | |
| margin: 10px auto; | |
| position: relative; | |
| } | |
| #img { | |
| height: 100%; | |
| } | |
| #img img { | |
| width: 100%; | |
| height: 100%; | |
| display: none; | |
| } | |
| #num li { | |
| float: left; | |
| background-color: gray; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| text-align: center; | |
| line-height: 20px; | |
| color: #fff; | |
| font-weight: bold; | |
| margin-left: 5px; | |
| cursor: pointer; | |
| } | |
| #num { | |
| position: absolute; | |
| bottom: 5px; | |
| right: 5px; | |
| } | |
| #num li:hover { | |
| background-color: #f80; | |
| } | |
| #num li.active { | |
| background-color: #f80; | |
| }</style> | |
| </head> | |
| <body> | |
| <div id="box"> | |
| <div id="img"> | |
| <img src="http://www.jq22.com/img/cs/500x500-1.png" alt=""> <img src="http://www.jq22.com/img/cs/500x500-2.png" alt=""> | |
| <img src="http://www.jq22.com/img/cs/500x500-3.png" alt=""> <img src="http://www.jq22.com/img/cs/500x500-4.png" alt=""> | |
| <img src="http://www.jq22.com/img/cs/500x500-5.png" alt=""> <img src="http://www.jq22.com/img/cs/500x500-6.png" alt=""> | |
| </div> | |
| <ul id="num"> | |
| </ul> | |
| </div> | |
| <script> | |
| $(function() { | |
| init(); | |
| changImg(); //解决第一次第一张到第二张的时间间隔 | |
| start(); | |
| }); | |
| //初始化 | |
| function init() { | |
| var len = $('#img img').length; //获取图片有多少张 | |
| var html = ''; | |
| //拼html | |
| for (var i = 0; i < len; i++) { | |
| html += '<li onmouseover="changImg(' + i + | |
| ')" onmouseout="reStart(' + i + ')">' + (i + 1) + '</li>'; | |
| } | |
| //写进ul | |
| $('#num').html(html); | |
| //显示第一张图片 | |
| $('#img img').first().css('display', 'block'); | |
| //第一个数字背景颜色 | |
| $('#num li').eq(0).addClass('active'); | |
| } | |
| //图片轮播 | |
| function changImg(num) { | |
| if (num == 'auto') { //定时器自动调用 | |
| num = index; | |
| } else { //鼠标放上的时候 清楚定时器 | |
| clearInterval(timer); | |
| } | |
| //链式写法 | |
| $('#img img').eq(num).css('display', 'block').siblings().css('display', | |
| 'none'); | |
| $('#num li').eq(num).addClass('active').siblings() | |
| .removeClass('active'); | |
| index++; | |
| if (index == $('#img img').length) { //最后一张 | |
| index = 0; //第一张 | |
| } | |
| } | |
| var index = 0; | |
| var timer; //定时器 | |
| //定时器 播放 | |
| function start() { | |
| timer = setInterval('changImg("auto")', 1000); | |
| } | |
| //鼠标离开之后 又要自动播放 | |
| function reStart(num) { | |
| index = num; | |
| changImg(num); | |
| start(); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：http://www.tukus.cn/cyzd/guan/181.html
上一篇：返回列表
下一篇：swiper全屏滚动切换
