帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery轮播图代码
jQuery轮播图代码
浏览:711次
-
评论:1次
-
发布时间:2017-09-25
Html
Css
Js
1
2
3
<
>
* { margin:0; padding:0; list-style:none; } img { width:100%; } .lunbo { width:500px; height:300px; margin:0 auto; position:relative; overflow:hidden; } .lunbo .lunbo-imgs { position:absolute; z-index:10; } .lunbo .lunbo-imgs li { height:300px; overflow:hidden; } .lunbo .lunbo-num { position:absolute; z-index:11; bottom:10px; left:45%; } .lunbo .lunbo-num li { float:left; background:white; color:#333333; padding:2px 6px; margin-left:10px; } .lunbo .lunbo-num li.current { background:red; }
$(function() { var height = 300; //每张图片的高度 var speed = 700; //动画时间 var delay = 3000; //自动切换时间 var now = 0; //当前显示图片的索引 var max = 2; //图片的最大索引 var $imgs = $('.lunbo-imgs'); //获取对象 //复制列表中的第一个图片追加列表的最后 $imgs.find('li:first').clone().appendTo($imgs); //设置定时器实现图片自动切换 var timer = setInterval(changeAuto, delay); //图片自动切换 function changeAuto() { if (!$imgs.is(':animated')) { //判断是否在动画中 //判断是否达到图片列表末尾 if (now < max) { now += 1; changeNext(); } else { now = 0; changeFirst(); } changeNum(); } } //当鼠标指针划过时暂停移动 移出时恢复移动 $('.lunbo').bind({ mouseenter: function() { clearInterval(timer) }, mouseleave: function() { // clearInterval(timer) timer = setInterval(changeAuto, delay) } }) //切换到下一张图片 function changeNext() { $imgs.animate({ 'top': -height * now + 'px' }, speed) } //切换到第一张图片 function changeFirst() { $imgs.animate({ 'top': -height * (max + 1) + 'px' }, speed, function() { $(this).css('top', '0') }) } var $lunboNum = $('.lunbo-num li') //单机小圆点或者数字切换图片 $lunboNum.click(function() { // now = $(this).index(); // changeNext(); // var x = now; now = $(this).index(); if (x < now) { $imgs.css({ top: -height * (now - 1) + 'px' }) changeNext(); } else if (x > now) { $imgs.css({ top: -height * (now + 1) + 'px' }) changeNext() } changeNum(); }) //点亮当前的选择的小圆点或者数字 function changeNum() { $lunboNum.eq(now).addClass('current').siblings().removeClass('current') } })
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery轮播图代码-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jQuery轮播图上下垂直滚动切换
饿了么添加菜品小球动画
九宫格鼠标悬停放大缩小
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv1 新人
欢***送
2017年10月25日
很有用
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
711
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值