js+css实现图片横向左右滚动并悬停的效果，兼容主流浏览器 - 建站技术

js+css实现图片横向左右滚动并悬停的效果，兼容主流浏览器【建站技术】

此代码是从阿里西西上面找到的，经本人修改加工，完美兼容主流浏览器，是建站不可或缺的代码。
使用方法：
1、点击向左箭头，图片会自动向左移动；
2、点击向右箭头，图片会自动向右移动；
3、鼠标移动到图片上面，暂停滚动，鼠标移走，继续滚动；
4、展现的形式是否完美，取决于几个宽度：showwidth，steplength，#fl，mqdemoa，li，所有宽度都基于li的宽度（即滚动元素的宽度）；
5、如在使用过程中遇到问题，欢迎留言反馈；
6、如需转载请保留本文链接地址，http://www.cookseo.com/blog/web/jsleftright/，不胜感谢。

演示效果请移步：http://www.loanchina.com 底部合作伙伴的图片链接区域。
效果截图：

代码如下：
1、将以下代码保存为index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片横向滚动效果-网站SEO-CSS技巧-www.cookseo.com</title>
<meta content="daniel,网站SEO,CSS技巧,cookseo.com" name="author" />
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dhscroll.js"></script>
<body>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td height="60" style="border:1px solid #ccc">
<div class="pre" onclick="dhs.pre();"></div>
<div id="fl">
<ul id="fl2" class="mqdemoa">
<li><a href="http://www.cookseo.com"><img src="http://www.loanchina.com/loan/photos/productb/20070611000001_0.6308717793276156.gif" width="120" height="50" alt="北京市中国银行"></a></li>
<li><a href="http://www.loanchina.com/market/detail/index_BNK000108.html"><img src="http://www.loanchina.com/loan/photos/productb/20070612000004_0.48525840801333153.gif" width="120" height="50" alt="北京市中国工商银行"></a></li>
<li><a href="http://www.cookseo.com"><img src="http://www.loanchina.com/loan/photos/productb/20070611000017_0.5595397247238353.gif" width="120" height="50" alt="上海市上海银行"></a></li>
<li><a href="http://www.cookseo.com"><img src="http://www.loanchina.com/loan/photos/productb/20070611000006_0.21489296190768126.gif" width="120" height="50" alt="福州市兴业银行"></a></li>
<li><a href="http://www.cookseo.com"><img src="http://www.loanchina.com/loan/photos/productb/20070611000004_0.6957740846831384.gif" width="120" height="50" alt="上海市上海浦东发展银行"></a></li>
<li><a href="http://www.cookseo.com"><img src="http://www.loanchina.com/loan/photos/productb/20070611000014_0.45982972712243064.gif" width="120" height="50" alt="深圳市招商银行"></a></li>
<li><a href="http://www.cookseo.com"><img src="http://www.loanchina.com/loan/photos/productb/20070611000005_0.1508388727795429.gif" width="120" height="50" alt="深圳市深圳发展银行"></a></li>
<li><a href="http://www.cookseo.com"><img src="http://www.loanchina.com/loan/photos/productb/20070611000007_0.02966810033620748.gif" width="120" height="50" alt="北京市光大银行"></a></li>
<li><a href="http://www.cookseo.com"><img src="http://www.loanchina.com/loan/photos/productb/20070611000016_0.5708705689843352.gif" width="120" height="50" alt="天津市渤海银行"></a></li>
<li><a href="http://www.cookseo.com"><img src="http://www.loanchina.com/loan/photos/productb/20070611000008_0.0397979671791564.gif" width="120" height="50" alt="北京市中信银行"></a></li>
</ul>
</div>
<div class="next" onclick="dhs.next();"></div>
</div>
</td></tr>
<tr><td style="text-align:left">
<br />使用方法：<br />
1、点击向左箭头，图片会自动向左移动；<br />
2、点击向右箭头，图片会自动向右移动；<br />
3、鼠标移动到图片上面，暂停滚动，鼠标移走，继续滚动；<br />
4、展现的形式是否完美，取决于几个宽度：showwidth，steplength，#fl，mqdemoa，li，所有宽度都基于li的宽度（即滚动元素的宽度）<br />
5、如在使用过程中遇到问题，欢迎留言反馈；
6、如需转载请保留本文链接地址，<a href="http://www.cookseo.com/blog/web/jsleftright/">http://www.cookseo.com/blog/web/jsleftright/</a>，不胜感谢。
</td></tr>
</table>
<script type="text/javascript">
var dhs = new dhscroll();
dhs.scrollDOM = document.getElementById("fl");
dhs.scrollCDOM = document.getElementById("fl2");
dhs.showwidth = 260; //此宽度决定了每次移动的宽度
dhs.getsw();
dhs.go("left",true);
</script>
</body>
</html>

2、将以下代码保存为dhscroll.js

function dhscroll(){
    //author:dh20156
    var dh = this;
    this.autoid = null;
    //块1
    this.scrollDOM = null;
    //块2
    this.scrollCDOM = null;
    //展示宽度（和块1宽度一致）
    this.showwidth = 0;
    //每次滚动长度
    this.steplength = 20;
    var oldlength = this.steplength;
    //滚动时间间隔
    this.steptime = 1;
    //停顿时间
    this.resttime = 3000;
    //滚动长度
    this.uvwidth = 0;

    //无缝设置过程
    this.getsw = function() {
    
        var tempw = this.scrollCDOM.offsetWidth;
        var temps = this.scrollCDOM.innerHTML;
        this.scrollCDOM.innerHTML = [temps,temps].join("");
        this.scrollCDOM.style.width = tempw*2+"px";
        if(document.attachEvent){
            this.scrollDOM.attachEvent("onmouseover",dh.pause);
            this.scrollDOM.attachEvent("onmouseout",dh.goon);
        }else{
            this.scrollDOM.addEventListener("mouseover",dh.pause,true);
            this.scrollDOM.addEventListener("mouseout",dh.goon,true);
        }
        this.uvwidth = Math.ceil(this.scrollDOM.scrollWidth / 2);
    }

    //从右到左
    this.scrollleft = function(){
        if(this.autoid!=null){
            window.clearTimeout(this.autoid);
        }
        var uvleft = this.scrollDOM.scrollLeft;
        uvleft += this.steplength;

        this.scrollDOM.scrollLeft = uvleft;

        if(uvleft>=this.uvwidth){
            this.scrollDOM.scrollLeft = 0;
        }

        if(uvleft % this.showwidth == 0){
            this.autoid = window.setTimeout(function(){dh.scrollleft()},dh.resttime);
        }else{
            this.autoid = window.setTimeout(function(){dh.scrollleft()},dh.steptime);
        }
        
    }

    //从左到右
    this.scrollright = function() {
        if (this.autoid != null) {
            window.clearTimeout(this.autoid);
        }
        var uvleft = this.scrollDOM.scrollLeft;
        uvleft -= this.steplength;

        this.scrollDOM.scrollLeft = uvleft;

        if (uvleft <= 0) {
            this.scrollDOM.scrollLeft = this.uvwidth;
            
        }

        if (uvleft % this.showwidth == 0) {
            this.autoid = window.setTimeout(function() { dh.scrollright() }, dh.resttime);
        } else {
            this.autoid = window.setTimeout(function() { dh.scrollright() }, dh.steptime);
        }
    }

    //开始滚动，参数为方向，首屏是否停顿
    this.go = function(direction, rest) {
        if(this.autoid!=null){
            window.clearTimeout(this.autoid);
        }
        if(direction=="left"){
            if(rest){
                this.autoid = window.setTimeout(function(){dh.scrollleft()},5000);
            }else{
                dh.scrollleft();
            }
        }else{
            if(rest){
                this.autoid = window.setTimeout(function(){dh.scrollright()},5000);
            }else{
                dh.scrollright();
            }
        }
    }

    //往左
    this.pre = function(){
            this.scrollleft();
    }
    //往右
    this.next = function(){
            this.scrollright();
    }
    //暂停
    this.pause = function(){
        dh.oldlength = dh.steplength;
        dh.steplength = 0;
    }
    //继续
    this.goon = function(){
        dh.steplength = dh.oldlength;
    }
}

3、将以下代码保存为css.css

@charset "gb2312";
/*
Author:daniel
Website:cookseo.com
Date:2010-02-10
*/
html, body{ background:#f9f9f9; margin-top:50px; text-align:center; font-size:12px; line-height:23px; }
div, ul, li, img { margin:0; padding:0; border:0; }
#fl {
z-index:2;
float:left;
width:910px; /* 如有必要，请修改此宽度 */
height:50px;
overflow:hidden;
position:relative;
}
#fl li{ float:left; }
.mqdemoa { overflow:hidden; list-style:none; width:2600px!important;width:1300px; /* 如有必要，请修改此宽度 */}
.mqdemoa li { float:left; width:130px; text-align:center; /* 如有必要，请修改此宽度 */}
.pre, .next {
width:13px;
height:30px;
float:left;
display:inline;
cursor:pointer;
}
.pre{ margin:15px 0 0 6px; background:url(http://www.loanchina.com/Gbimages/main/indexlinkl_12X30.gif) no-repeat; }
.next{ margin:15px 0 0; background:url(http://www.loanchina.com/Gbimages/main/indexlinkr_12X30.gif) no-repeat; }

打包下载地址：jsleftright.rar

流行热度：超过人阅读
关键词：js css 图片滚动 js特效
发布日期：daniel 发表于 2010-2-10 14:59:08
所属分类：【网站SEO - WEB标准】 - 【建站技术】
文章链接：http://www.cookseo.com/blog/web/jsleftright/ [点击复制] (转载时请注明本文出处及文章链接)
引用地址：点击这里获取该日志的TrackBack引用地址

zblog微博客的插件制作思路年过完了,该好好工作和学习了

您或许对与建站技术相关的文章感兴趣：

CSS hack 不完全手册 (2010-2-1 13:12:56)

精典CSS+Xhtml导航,兼容所有浏览器(CSS精华与Hack的集中体现) (2009-8-6 12:57:0)

用overflow来解决div的自适应高度 (2009-8-3 13:1:18)

再发一个纯CSS的Tab切换卡 (2009-7-1 9:40:56)

纯Xhtml+Css制作的Tab选项卡切换 (2009-6-30 13:10:36)

js+css制作选项卡特效,兼容IE6,IE7,火狐FF及Chrome (2009-6-1 10:7:12)

Firefox的div高度自适应 (2009-5-26 15:42:4)

利用CSS截取文本字数,防止文本溢出 (2009-5-26 15:38:14)

本文被踩了(11)次, 既然来了，我也要踩一脚