jQuery实现轮播图及其原理详解
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码，供大家参考，具体内容如下
<!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="#" rel="external nofollow" rel="external nofollow" class="arrow left">></a>
<a href="#" rel="external nofollow" rel="external nofollow" class="arrow right"><</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，鼠标移入，循环停止，移除循环继续；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ overflow: hidden; width:100%; height:420px; border:1px solid; position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none;
-
jQuery实现轮播图源码
本文实例为大家分享了jQuery实现轮播图展示的具体代码,供大家参考,具体内容如下 设计: 根据上图可以看出,轮播图需要以下元素:外面的盒子div.放置图片集合的盒子ul.放置两侧按钮的盒子div.下侧顺序按钮div 源代码如下: 一.html源码如下: <div class="outer"> <ul class="img"> <li><a><img src="../static/img/1.jpg&q
-
jquery实现左右无缝轮播图
本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下 <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{p
-
jquery 实现轮播图详解及实例代码
轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea
-
利用jquery写的左右轮播图特效
最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的 将jquery框架的链接跟图片替换就可以看到效果了 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
-
jquery实现左右滑动式轮播图
本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"><
-
jQuery无缝轮播图代码
本文实例为大家分享了jQuery无缝轮播图的具体代码,供大家参考,具体内容如下 html 代码 <div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#">
-
基于jQuery实现淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"
-
jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(
-
jQuery自适应轮播图插件Swiper用法示例
本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca