轮播图
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel='stylesheet' href="css1/conmon.css"> <!--引入外部样式 -->
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <!–js 库 –>-->
<script src="js.js"></script> <!--js 库 -->
</head>
<body>
<div>
<ul class="pic">
<!--<!–四张图片 –>-->
<li><img src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"></li>
</ul>
<ul class="btn">
<!--左右白色的<> -->
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="tab">
<!--四个小圈点 -->
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="jq/index.js"></script> <!--本地 js 文件 -->
</body>
</html>
css1/conmon.css
*{ /*重置*/
margin:0 ;
padding: 0;
}
ul{
list-style: none; /*去掉列表中的小点*/
}
div{
height: 200px;
width: 800px;
background: yellow;
margin: 20px auto; /*离顶部20，剧中*/
position:relative; /*相对定位*/
}
div .pic li img{ /*控制图片尺寸*/
height: 200px;
width: 800px;
position: absolute; /*绝对定位*/
display: none; /*不显示*/
}
div .pic li .show{
display: block;
}
div .btn{
height: 200px;
line-height: 200px;
/*上边两行：高度，行高使得其居中*/
font-size: 60px; /*字体大小*/
font-weight:800; /*粗细*/
color: white;
display: none; /*不显示*/
cursor: pointer; /*出现小手*/
}
div:hover .btn{
display: block; /*显示*/
}
div .btn .left{
position: absolute; /*绝对定位*/
left: 20px;
}
div .btn .right{
position: absolute; /*绝对定位*/
right: 20px;
}
div .tab{
height: 15px;
width: 110px;
position: absolute;
bottom: 15px; /*离底部*/
left: 345px; /*离左边（调到居中）*/
}
div .tab li{
height: 13px;
width: 13px;
border: 1px solid crimson;
border-radius: 50%; /*方到圆*/
float: left; /*列变行*/
margin-left: 10px; /*四个点的距离*/
cursor: pointer; /*出现小手*/
}
div .tab .active{
background: white;
}
div .tab li:hover{
background: white;
border: 1px solid white;
}
index.js
/**
* Created by Administrator on 2018/8/11 0011.
*/
//获取操作对象
var $pic = $('.pic li img'); //图片
var $btn = $('.btn li'); //<>
var $tab = $('.tab li'); // 四个小点
var len = $pic.length; //图片数量
//初始化
$pic.eq(0).addClass('show'); //为第一张图片添加类名 show
$tab.eq(0).addClass('active'); //为第一个步点添加类名 active
var n_index = 0; //定义一个变量四个小点当前下村
// 图和小点变化 函数
function chonge(n){
$pic.eq(n_index).fadeOut(1500); //渐渐消失
$tab.eq(n_index).removeClass(); //删除对象的类名
n_index = n;
$pic.eq(n_index).fadeIn(1500); //渐渐出现
$tab.eq(n_index).addClass('active'); //添加对象的类名
}
$tab.click(function(){
console.log($(this).index()); //对象本身的序列
var num = $(this).index();
if(num != n_index){
chonge(num);
}
});
// 左右<>
$btn.click(function(){
console.log($(this).index()); //对象本身的序列
var num = n_index; //获取当前显示的对象序列
if($(this).index()==1){
num ++;
if(num>=len-1){
//num = num%len;
num%=len;
}
}
else {
num --;
if(num<0){
num=len-1;
}
}
chonge(num);
});
//自动轮播
function f1(){
var num = n_index; //获取当前显示的对象序列
num++;
num%=len;
chonge(num);
}
setInterval(f1,3000);
