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 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
详解tween.js的使用教程
Sep 14 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
PHP4中session登录页面的应用
2008/07/25 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
学习php开源项目的源码指南
2014/12/21 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
深入浅出学习python装饰器
2017/09/29 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python实现超市扫码仪计费
2018/05/30 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
使用python实现飞机大战游戏
2020/03/23 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
公证委托书
2014/08/01 职场文书
募捐感谢信
2015/01/22 职场文书
超市员工管理制度
2015/08/06 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis