本文主要是介绍初级轮播图的实现，没有hover,click控制(jQ)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初级轮播图的实现</title><style>* {padding: 0;margin: 0;}.someDiv {background: #F1D5FF;width: 500px;height: 200px;overflow: hidden;/*position: a/*/}.lunbo-block {position: relative;background: gray;width: 500px;height: 100%;}.lunbo-block ul,.lunbo-block ul li {list-style-type: none;color: red;}.lunbo-block ul {position: absolute;display: block;width: 100%;height: 100%;}.lunbo-block ul li {position: absolute;display: block;float: left;width: 100%;height: 100%;}.lunbo-block ul li img {width: 100%;height: 100%;}.lunbo-block ul li:nth-of-type(1) {background: red;left: 0;}.lunbo-block ul li:nth-of-type(2) {left: 500px;background: green;}.lunbo-block ul li:nth-of-type(3) {left: 1000px;background: blue;}.lunbo-block ul li:nth-of-type(4) {left: 1500px;background: purple;}</style><script src="jquery-1.8.3.min.js"></script><script>$(function(){var $ul = $('.lunbo-block>ul'),$li = $('.lunbo-block>ul>li');function actLunbo(){$ul.animate({left: '-500px'}, 1000).delay(1000).animate({left: '-1000px'}, 1000).delay(1000).animate({left: '-1500px'}, 1000).delay(1000).animate({left: '0px'}, 500).delay(1000);}setInterval(actLunbo, 0); });</script>
</head>
<body><div class="someDiv"><div class="lunbo-block"><ul><li><img src="images/1.jpg" alt=""></li><li><img src="images/2.jpg" alt=""></li><li><img src="images/3.jpg" alt=""></li><li><img src="images/4.jpg" alt=""></li></ul></div></div></body>
</html>这篇关于初级轮播图的实现，没有hover,click控制(jQ)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
