通过JS实现轮播图

来源：互联网发布：c语言求ab的最大公约数编辑：程序博客网时间：2024/05/22 04:37

博客参考：
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>

阅读全文

0 0