图片滚动

来源：互联网发布：c语言null输出什么编辑：程序博客网时间：2024/06/06 14:15

图片的无缝滚动
一、HTML

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <link rel="stylesheet" type="text/css" href="gundong.css" /><!--引入css:link:css;-->        <script src="jquery.js" type="text/javascript"></script>        <script src="gundong.js" type="text/javascript"></script>    </head>    <body>    <a href="javascript:;" class="goLeft">向左走</a><!--a.goLeft+a.goRight快捷键-->    <a href="javascript:;" class="goRight">向右走</a>    <div class="wrap">        <ul>            <li><img src="1.jpg" alt="" /></li>            <li><img src="2.jpg" alt="" /></li>            <li><img src="3.jpg" alt="" /></li>            <li><img src="4.jpg" alt="" /></li>            <li><img src="5.jpg" alt="" /></li>        </ul>    </div>    </body></html>

二、Css

*{    margin: 0;    padding: 0;}img{    border:0;}ol, ul,li{list-style: none;} /*重置样式*/body{    margin: 50px;}.wrap{    border:1px solid red;    width: 800px;    height:200px;    position: relative;    overflow:hidden;/*超过框架的部分隐藏*/}.wrap ul{    overflow: hidden;/*防止父元素ul脱离文档流*/    _height:1px ;    width:1600px;    position: absolute;    left: 0;    top: 0;}.wrap ul li{    float: left;/*左浮动会导致父元素ul脱离文档流的计算；之前需要加overflow;*/    width:200px;/*为了以后JS中改变ul宽度做铺垫*/}

三、Js

$(document).ready(function(){    var oul= $('.wrap ul');    var oulHtml= oul.html();    oul.html(oulHtml+oulHtml)/*或者用oul.append(oulHtml)来实现图片的复制*/    var timeId= null;/*设置定时器*/    var ali= $('.wrap ul li');    var aliWidth= ali.eq(0).width();    var aliSize= ali.size();    var ulWidth= aliWidth*aliSize;    oul.width(ulWidth);    var speed= -2;    function slider(){        if(speed<0){            if(oul.css('left')==-ulWidth/2+'px'){            oul.css('left',0);        }        oul.css('left','+='+speed+'px');/*"每毫秒累加2px向左滚动"*/        }        if (speed>0) {            if(oul.css('left')=='0px'){            oul.css('left',-ulWidth/2+'px');            }            oul.css('left','+='+speed+'px');        }    };    /*setInterval（）函数的作用是：每隔一段时间执行该函数里的代码*/    timeId = setInterval(slider,30);    $('.wrap').mouseover(function(event) {        /* clearInterval()函数的作用是用来清除定时器的 */        clearInterval(timeId);    });    $('.wrap').mouseout(function(event) {    timeId = setInterval(slider,30);/*鼠标移除后继续开启setInterval()函数 */    });    $('.goLeft').click(function(event) {        speed = -2;/*鼠标通过点击控制图片向左走还是向右走 */    });    $('.goRight').click(function(event) {        speed = 2;    });});

阅读全文

0 0