div css jQuery image horizontal scrolling code (with left and right click buttons)_html/css

div css jQuery image horizontal scrolling code (with left and right click buttons)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:33:38

Original

1359 people have browsed it

First of all, I would like to thank Mr. Blue for his javascript tutorial, which gave me a lot of inspiration. After watching the video section 10 - Use of timers - 2, I tried to rewrite the code with jQuery. It feels at least more reliable than the one found on Baidu. Here’s the code:

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src = "jquery_v1.7.2.js"></script>    <script type="text/javascript">$(document).ready(function (){/*=============Author:GinoBlog:http://www.cnblogs.com/ginowang42Thanks：@Blue--http://www.zhinengshe.com/video.html#1Name:jQuery插件图片左右无缝滚动Arguments:    @leftBtn:向左滚动按钮DOM引用    @rightBtn:向右滚动按钮DOM引用    @speed：滚动速度（每次滚动像素数）CSS keyed Attribute:    #noSeamScroll{position:relative;overflow:hidden;}    #noSeamScroll ul{position:absolute;}        #noSeamScroll ul li {float:left;}    ===============*/    $.fn.extend({noSeamScroll:function (leftBtn,rightBtn,speed){        var timeFlag = speed = speed || 4;;        var timer = null;        var _this = this;//把this重新保存在一个私有变量里面，以防止setInterval误把this指向了window        this.oUl = $("ul",this);        this.oUl.html(this.oUl.html() + this.oUl.html());//把li复制一份        this.oLis = $("ul li",this);//之后再变量保存li的全部节点        this.oUl.width(this.oLis.eq(0).outerWidth(true)*this.oLis.length + "px");        var fnMove = function (){            $("ul",_this).css("left",function (){                if ($(this).position().left > 0){//这里的this指的是$("ul",element)                    return -$(this).outerWidth(true)/2 + "px";                }                if ($(this).position().left < -$(this).outerWidth(true)/2 ){                    return "0px";                }                return $(this).position().left  + timeFlag + "px";            })        }            timer = setInterval(fnMove,30);                this.mouseover(function () {clearInterval(timer);});        this.mouseout(function () {timer = setInterval(fnMove,30)});                leftBtn.click(function (){            clearInterval(timer);            timeFlag = -speed;            timer = setInterval(fnMove,30);        })        rightBtn.click(function (){            clearInterval(timer);            timeFlag = speed;            timer = setInterval(fnMove,30);        })    }    });    //test    $("#noSeamScroll").noSeamScroll($("#leftArr"),$("#rightArr"),2);        })    </script>    <style type="text/css">    *{margin:0;padding:0;}    #noSeamScroll{width:752px;height:108px;margin:20px auto;position:relative;overflow:hidden;}    #noSeamScroll ul{position:absolute;list-style:none;}        #noSeamScroll ul li {float:left;width:178px;height:108px;margin-right:10px;}            </style></head><body><a href="javascript:;" id="leftArr">向左移动</a><a href="javascript:;" id="rightArr">向右移动</a>    <div id = "noSeamScroll">        <ul>            <li><img src="images/1.jpg" alt="" /></li>            <li><img src="images/2.jpg" alt="" /></li>            <li><img src="images/3.jpg" alt="" /></li>            <li><img src="images/4.jpg" alt="" /></li>                    </ul>    </div></body></html>

Copy after login