jquery实现轮播图效果


Posted in Javascript onFebruary 13, 2017

效果如下:

jquery实现轮播图效果

代码如下:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 #Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 #Javascript
简单实现js倒计时功能
Feb 13 #Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 #Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 #Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 #Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 #Javascript
You might like
php 应用程序安全防范技术研究
2009/09/25 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
浅析vue数据绑定
2017/01/17 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
js验证账户名是否重复
2020/05/26 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Django 全局的static和templates的使用详解
2019/07/19 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
教育学专业毕业生的自我评价
2013/11/21 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
2016年员工年度考核评语
2015/12/02 职场文书