效果如下:
代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- slider
- </title>
- <style type="text/CSS">
- *{ margin: 0; padding: 0; } #slideshow{ position: relative; width: 512px;
- height: 384px; margin: 0 auto; overflow: hidden; } #slideshow>ul,#slideshow>ul>li,#slideshow-nav{
- position: absolute; } #slideshow>ul>li{ list-style: none; } #slideshow-nav{
- bottom: 20px; width: 100%; text-align: center; } #slideshow-nav>span{ display:
- inline-block; width: 15px; height: 15px; margin: 0 7px; font-size: 0; background-color:
- rgba(255,255,255,.3); border-radius: 50%; user-select: none; -webkit-user-select:
- none; transition: all .5s; -webkit-transition: all .5s; cursor: pointer;
- } #slideshow-nav>span.active{ background-color: #fff; }
- </style>
- </head>
- <body>
- <div id="slideshow">
- <ul>
- <li>
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg"
- alt="gakki is mine">
- </li>
- <li>
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236ugj2glgcl6g66gg4.jpg"
- alt="gakki is mine">
- </li>
- <li>
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236c26bx5bbfp6kazzm.jpg"
- alt="gakki is mine">
- </li>
- <li>
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236oqd8i8q158ojr0i7.jpg"
- alt="gakki is mine">
- </li>
- <li>
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236o1iud19lkz11wqja.jpg"
- alt="gakki is mine">
- </li>
- </ul>
- <div id="slideshow-nav">
- </div>
- </div>
- <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js">
- </script>
- <script type="text/javascript">
- $(function() {
- var timer = null,
- curindex = 0,
- duration = 2000,
- speed = 500;
- var $imgWrap = $('#slideshow>ul');
- var totalIndex = $imgWrap.find('li').length;
- var width = $('#slideshow').width();
- //insert navigate span, let img in order
- $('#slideshow').find('ul>li').each(function(index) {
- $(this).css('left', width * index + 'px');
- $('#slideshow-nav').append('<span>' + (index + 1) + '</span>');
- })
- //
- $('#slideshow-nav>span').eq(0).addClass('active');
- //auto slide
- var move = function() {
- curindex += 1;
- if (curindex === totalIndex) {
- curindex = 0;
- }
- // current span add classname "active"
- $('#slideshow-nav>span').each(function(index) {
- $(this).removeClass('active')
- }).eq(curindex).addClass('active');
- //auto slide
- $imgWrap.animate({
- 'left': width * curindex * ( - 1) + 'px',
- },
- speed)
- //一开始没加"timer = ",这个bug耽误了不少时间
- timer = setTimeout(move, duration + speed);
- };
- //init
- timer = setTimeout(move, duration);
- //click event
- $('#slideshow-nav>span').on('click',
- function(event) {
- event.preventDefault();
- /* Act on the event */
- clearTimeout(timer);
- $imgWrap.stop(true, true);
- curindex = $(this).index() - 1;
- move();
- });
- })
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
来源: http://www.jb51.net/article/105421.htm