程序人生 jquery轮播图详解，40行代码即可简单解决。

admin · admin 发表于 2018-11-8 00:24:59

马上注册，下载资源，享用更多功能，让你轻松玩转网站

您需要登录才可以下载或查看，没有帐号？立即注册

x

我在两个月以前没有接触过html,css,jquery,javascript。今天我却在这里分享一篇技术贴，可能在技术大牛面前我的文章漏洞百出，也请斧正。

可以看出来，无论是div+css布局还是jquery其实真的很简单，只要不停的练习就会有很大进步。每天150行代码，会帮助我们走的更远。对于编程对于脚本语言，我们这样的学生娃没有和比人一样初中，高中就开始研究，要想走在时代的前沿需要怎样的努力和毅力，是我们一类人需要思考的方向。

下面解释下焦点图，焦点图使用范围非常广，banner和animation很容易抓住用户的眼球，所以做好这个也就是一个网页一个app的关键之一。

焦点图实现的方式很多种，可以是css的jjq的甚至其他框架的，jq最近很火这里以此举例。

下面进一段html代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>横向滑动的悬停焦点图全代码</title>
<link href="css/slidepic8.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="slideBox">
<ul>
<li><img src="image/Lslide3.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide4.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide5.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide6.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide2.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/Lslide1.jpg" alt="" width="300" height="480"/></li>
</ul>
<div class="spanBox">
<span class="active">q</span>
<span>a</span>
<span>z</span>
<span>w</span>
<span>s</span>
<span>x</span>
</div>
<div class="prev"><img src="image/left_arrow.jpg" width="15" height="50" alt=""/></div>
<div class="next"><img src="image/right_arrow.jpg" width="15" height="50" alt=""/></div>
</div>
</body>
</html>

复制代码

上面是html代码，代码的结构比较简单，这里解释一下，ul标签是要左右移动的，所以怎么设置position属性？，然后span标签是提供索引和下标控制符，绑定动画的。prev和next类名的div标签是提供左右按钮，电机可以实现左右滑动。

下面附上css代码：

@charset "utf-8";
/* CSS Document */
*{
padding:0px;
border:0px;
margin:0px;
}
ul {
list-style:none;
}
.slideBox {
margin:50px auto;
width:300px;
height:480px;
box-shadow:2px 2px 10px #C38DD4;
border-radius:20px;
position:relative;
overflow:hidden;
}
.slideBox ul {
position:relative;
width:2000px;}
.slideBox ul li {
float:left;
width:300px;
height:480px;
position:relative;
}
.spanBox {
position:absolute;
width:300px;
height:20px;
bottom:10px;
left:80px;
}
.spanBox span {
width:18px;
height:18px;
margin-left:5px;
background-color:rgba(201,178,207,1.00);
float:left;
line-height:16px;
text-align:center;
text-shadow:2px 2px 2px #C5EBF0;
font-family:cabin-sketch;
font-size:15px;
}
.slideBox .spanBox .active {
background-color:rgba(155,83,244,0.79);
border:solid 1px #BEEBEC;
border-radius:4px;
}
.prev {
position:absolute;
left:0px;
top:320px;
float:left;
border-left:solid 1px rgba(251,245,246,1.00);
opacity:0.5;
}
.next {
width:15px;
height:50px;
position:absolute;
right:0px;
top:320px;
float:right;
border-right:solid 1px rgba(245,237,237,1.00);
opacity:0.5
}

复制代码

我是链接的外部css文件，然后请注意一下各种属性和值。电脑端的话，html是相当于文本结构常说的dom，解码的时候配合css属性进行渲染，具体的属性请大家自己测试，在四种常用的浏览器测试一下css属性，我这里就偷懒了没有加上-webkit-，-moz-等等，大家如果需要用可以hack。

下面附上jquery代码:

<script type="text/javascript">
$(document).ready(function(){
var slideBox = $(".slideBox");
var ul = slideBox.find("ul");
var oneWidth = slideBox.find("ul li").eq(0).width();
var number = slideBox.find(".spanBox span"); //注意分号和逗号的用法
var timer = null;
var sw = 0;
//每个span绑定click事件，完成切换颜色和动画，以及读取参数值
number.on("click",function (){
$(this).addClass("active").siblings("span").removeClass("active");
sw=$(this).index();
ul.animate({
"right":oneWidth*sw, //ul标签的动画为向左移动；
});
});
//左右按钮的控制效果
$(".next").stop(true,true).click(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
$(".prev").stop(true,true).click(function (){
sw--;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
//定时器的使用，自动开始
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
//hover事件完成悬停和，左右图标的动画效果
slideBox.hover(function(){
$(".next,.prev").animate({
"opacity":1,
},200);
clearInterval(timer);
},function(){
$(".next,.prev").animate({
"opacity":0.5,
},500);
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
})
})
</script>

复制代码

在代码中也分为几个部分，让大家清晰明了。其实很简单就是几个参数，几个函数，整个过程就click事件，hover时间，animate方法，setInterval（）就可以轻松搞定。在网上看到很多朋友也有分享，后面我会附上很多的html5的新功能，还有w3c标准以及css3的各种新鲜玩意。大家一起交流学习，共同进步。

我是自学er,也没有啥子技术，只是爱好，兴趣使然，可以一步一步的走进去，发现web前端的更深层的东西，每天都在瞻仰大山，攀爬中，早晚有一天会登上高山，然后创造高山。