博客参考:
1、http://blog.csdn.net/a2011480169/article/details/76218022
(绝对定位和相对定位)
2、轮播图
http://www.jb51.net/article/94598.htm
3、定时器和计时器
http://blog.csdn.net/a2011480169/article/details/76706014
4、css中的overflow属性
参考文档:如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。
链接:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
链接:http://www.w3school.com.cn/tiy/t.asp?f=csse_overflow
效果展示:
自己的版本:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery实现轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 700px;
height: 320px;
position: relative;
/*通过下面这行设置将标签div.box进行居中*/
margin: 100px auto;
border: red 1px solid;
/*如果标签里面的内容多了出来,则自动隐藏掉*/
overflow: hidden;
}
a.show_img{
position: absolute;
top:0px;
left: 0px;
}
a.show_img > img{
/*我在这里将图片的大小设置为和box的大小一样*/
width: 700px;
height: 320px;
}
div.btn{
position: absolute;
/*设置文本颜色*/
color: #fff;
top:110px;
height: 100px;
width: 40px;
background-color: rgba(255,255,255,.3);
/*font-size 属性可设置字体的尺寸*/
font-size: 40px;
/*font-weight 属性可设置字体的粗细*/
font-weight: bold;
text-align: center;
line-height:100px;
/*为元素添加圆角边框*/
border-radius: 5px;
}
div.btn1{
left: 5px;
}
div.btn2{
right: 5px;
}
/*设置两个箭头的触摸效果*/
div.btn:hover{
background-color: rgba(0,0,0,.7);
}
#tabs{
position: absolute;
list-style: none;
background-color: rgba(255,255,255,.5);;
left: 300px;
bottom: 10px;
border-radius: 10px;
/*padding的设置很重要*/
padding: 5px 5px 5px 5px;
}
li.tab{
float: left;
text-align:center;
line-height: 20px;
/*尺寸的设置正好凑成100px*/
width: 20px;
height: 20px;
cursor: pointer;
overflow: hidden;
margin-right: 4px;
border-radius: 100%;
background-color: rgb(200,100,150);
}
.bg{
/*在这里不知道为什么background-color没有效果*/
color: firebrick;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<a class="show_img" href="#"><img src="https://img30.360buyimg.com/da/jfs/t10846/118/921740535/144783/d565804f/59dacf8fN41cce70e.jpg" alt="图片1"></a>
<a class="show_img" href="#"><img src="https://img1.360buyimg.com/da/jfs/t10981/350/946023540/103479/8f0c21d4/59db2821N4b9071dc.jpg" alt="图片2"></a>
<a class="show_img" href="#"><img src="https://img10.360buyimg.com/da/jfs/t6820/298/2308078487/205126/bb146e27/598abe88N80fb9275.jpg" alt="图片3"></a>
<a class="show_img" href="#"><img src="https://img12.360buyimg.com/babel/jfs/t10015/250/309157568/53139/5deda504/59cbbdd9N36042540.jpg" alt="图片4"></a>
<a class="show_img" href="#"><img src="https://img12.360buyimg.com/da/jfs/t7486/85/2097038085/41277/8dbf5f28/59a7a469N55f52c1a.jpg" alt="图片5"></a>
<a class="show_img" href="#"><img src="https://img14.360buyimg.com/babel/jfs/t10060/163/323795451/128573/a27101eb/59cc7a28N48451dd3.jpg" alt="图片6"></a>
<a class="show_img" href="#"><img src="https://img10.360buyimg.com/babel/jfs/t10984/42/418129198/124846/e8d52814/59cf1c7dNe3f8213f.jpg" alt="图片7"></a>
<a class="show_img" href="#"><img src="https://img11.360buyimg.com/babel/jfs/t9820/270/1201663909/107853/e81bef25/59ddafbcNf1363291.jpg" alt="图片8"></a>
<!--加入两个箭头标签,凡是同类的东西一般class都会设置为一个相同的数值-->
<div class="btn btn1"> < </div>
<div class="btn btn2"> > </div>
<!--设置下面5个圆框-->
<ul id="tabs">
<li class="tab bg">1</li>
<li class="tab">2</li>
<li class="tab">3</li>
<li class="tab">4</li>
<li class="tab">5</li>
<li class="tab">6</li>
<li class="tab">7</li>
<li class="tab">8</li>
</ul>
</div>
</body>
<script src="jquery-3.1.1.js"></script>
<!--下面开始写jquery逻辑代码-->
<script>
<!--通过js代码设置相应的动画效果-->
//定义全局变量和定时器
var i = 0;
var timer;
//一旦加载完页面就自动调用下面的函数
$(function () {
//用jquery方法默认设置第一张图片显示,其余隐藏,注意siblings的用法
$('a.show_img').eq(0).show().siblings('a.show_img').hide();
$('li.tab').eq(0).addClass('bg').siblings('li.tab').removeClass('bg');
timer = setInterval(show_img,2000);
//当鼠标经过下面的数字的时候(考虑鼠标悬停和鼠标离开两种效果)
$('li.tab').hover(function () {
i = $(this).index();
//先关掉定时器
clearInterval(timer);
//并通过索引显示相应的效果
show();
},function () {
timer = setInterval(show_img,2000);
})
//鼠标点击左侧箭头触发效果
$('div.btn1').click(function () {
clearInterval(timer);
if (i == 0){
i = 8; //注意此时i的数值
}
i --;
show();
timer = setInterval(show_img,2000);
})
//鼠标点击右侧箭头触发效果
$('div.btn2').click(function () {
clearInterval(timer);
if (i == 7){
i = -1; //注意此时i的数值
}
i ++;
show();
})
})
function show_img() {
i++;
if (i == 8){
i = 0;
}
//用fadeIn()替换掉show(),用fadeOut()替换掉hide();
$('a.show_img').eq(i).fadeIn(600).siblings('a.show_img').fadeOut(600);
$('li.tab').eq(i).addClass('bg').siblings('li.tab').removeClass('bg');
}
function show() {
$('a.show_img').eq(i).fadeIn(600).siblings('a.show_img').fadeOut(600);
$('li.tab').eq(i).addClass('bg').siblings('li.tab').removeClass('bg');
}
</script>
</html>