源码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>JQuery轮播图</title><style>*{padding:0;margin:0;}.container{width:600px;height:400px;overflow: hidden;position:relative;margin:0 auto;}.list{width:3000px;height:400px;position:absolute;}.list>img{float:left;width:600px;height:400px;}.pointer{position:absolute;width:100px;bottom:20px;left:250px;}.pointer>span{cursor:pointer;display:inline-block;width:10px;height:10px;background: #7b7d80;border-radius:50%;border:1px solid #fff;}.pointer .on{background: #28a4c9;}.arrow{position:absolute;text-decoration:none;width:40px;height:40px;background: #727d8f;color:#fff;font-weight: bold;line-height:40px;text-align:center;top:180px;display:none;}.arrow:hover{background: #0f0f0f;}.left{left:0;}.right{right:0;}.container:hover .arrow{display:block;}</style>
</head><body><div class="container"><div class="list" style="left:0px;"><!--<img src="../static/image/photo1.jpg" alt="5"/>--><img src="../static/image/banner.jpg" alt="1"/><img src="../static/image/slide1.jpg" alt="2"/><img src="../static/image/slide1.jpg" alt="3"/><img src="../static/image/slide1.jpg" alt="4"/><img src="../static/image/photo1.jpg" alt="5"/><!--<img src="../static/image/banner.jpg" alt="1"/>--></div><div class="pointer"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="#" class="arrow left">&gt;</a><a href="#" class="arrow right">&lt;</a></div><script src="../static/js/jquery-3.2.1.min.js"></script><script>var imgCount = 5;var index = 1;var intervalId;var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合//自动轮播功能 使用定时器
        autoNextPage();function autoNextPage(){intervalId = setInterval(function(){nextPage(true);},3000);}//当鼠标移入 停止轮播
        $('.container').mouseover(function(){console.log('hah');clearInterval(intervalId);});// 当鼠标移出，开始轮播
        $('.container').mouseout(function(){autoNextPage();});//点击下一页 上一页的功能
        $('.left').click(function(){nextPage(true);});$('.right').click(function(){nextPage(false);});//小圆点的相应功能  事件委托
        clickButtons();function clickButtons(){var length = buttonSpan.length;for(var i=0;i<length;i++){buttonSpan[i].onclick = function(){$(buttonSpan[index-1]).removeClass('on');if($(this).attr('index')==1){index = 5;}else{index = $(this).attr('index')-1;}nextPage(true);};}}function nextPage(next){var targetLeft = 0;//当前的圆点去掉on样式
            $(buttonSpan[index-1]).removeClass('on');if(next){//往后走if(index == 5){//到最后一张，直接跳到第一张
                    targetLeft = 0;index = 1;}else{index++;targetLeft = -600*(index-1);}}else{//往前走if(index == 1){//在第一张，直接跳到第五张
                    index = 5;targetLeft = -600*(imgCount-1);}else{index--;targetLeft = -600*(index-1);}}$('.list').animate({left:targetLeft+'px'});//更新后的圆点加上样式
            $(buttonSpan[index-1]).addClass('on');}</script>
</body></html>

效果图：

原理：

页面结构方面：

将轮播图容器设置成相对定位，宽度设置成图片的宽度；容器中分为四部分：轮播的图片；点击的小按钮；前一张；后一张

样式方面：

轮播图容器为相对定位，宽度/高度设置成图片的宽度/高度，设置overflow为hidden；
容器中的每一部分都设置成绝对定位，放到相应的位置；
轮播图片的容器宽度设置成所有图片的宽度和，left开始先设置为0；
每张图片宽度一样，都设成左浮动，左右图片都在一行排列，所以轮播图的实质是装有图片的容器的移动，每次移动的距离为一张图片的宽度，这样每次就只显示一张图片；
前一张/后一张设置成display为none，当鼠标移入总容器时，再设置成display为block

功能方面：

自动轮播为一个定时循环机制setInteval，鼠标移入，循环停止，移除循环继续；

转载于:https://www.cnblogs.com/lihuijuan/p/9486051.html

JQuery实现轮播图及其原理相关推荐

基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
网页直播源码，JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
jQuery实现轮播图这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...
Jquery实现轮播图效果
Jquery实现轮播图效果首先是html <div id="box"><img src="./day6/am/轮播图/img/1.jpg" ...
jQuery 实现轮播图
jQuery 轮播图预览图: 使用jquery实现轮播图要比用原生js简单许多,代码也少很多. 思路 1.外层盒子设置为一个图片的大小 2.内层盒子为所有图片的宽度,图片左浮动 3.外层盒子设置ov ...
Jquery实现轮播图效果（fadeIn()和fadeOut()方法的应用）
2019独角兽企业重金招聘Python工程师标准>>> 1.jquery.js从官网上下载最新的,使用外链导入到html中, 下载地址: http://jquery.com/down ...
自己定义jquery插件轮播图
轮播图-html <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...

JQuery实现轮播图及其原理

原理：

页面结构方面：

样式方面：

功能方面：

JQuery实现轮播图及其原理相关推荐

最新文章

热门文章