时间:2021-07-01 10:21:17 帮助过:10人阅读
我们在很多的网站上都可以看到轮播图,例如在淘宝、京东这些网站都有轮播图的存在;轮播图的使用范围非常广,banner和animation很容易抓住用户的眼球,所以做好这个也就是一个网页一个app的关键之一。
轮播图有多种实现方式,可以用css实现、用jQuery实现、甚至是用其他框架实现,下面我们就以jQuery方法举例,用jQuery代码做一个自动+手动轮播图片的轮播图效果。
jq实现无缝轮播图效果(自动轮播)的代码示例:
html代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实现无缝轮播图</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="banner"> <ul class="img"> <li> <a href="#"><img src="img/1.jpg"></a> </li> <li> <a href="#"><img src="img/2.png"></a> </li> <li> <a href="#"><img src="img/1.jpg"></a> </li> <li> <a href="#"><img src="img/2.png"></a> </li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div> </div> </body> </html>
上面是html代码,代码的结构比较简单,这里解释一下,ul.img标签是要左右移动的,ul.img标签里就是轮播图的主体内容了;然后ul.num标签是提供索引和下标控制符,绑定动画的,会通过jq代码来控制数量与图片一致。btn_l和tn_r类名的div标签是提供左右按钮,这样轮播图就可以点击实现手动的左右滑动。
css代码:
* { padding: 0; margin: 0; list-style: none; } .banner { margin: 100px auto; border: 5px solid #000; width: 1000px; height: 640px; position: relative; overflow: hidden; } .banner .img { width: 5000px; position: absolute; left: 0px; top: 0px; } .banner .img li { float: left; } .banner .img li img { width: 1000px; } /*小圆点的样式*/ .banner .num { position: absolute; right: 40px; bottom: 30px; } .banner .num li { width: 20px; height: 20px; float: left; background: #333; margin-left: 20px; border-radius: 50px; border: 2px solid white; } .banner .num li.on { border: 2px solid #333; background: white } /*两边耳朵的样式*/ .banner .btn { position: absolute; width: 80px; height: 80px; background: rgba(0, 0, 0, 0.7); font-size: 60px; color: white; text-align: center; line-height: 80px; top: 50%; margin-top: -80px; cursor: pointer; display: none; } .banner:hover .btn { display: block; } .banner .btn_l { left: 10px; border-radius: 50% } .banner .btn_r { right: 10px; border-radius: 50% }
我们链接的外部css文件,然后请注意一下各种属性和值。
jquery代码:
首先要引用jquery.js文件
<script type="text/javascript" src="s/jquery-1.7.2.min.js"></script>
注:想要使用jquery来实现各种效果,就必须要先引用jquery.js文件,在使用jquery代码来实现各种效果。
在使用jquery语句来实现轮播效果:
<script> $(function() { var i = 0; var clone = $(".banner .img li").first().clone(); $(".banner .img").append(clone); var size = $(".banner .img li").size(); for(var j = 0; j < size - 1; j++) { $(".banner .num").append("<li></li>"); } $(".banner .num li").first().addClass('on'); //鼠标划入圆点 $(".banner .num li").hover(function() { var index = $(this).index(); i = index; $(".banner .img").stop().animate({ left: -index * 1000 }, 500); $(this).addClass('on').siblings().removeClass('on'); }) /*轮播图自动轮播*/ var t = setInterval(function() { i++; move(); }, 2000); //对banner定时器的操作 $(".banner").hover(function() { clearInterval(t); }, function() { t = setInterval(move, 2000); }) /*向左按钮*/ $(".banner .btn_l").click(function() { i--; move(); }) /*向右按钮*/ $(".banner .btn_r").click(function() { i++; move(); }) /*封装函数*/ function move() { if(i == size) { $(".banner .img").css({ left: 0 }); i = 1; } if(i == -1) { $(".banner .img").css({ left: -(size - 1) * 1000 }); i = size - 2; } $(".banner .img").stop().animate({ left: -i * 1000 }, 500); if(i == size - 1) { $(".banner .num li").eq(0).addClass('on').siblings().removeClass('on'); } else { $(".banner .num li").eq(i).addClass('on').siblings().removeClass('on'); } } }) </script>
我们来看看效果(静态):
总结:以上就是jQuery实现无缝轮播图效果的全部代码,大家可以自己动手尝试编译,看看效果,加深理解,制作属于自己的轮播图。希望能对大家的学习有所帮助,更多相关教程请访问JavaScript视频教程,jQuery视频教程,bootstrap教程!
以上就是jq如何实现无缝轮播图效果(自动轮播)?(代码示例)的详细内容,更多请关注Gxl网其它相关文章!