帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery 轮播效果图
jQuery 轮播效果图
浏览:739次
-
评论:0次
-
发布时间:2017-04-25
Html
Css
Js
1
2
3
4
>
* { padding:0px; margin:0px; } a { text-decoration:none; } ul { list-style:outside none none; } .slider,.slider-panel img,.slider-extra { width:500px; height:300px; } .slider { text-align:center; margin:30px auto; position:relative; } .slider-panel,.slider-nav,.slider-pre,.slider-next { position:absolute; z-index:8; } .slider-panel { position:absolute; } .slider-panel img { border:none; } .slider-extra { position:relative; } .slider-nav { margin-left:-51px; position:absolute; left:50%; bottom:4px; } .slider-nav li { background:#3e3e3e; border-radius:50%; color:#fff; cursor:pointer; margin:0 2px; overflow:hidden; text-align:center; display:inline-block; height:18px; line-height:18px; width:18px; } .slider-nav .slider-item-selected { background:blue; } .slider-page a { background:rgba(0,0,0,0.2); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color:#fff; text-align:center; display:block; font-family:"simsun"; font-size:22px; width:28px; height:62px; line-height:62px; margin-top:-31px; position:absolute; top:50%; } .slider-page a:HOVER { background:rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left:100%; margin-left:-28px; }
$(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, //是否已经开始轮播 t = 3000; //轮播时间间隔 length = $('.slider-panel').length; //将除了第一张图片隐藏 $('.slider-panel:not(:first)').hide(); //将第一个slider-item设为激活状态 $('.slider-item:first').addClass('slider-item-selected'); //隐藏向前、向后翻按钮 $('.slider-page').hide(); //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 $('.slider-panel, .slider-pre, .slider-next').hover(function() { stop(); $('.slider-page').show(); }, function() { $('.slider-page').hide(); start(); }); $('.slider-item').hover(function(e) { stop(); var preIndex = $(".slider-item").filter(".slider-item-selected").index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() { pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', function() { next(); }); /** * 向前翻页 */ function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } /** * 向后翻页 */ function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } /** * 从preIndex页翻到currentIndex页 * preIndex 整数,翻页的起始页 * currentIndex 整数,翻到的那页 */ function play(preIndex, currentIndex) { $('.slider-panel').eq(preIndex).fadeOut(500).parent().children().eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); } /** * 开始轮播 */ function start() { if (!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } /** * 停止轮播 */ function stop() { clearInterval(interval); hasStarted = false; } //开始轮播 start(); });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.8.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery 轮播效果图-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:原生jQuery轮播图代码
兼容于各大主流浏览器。需自身添加/修改图片路径 观看效果更佳!
简单炫酷彩虹球跟随效果
多张图片上传 本地预览效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
739
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值