帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 超完美滚动轮播图效果
超完美滚动轮播图效果
浏览:1884次
-
评论:0次
-
发布时间:2018-04-17
Html
Css
Js
<
>
* { margin:0px; padding:0px; } .banner { width:500px; height:300px; margin:150px auto; position:relative; overflow:hidden; cursor:pointer; } .banner ul { list-style:none; width:700%; height:300px; position:absolute; } .banner ul li { width:500px; height:300px; float:left; } .banner ul li img { width:100%; height:100%; } .banner .arrow .left,.banner .arrow .right { width:40px; height:80px; background:#000000; opacity:0.3; position:absolute; top:50%; transform:translateY(-50%); font-family:"宋体"; font-size:52px; color:#fff; line-height:80px; text-align:center; } .arrow .left { left:0px; } .arrow .right { right:0px; } .banner .arrow { display:none; } /*鼠标经过盒子,让箭头显示出来*/ .banner:hover .arrow { display:block; cursor:pointer; } /*小圆点样式*/ .banner ol { list-style:none; width:200px; height:20px; background:#222222; position:absolute; bottom:50px; left:50%; transform:translateX(-50%); /*opacity:0.3; */ border-radius:10px; } .banner ol li { width:10px; height:10px; background:#fff; border-radius:50%; float:left; margin-left:21px; margin-top:5px; cursor:pointer; } .banner ol .now { background:aqua; }
$(function() { // 把要操作的对象先获取到 var banner = $('.banner'); var Left = $('.left'); // alert(Left.length); var Right = $('.right'); var Ul = $('ul'); // alert(Ul.length); var Width = $('ul li').width(); //alert(Width); var Point = $('.banner ol li'); // alert(Point.length); var Index = 0; //用于记录点击的次数,图片的张数(计数器,记录了图片移动的张数) //点击小圆点让图片移动 $.each(Point, function(index, value) { //如果此处我没有用each循环来写,那么我便需要用$(this).index()方法来获取图片的下标 //让点击的小圆点有class样式,其他li没有class样式 Point.eq(index).on('click', function() { $(this).addClass('now').siblings().removeClass('now'); Ul.stop().animate({ 'left': -index * Width }); Index = index; console.log(Index); //alert(Index); }) }); // 点击右箭头,ul往左跑 Right.on('click', function() { //需要做一个判断,如果发现此时图片是最后一张图片,就不能继续执行了 //让index是图片的张数减一的时候,让index不继续加 if (Index >= 6) { //让index变成0 Index = 0; // 让ul的left值瞬间变成0 Ul.css('left', 0); } Index++; Ul.stop().animate({ 'left': -Index * Width }); if (Index == 6) { //因为在图片最后面添加了一张假图片,其实最后一张图片的时候,需要对应的是索引0的小圆点 Point.eq(0).addClass('now').siblings().removeClass('now'); } else { Point.eq(Index).addClass('now').siblings().removeClass('now'); } }) //点击左箭头,让Ul往右跑 Left.on('click', function() { if (Index <= 0) { //return; 此时不应该return,应该让index变成最大的值,left也变成最大的left Index = 6; Ul.css('left', -Index * Width); } Index--; Ul.stop().animate({ 'left': -Index * Width }); if (Index == 6) { //因为在图片最后面添加了一张假图片,其实最后一张图片的时候,需要对应的是索引0的小圆点 Point.eq(0).addClass('now').siblings().removeClass('now'); } else { Point.eq(Index).addClass('now').siblings().removeClass('now'); } }) //调取Right方法,使其自动播放 var time = setInterval(function() { Right.click(); }, 2000); //鼠标移到banner中,自动播放停止 banner.mouseenter(function() { clearInterval(time); }); // 鼠标移出banner中,自动播放开始 banner.mouseleave(function() { time = setInterval(function() { Right.click(); }, 2000); }) })
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>超完美滚动轮播图效果-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轮播图无bug ,企业级、注释全
元素位置调换效果代码
CSS旋转效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1884
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值