最近这段时间,我本人对原生前端的代码、css、js进行了非常认真、详细的理解和训练,我收获了特别多,最近陆续频繁地出博客,现在继续上一篇博客轮番图问题,现在用jQuery实现,其实非常地简单,希望大家看完也已有所收获,现在先来看看效果图,这里的话,因为我懒得再录一个效果图了,都是一样的做法,下面的说明我用的是别的网站的比拟图,做法都是一样的
随便看看😎😎😎👇
用到的jQuery方法
jQuery的下载的话,大家直接去官网下载就行了,没什么特别的要求,需要用到的jQuery方法和代码如下:
🐳jQuery的siblings()方法:
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
🐳jQuery的trigger() 方法
trigger() 方法触发被选元素的指定事件类型。
🐳jQuery的eq()选择器
eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。
经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素。
分析原理
随便来几个网站看看:
其实整个轮播图就像一跳链子,链子的长度—>就是所有图片的宽度之和!(也就是ul的长度!这里假设这个轮播图是利用无序列表ul-li做的),然后在最外层套一个盒子,盒子显示图片显示具体位置,其他部分----->overflow:hidden!!!具体的代码可以看下面的代码实现~
代码
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery轮播图</title>
<link rel="stylesheet" href="./css/test.css">
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div class="slideShow">
<ul>
<li><a href="#"><img src="./images/g-1.jpg" width="100%"/></a></li>
<li><a href="#"><img src="./images/g-2.jpg" width="100%"/></a></li>
<li><a href="#"><img src="./images/g-5.jpg" width="100%"/></a></li>
<li><a href="#"><img src="./images/g-4.jpg" width="100%"/></a></li>
</ul>
<div class="showNav">
<span class="active">1</span> <span>2</span> <span>3</span> <span>4</span>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/layout.js"></script>
</body>
<script>
$(document).ready(function(){
var slideShow=$(".slideShow"),
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNav span"),
oneWidth=slideShow.find("ul li").eq(0).width();
var timer=null;
var iNow=0;
showNumber.on("click",function(){
$(this).addClass("active").siblings().removeClass("active");
var index=$(this).index();
iNow=index;
ul.animate({
"left":-oneWidth*iNow,
})
});
timer=setInterval(function(){
iNow++;
if(iNow>showNumber.length-1){
iNow=0;
}
showNumber.eq(iNow).trigger("click");
},2000);
})
</script>
</html>
css
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.slideShow{
width: 800px;
border: 1px #eeeeee solid;
margin: 20px auto;
position: relative;
overflow: hidden;
}
.slideShow ul{
width: 4800px;
position: relative;
transition: all 1s ease-in-out;
}
.slideShow ul li{
float: left;
width: 800px;
}
.slideShow .showNav{
position: absolute;
right: 10px;
bottom: 15px;
text-align:center;
font-size: 12px;
line-height: 20px;
}
.slideShow .showNav span{
cursor: pointer;
display: block;
float: left;
width: 20px;
height: 20px;
background: #814634;
opacity: .5;
margin-left: 2px;
border-radius: 50%;
color: #fff;
}
.slideShow .showNav .active{
opacity: 1;
background: #e03e0d;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)