web前端实现轮播图

轮播图由最后一张切到下一张(即第一张)时为了完成动画就把第一张图片接在最后一张图,到动画走完之后,执行js代码,马上变成第一张图,眼睛是观察不到的,由第一张切到其上一张(即最后一张时)亦是同理


<html>

<head>
    <meta charset="UTF-8">
    <title>焦点轮播图title>
    <style type="text/css">
        /*去除内边距,没有链接下划线*/
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*让
        body {
            padding: 20px;
        }

        /*最外围的div*/
        #container {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative; /*相对定位*/
            margin: 0 auto;
        }

        /*包含所有图片的
*/ #list { width: 4200px; /*7张图片的宽: 7*600 */ height: 400px; position: absolute; /*绝对定位*/ z-index: 1; } /*所有的图片*/ #list img { float: left; /*浮在左侧*/ } /*包含所有圆点按钮的
*/ #pointsDiv { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px; } /*所有的圆点*/ #pointsDiv span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; } /*第一个*/ #pointsDiv .on { background: orangered; } /*切换图标*/ .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0, 0, 0, 0.3); color: #fff; } /*鼠标移到切换图标上时*/ .arrow:hover { background-color: RGBA(0, 0, 0, 0.7); } /*鼠标移到整个div区域时*/ #container:hover .arrow { display: block; /*显示*/ } /*上一个切换图标的左外边距*/ #prev { left: 20px; } /*下一个切换图标的右外边距*/ #next { right: 20px; } img{ width: 600px; height: 400px; } style> head> <body> <div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> <img src="img/2.jpg" alt="2"/> <img src="img/3.jpg" alt="3"/> <img src="img/4.jpg" alt="4"/> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> div> <div id="pointsDiv"> <span index="1" class="on">span> <span index="2">span> <span index="3">span> <span index="4">span> <span index="5">span> div> <a href="javascript:;" id="prev" class="arrow"><a> <a href="javascript:;" id="next" class="arrow">>a> div> <script src="../js/jquery-1.10.1.js">script>//导入jQuery库 <script> var index = 1; //设定第一张下标为1 var en = true;//这里是切换标志,当播放切换动画时其值变为false,让cut函数无法执行,也就是这个过程中无法手动切换照片 //定义一个函数 传入参数为1时切上一张,传入其他切下一张 function cut(b){ if(en) { en = false; if (b == 1) { index--; } else { index++; } $('#list').animate({ left: index * (-600) },'slow', function () { //当由最后一张切到下一张也就是第一张,动画播完之后,必须回到真实的第一张 if (index == 6) { index = 1; } //当由第一张切到上一张也就是最后一张,动画完后,也必须回到真实的最后一张 if (index == 0) { index = 5; } $('#list').css('left', index * (-600)); $('span').removeClass('on'); //由$('span').get(index-1)得到是dom对象,必须转为jQuery对象 $($('span').get(index-1)).addClass('on') en = true; }) } } //上一张点击事件 $('#prev').click(function () { cut(1); }); //下一张点击事件 $('#next').click(function () { cut(0); }); //给照片下方圆点添加点击事件,设置的照片index比通过圆点的index()函数得到的index大1 $('span').click(function () { index = $(this).index(); cut(0); }) //设置延时:每2000ms执行一次图片切换 var Interval = setInterval(function () { cut(0); },2000) /*当鼠标移到照片上,清楚定时器,停止自动切换,移开鼠标时又开始自动播放hover是添加了鼠标的移入移出事件,mouseenter()和mouseleave()只在移入当前元素时才触发, hover()使用的是mouseenter()和mouseleave()*/ $('#container').hover(function () { clearInterval(Interval) },function () { Interval = setInterval(function () { cut(0); },2000) }) script> body> html>

你可能感兴趣的:(web,前端)