您的位置：首页 > 编程语言

焦点轮播图代码详解！基础版本

2017-10-03 11:46 405 查看

基本的html框架是这样的

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bb</title>
<link href="css/aa.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/aa.js"></script>
<script type="text/javascript" src="js/bb.js"></script>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.container{
width:400px;
height:200px;
overflow:hidden;/*隐藏溢出的图片*/
position:relative;
margin:0 auto;
}
.pic{
width:1600px;/*5张图的宽度*/
position:absolute;/*基于父容器进行定位*/
}
.pic div{
float: left;
}
.pic div img{
width:400px;
height:200px;/*想要图片多大比例，就直接定义img标签的大小，其它容器智慧在定位的时候有用，或者overflow截图的时候用*/
}
.position{
position: absolute;
bottom: 0;
right:0;
margin: 0;
background: #000;
opacity: 0.4;
width: 400px;
text-align: center;
}
.position li{
width: 10px;
height: 10px;
margin:0 2px;
display: inline-block;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #afafaf;
}
.position .cur{
background-color: #ff0000;
}
.arrow {
cursor: pointer;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 80px;
background-color: RGBA(0,0,0,.3);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0,0,0,.7);
}
.container:hover .arrow {
display: block;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="pic" style="left:-400px">
<div><a href="#"><img src="images/1.jpg" alt="pic3copy"></a></div>
<div><a href="#"><img src="images/2.jpg" alt="pic1"></a></div>
<div><a href="#"><img src="images/3.jpg" alt="pic2"></a></div>
<div><a href="#"><img src="images/4.jpg" alt="pic3"></a></div>
</div>
<ul class="position">
<li class="cur"></li>
<li class=""></li>
<li class=""></li>
</ul>
<a href="javascript:;"  class="arrow prev"><</a>
<a href="javascript:;"  class="arrow next">></a>
</div>
</body>
</html>

下边是逻辑的第一步：写左右按钮的点击事件。——其包含怎样从按钮中提取数据元素，怎样将数据元素给重新赋予按钮之中。(这里需要解释的是这里的图在pic属性为left：0，left：-400，left：-800，left：-1200时分别呈现出来。 )container是个盒子但是只有400宽度，还有个防测漏属性overflow:hidden; 。焦点轮播图的本质就是pic的大盒子一直在左右移动，最关键的属性就是pic的left属性。

$('.next').click(function(){
/*图片向右移动一位*/
if(currentleft=="-1200px"){
currentleft="400px";
}
future=(parseInt(currentleft)-400)+"px";
$(".pic").css("left",future);
currentleft=future;
});
/*左按钮事件*/
$('.prev').click(function(){
/*图片向左移动一位*/
if(currentleft=="0px"){
currentleft="-1600px";
}
future=(parseInt(currentleft)+400)+"px";
$(".pic").css("left",future);
currentleft=future;
});//这个是不关联圆点的。

下边是关联圆点的。（就是小圆点和图片一起运动的）

$('.next').click(function(){
/*图片向右移动一位*/
if(currentleft=="-1200px"){
currentleft="400px";
}
future=(parseInt(currentleft)-400)+"px";
$(".pic").css("left",future);
currentleft=future;
/*小圆点事件*/
if(index==3){
index=-1;
}
index++;
showBtn(index);
});
/*左按钮事件*/
$('.prev').click(function(){
/*图片向左移动一位*/
if(currentleft=="0px"){
currentleft="-1600px";
}
future=(parseInt(currentleft)+400)+"px";
$(".pic").css("left",future);
currentleft=future;
/*小圆点事件*/
if(index==0){
index=4;
}
index--;
showBtn(index);
});//这个是不关联圆点的。
/*小圆点事件*/
function showBtn(index){
$(".position li").each(function(){
$(this).removeClass("cur");
});
$(".position li:eq(" + index + ")").addClass("cur");
}

下边是小圆点点击事件。这里需要注意的是：怎样得到选定元素的索引值index=$('.position li').index(this); 这里不能直接用$(this).index();需要以后探讨

$(".position li").click(function(){
index=$('.position li').index(this);
showBtn(index);
future=(index*-520)+"px";
$(".pic").css("left",future);
currentleft=future;
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 焦点轮播图详解最详细的 jquery焦点轮播图源代码

相关文章推荐

新的分享

章节导航