弘成UI老师 弘成IT 前天
点击蓝字
关注我们
在弘成教育任UI讲师，带了几十个班数百个学生了，我发现学生们最头疼的不是网站界面的设计，各种网站的设计，专题页，详情页，店铺装修，他们都能设计得漂漂亮亮。也不是HTML+CSS的静态代码的编写，几乎所有的静态页面他们都能写。
但是一到网站轮播图的实现方法，部分学生就晕了，觉得太难，因为它涉及javascript，这可比静态HTML代码难太多了，经常有一部分学生听到轮播图的案例部是云里雾里的，一头雾水！
对于一个UI设计师，我也不能对学生们太苛刻了，毕竟设计是他们的主打，轮播图代码能自己写当然最好，写不出来的，其实也没有关系，因为小编花了些时间，用jquery把代码封装了一下，只需要把代码复制一下，改下自己的图片放置的位置，粘贴到自己的网页，轮播图就可以动起来了，这下每个UI设计师都可以自己做轮播放图啦~
完成效果图
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无限循环翻页</title>
<script src="js/jquery.js"></script> <!--引入JQ文件-->
</head>
<body>
<style>
*{margin: 0;padding: 0;list-style: none;font-size: 12px;font-family:"微软雅黑";text-decoration: none;} /*清除所有浏览器自带的样式*/
.focus{position: relative;width:799px;height: 300px;margin: auto;}
.bigPicH{width:100%;height: 100%;position: relative;overflow: hidden}
.bigPic{position: absolute;width:20000px;}
.bigPic a{float: left;}
.leftBtn,.rightBtn{cursor: pointer;width:40px;height: 50px;background: rgba(0,0,0,0.4);position: absolute;top:125px;text-align: center;color: white;line-height: 50px;font-size:15px;}
.leftBtn{left:0px;}
.leftBtn:hover,.rightBtn:hover{background:#464646}
.rightBtn{right:0px;}
.focusBtn{position: absolute;bottom:10px;text-align: center;width:100%}
.focusBtn li{width:10px;height: 10px;background: rgba(0,0,0,0.8);border-radius: 50%;display: inline-block;margin: 0 2px}
.focusBtn .on{background: green;}
</style>
<div>
<div>
<div>
<a href="#"><img src="images/img1.jpg"/></a><!--此处的图片路径和名字替换成自己的-->
<a href="#"><img src="images/img2.jpg"/></a>
<a href="#"><img src="images/img3.jpg"/></a>
<a href="#"><img src="images/img4.jpg"/></a>
<a href="#"><img src="images/img5.jpg"/></a>
<a href="#"><img src="images/img6.jpg"/></a>
<a href="#"><img src="images/img7.jpg"/></a>
</div>
</div>
<ul></ul><!--切换按钮，根据图片的个数自动生成-->
<div><</div><!--左翻页按钮-->
<div>></div><!--右翻页按钮-->
</div>
<script>
var imgWidth = $(".bigPic a img").width()//获取图片的宽度
var imgHeight = $(".bigPic a img").height()//获取图片的高度
$(".focus").css({"width":imgWidth,"height":imgHeight})//设置 focus的宽高为图片的宽高
var getBtnTop = (imgHeight-50)/2 //计算左右翻面按钮的值
$(".leftBtn,.rightBtn").css({"top":getBtnTop})//设置左右翻面按钮的top值
var imgNum= $(".bigPic a").length//获取图片的个数
var numliend = imgNum-1 //序号从零开始，所以减一，得出li标签的数
var imgNum2=imgNum; //每滚一次减一，等于零时返回原来的图片个数
var imgWidthAll = -imgWidth*imgNum //计算滚到底的总距离
var imgNunR = imgNum*2
var btnOn = true; //点击按钮后的开关，防止按钮被多次点击
var bigPicHtml = $(".bigPic").html() //获取所有的A标签和IMG内容
$(".bigPic").append(bigPicHtml+bigPicHtml) //把所有的A和图片复制两份一份用来左滚一份用来右滚
$(".bigPic").css({"left":imgWidthAll}) //初始化图片的位置，三份，一份放左，一份放右
for(var forli=0;forli<imgNum;forli++){
$(".focusBtn").append("<li></li>") //for循环，按图片的个数插入一样多的li标签
}
$(".focusBtn li").eq(0).addClass("on") //第一个li标签
function leftBtn(){ //左边的翻页按钮
if(btnOn==true){ //判断是否可点击，防止按钮被多次点击
imgNum=imgNum-1
}else{
return false;
}
btnOn = false
var linum=$(".on").index()//获取当前元素的序号
if(linum==0){
$(".focusBtn li").eq(numliend).addClass("on").siblings().removeClass("on")//让下一个li加载样式获取当前滚到哪一张
}else{
$(".focusBtn li").eq(linum-1).addClass("on").siblings().removeClass("on")//每点一次向左滚一张
}
$(".bigPic").stop().animate({"left":-imgWidth*imgNum},function(){
btnOn = true
if(imgNum==0){ //若滚到第一张则下一张滚到最后一张
$(".bigPic").css({"left":imgWidthAll})
imgNum=imgNum2
}
})
}
function rightBtn(){ //右边的翻页按钮
if(btnOn==true){//判断是否可点击，防止按钮被多次点击
imgNum=imgNum+1
}else{
return false;
}
btnOn = false
var linum=$(".on").index()
if(linum==numliend){
$(".focusBtn li").eq(0).addClass("on").siblings().removeClass("on")
}else{
$(".focusBtn li").eq(linum+1).addClass("on").siblings().removeClass("on")
}
$(".bigPic").stop().animate({"left":-imgWidth*imgNum},function(){
btnOn = true
if(imgNum==imgNunR){
$(".bigPic").css({"left":imgWidthAll})
imgNum=imgNum2
}
})
}
$(".focusBtn li").hover(function(){ //鼠标停留在切换按钮上轮播图自动滚到对应的图片上面
var linum2=$(this).index()
$(".bigPic").stop().animate({"left":-imgWidth*(linum2+3)})
$(".focusBtn li").eq(linum2).addClass("on").siblings().removeClass("on")
})
timer=setInterval(rightBtn,3000)//每3秒自动滚一次
$(".focus").hover(function(){ //鼠标停留在轮播图上则暂停滚动
clearInterval(timer)
},function(){
timer=setInterval(rightBtn,3000)//鼠标离开后继续滚动
})
$(".leftBtn").click(function(){ //每点一次左滚一张
leftBtn()
})
$(".rightBtn").click(function(){ //每点一次右滚一张
rightBtn()
})
</script>
</body>
</html>
</textarea>
</body>
</html>
这样整个轮播图的代码就完成了，用户只需更改图片的名称和路径即可完成全自动自适应，是不是很简单呢，赶紧拿去用吧
弘成手把手教你学
扫码即可报名
参与线上直播体验课程
网友评论