通过JS实现轮播图
博客参考：
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
效果展示：
自己的版本：
<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><div class="btn btn1"> < div><div class="btn btn2"> > div><ul id="tabs"><li class="tab bg">1li><li class="tab">2li><li class="tab">3li><li class="tab">4li><li class="tab">5li><li class="tab">6li><li class="tab">7li><li class="tab">8li>ul>div>
body>
<script src="jquery-3.1.1.js">script>
<script>//定义全局变量和定时器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>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！