站长资源网络编程
教你一步步用jQyery实现轮播器
简介实现原理如图，试想一下，若是将
- 的width属性值设置的很宽，直到可以装下你所有的图片，而每一个图片又用
- 包着并且设置了左浮动。那么当我们向左移动ul的时候并且移动的距离为
- 的宽度，第二个
- 不就被移动到了的窗口，这样一来图片不就被一张一张显示出来了吗？接下来我
实现原理
如图，试想一下，若是将<ul>的width属性值设置的很宽，直到可以装下你所有的图片，而每一个图片又用<li>包着并且设置了左浮动。
那么当我们向左移动ul的时候并且移动的距离为<li>的宽度，第二个<li>不就被移动到了<div>的窗口，这样一来图片不就被一张一张显示出来了吗？
接下来我们在设置<div>的属性
overflow:hidden，那么<div>窗口以外的图片不显示，只显示移动到当前窗口的图片，是不是又完美了一些，感觉快做好了是吧！
说了一些原理，好了，直接上代码，记得引入jquery。
这是div做的布局，做的时候记得加上边框，做后在删掉，这样便于测试
<div class="slideShow"> <div class="nav-t"> <ul> <li><a href="#" target="_blank"><img src="/UploadFiles/2021-04-02/1.png">
接下来设置一下样式
<style> .slideShow{ border:0px solid blue; width:600px; height:450px; margin:50px auto; position:relative; } .nav-t{ border:0px solid red; width:580px; height:430px; margin:8px auto; position:relative; overflow:hidden; } .nav-t ul{ border:0px solid green; list-style:none; width:3000px; height:430px; margin:0; padding:0; position:relative; } .nav-t li{ height:427px; width:580px; float:left; } .nav-b{ position:absolute; top:390px; left:220px; cursor:default; } .nav-b span{ margin-right:5px; border:1px solid red; padding:0 6px; border-radius:12px; color:#fff; background:rgba(132,125,119,0.5); cursor:pointer; } .nav-b span.active{ background:rgba(0,0,0,0.8); } </style>用js实现点击轮播图片、自动轮播图片，鼠标移动上去停止轮播
$(function(){ $(function(){ var slide=$(".slideShow"), navt=slide.find(".nav-t"), ul=navt.find("ul"), navbs=slide.find(".nav-b span"), onwidth=ul.find("li").eq(0).width(), //获取ul下的li宽度 timer=null, inow=0; navt.hover(function(){ clearInterval(timer); //鼠标移上去，清除掉自动轮播功能，即定时轮播 },autoPlay); navbs.on("click",function(){ //点击轮播事件 var me=$(this); inow=me.index(); //此处变量用的与自动轮播函数里的相同，为的是能在随便点击后，自动轮播时按照我们点击了的继续向后轮播，这叫动态实时 ul.animate({left:-inow*onwidth},0.01); //ul向左移动从而使得下一个li显示到div的当前窗口 navbs.removeClass("active"); //清除掉上一个点击按钮的样式 me.addClass("active"); //为当前被点击的按钮添加第一个按钮样式 }); autoPlay(); function autoPlay(){ //自动轮播函数 timer=setInterval(function(){ //开定时器 inow++; if(inow==navbs.length){ //判断是否到了最后一张，若是到了，返回到第一张 inow=0 } navbs.eq(inow).trigger("click"); //根据定时的时间用span的索引自动调用click事件，trigger为jQuery的自动调用函数 },3000); } }); });看一下效果图？好的
总结
好了，以上就是利用jQyery实现轮播器的全部内容了，怎么样，要不你也做一个？希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。