轮播图这种特效 应用很广泛,基本是个网站都会有这种效果,实现的方法也是大同小异,纯js写的话可能要费一段时间,但是用jquery就比较方便多了.
首先还是那句话需要有个好的编辑器,小滑稽这里用的webstorm,还要有个谷歌浏览器
1、新建个html页面
这是布局结构,应都看得懂 外面一个大盒子 里面一组ul放图片,下面是控制的3个小原点
<div class=”sldeShow”>
<ul>
<li><a href=”#”><img src=”img/1.jpg” alt=””/></a></li>
<li><a href=”#”><img src=”img/2.jpg” alt=””/></a></li>
<li><a href=”#”><img src=”img/1.jpg” alt=””/></a></li>
</ul>
<div class=”nav”>
<span class=”active”>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
2、开始调整下样式
给大盒子一个 相对定位,让里面的那些都相对于最外层进行绝对定位,并且超出的部分都隐藏
由于是全屏的 所以不做固定的宽高了,通过jq动态设置,因为可能不会是三张图 可以能更多,或者更少
样式应该没什么难度 都看得懂。
<style>
*{margin: 0;padding: 0}
ul,ol{list-style: none}
.sldeShow{position: relative;margin: 100px auto;height: 360px;min-width: 1000px;overflow: hidden;}
.sldeShow ul{position: relative;}
.sldeShow ul li{float: left;}
.sldeShow ul li img{position: relative;left: 0;max-width: 100%;height: 360px;}
.nav{text-align: center;position: absolute;left: 90%;bottom: 10px;font-size: 12px;line-height: 18px;}
.nav span{user-select: none;float: left;cursor: pointer;border-radius: 9px;display: inline-block;width: 18px;
height: 18px;background: rgba(0,0,0,7);margin-left: 2px;color: #ffffff;opacity: 0.5;}
.sldeShow .nav span.active{opacity: 1;background: black}
</style>
</head>
上面的弄完以后应该就是这样的
3、开始写脚本
先吧jq需要的依赖引入 下到本地也好 用加速也行
var ma=$(‘.sldeShow’);
var ul=ma.find(‘ul’);
var img=ma.find(‘img’);
var nav=ma.find(‘span’);
var lii=ma.find(‘li’);
var li=ma.find(‘li’).eq(0).width();
获取到节点
var imgWidth=1920;
ul.width(img.length*imgWidth+’px’);
对ul的宽度进行动态的设置
nav.on(‘click’, function () {
var me=$(this);//当前的
nav.removeClass(‘active’);//先全清空class
me.addClass(‘active’);//当前的对象添加class
});
然后就会发现 下面的小圆点已经可以点了
index=me.index();
ul.animate({
‘left’:-li*index,
})
让索引指向当前的 让他轮播无非就是改变left值 所以这时候用jq的animate方法 就可以了
点击小圆点发现 已经可以动了
下面就需要让他自己动起来了
这时候需要个变量
var num=0;
下面需要个定时器让他自己动起来,为了方便直接用个函数包起来了,这样方便后面的操作
function init(){
timer=setInterval(function () {
num++;
if(num==lii.length){//如果num等于li的长度 那么返回第零个,否则到下一个
num=0;
}
nav.eq(num).trigger(‘click’);//用来模拟点击时间
},2000)
}
别忘了调用init()函数
鼠标移入停止 移除继续
ma.mouseover(function () {
clearInterval(timer);
console.log(timer)
});
ma.mouseout(function () {
init();
});
大致就这样了
贴下完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
*{margin: 0;padding: 0}
ul,ol{list-style: none}
.sldeShow{position: relative;margin: 100px auto;height: 360px;min-width: 1000px;overflow: hidden;}
.sldeShow ul{position: relative;}
.sldeShow ul li{float: left;}
.sldeShow ul li img{position: relative;left: 0;max-width: 100%;height: 360px;}
.nav{text-align: center;position: absolute;left: 90%;bottom: 10px;font-size: 12px;line-height: 18px;}
.nav span{user-select: none;float: left;cursor: pointer;border-radius: 9px;display: inline-block;width: 18px;
height: 18px;background: rgba(0,0,0,7);margin-left: 2px;color: #ffffff;opacity: 0.5;}
.sldeShow .nav span.active{opacity: 1;background: black}
</style>
</head>
<body>
<div>
<ul>
<li><a href=”#”><img src=”img/1.jpg” alt=””/></a></li>
<li><a href=”#”><img src=”img/2.jpg” alt=””/></a></li>
<li><a href=”#”><img src=”img/1.jpg” alt=””/></a></li>
</ul>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
<script type=”text/javascript” src=”jquery库/jquery-3.1.0.min.js”></script>
<script>
$(function () {
var ma=$(‘.sldeShow’);
var ul=ma.find(‘ul’);
var img=ma.find(‘img’);
var nav=ma.find(‘span’);
var lii=ma.find(‘li’);
var li=ma.find(‘li’).eq(0).width();
var imgWidth=1920;
var num=0;
var timer;
init();
ul.width(img.length*imgWidth+’px’);
nav.on(‘click’, function () {
var me=$(this);//当前的
nav.removeClass(‘active’);//先全清空class
me.addClass(‘active’);//当前的对象添加class
index=me.index();
ul.animate({
‘left’:-li*index,
})
})
ma.mouseover(function () {
clearInterval(timer);
console.log(timer)
});
ma.mouseout(function () {
init();
});
function init(){
timer=setInterval(function () {
num++;
if(num==lii.length){
num=0;
}
nav.eq(num).trigger(‘click’);
},800)
}
})
</script>
</body>
</html>
虽然这种方法不是最好的,有些小bug但是练习下足够用了一起套路一起进步的可以加群三一八七二二零二七欢迎大家
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/9922.html
