时间:2021-07-01 10:21:17 帮助过:19人阅读
Html
CSS
.slider { height: 440px; overflow: hidden; position: relative; } .slider .btn li{ position: absolute; width: 30px; height: 50px; cursor: pointer; color: #fff; text-align: center; font-size: 40px; top:45%; } .slider .btn li:first-child { left:0; } .slider .btn li:last-child { right:0; } .slider img { width: 100%; height: 100%; } .slider .window { width: 40000px; height: 400px; overflow: hidden; } .slider .window li { float: left; overflow: hidden; width: 1200px; } .slider .tab { position: absolute; z-index: 5; width: 880px; margin: -40px auto; left: 13%; } .slider .tab li { float: left; width: 200px; height: 80px; margin-left: 18px; cursor: pointer; }
Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。
Run 起来:
$('.slider').slider({auto: true, interval: 2000});
改进js结构:
以上就是本文的全部内容,希望对大家学习jqueryt程序设计有所帮助。