search

Home >Web Front-end >HTML Tutorial >div css jQuery image horizontal scrolling code (with left and right click buttons)_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:33:381340browse

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>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS DIV border attribute_html/css_WEB-ITnoseNext article：CSS DIV border attribute_html/css_WEB-ITnose

Related articles

See more