js 实现图片无限横向滚动效果
门户网站好多都有产品无线滚动展现的效果:
测试demo1 -- 非无缝滚动(可以看出来从头开始的效果):
css样式如下:
.box{
width: 1000px;
border: 1px solid #ccc;
overflow: hidden;
height: 110px;
margin: 50px auto;
white-space: nowrap;
position: relative;
}
.con1{
width: 1000px;
height: 110px;
overflow: hidden;
position: absolute;
left:;
}
.con2{
position: absolute;
overflow: hidden;
opacity:;
}
html代码如下:
<div class="box">
<div class="con1">
<li><img src="img/SD_1.jpg" alt=""></li>
<li><img src="img/SD_2.jpg" alt=""></li>
<li><img src="img/SD_3.jpg" alt=""></li>
<li><img src="img/SD_4.jpg" alt=""></li>
<li><img src="img/SD_5.jpg" alt=""></li>
<li><img src="img/SD_6.jpg" alt=""></li>
</div>
<div class="con2"></div>
</div>
js代码如下:
window.onload = function(){
var cont = 5; //时间间隔
var box = document.getElementsByClassName("box")[0];
var con1 = document.getElementsByClassName("con1")[0];
var con2 = document.getElementsByClassName("con2")[0];
con2.innerHTML = con1.innerHTML;
function scroll(){
if(con1.scrollLeft >= con2.offsetWidth - box.offsetWidth){ //利用滚动差当滚动不动时重置为0
con1.scrollLeft = 0;
}else{
con1.scrollLeft += 1;
}
}
var timer = setInterval(scroll,cont);
box.onmouseover = function(e){
clearInterval(timer);
}
box.onmouseout = function(e){
timer = setInterval(scroll,cont);
}
}
2.测试demo2 -- 无缝滚动效果,看不出来重0效果:
css代码如下:
.box{
width: 1000px;
border: 1px solid #ccc;
overflow: hidden;
height: 110px;
margin: 50px auto;
white-space: nowrap;
position: relative;
}
.con1,.con2{
display: inline;
}
html结构同上;
js代码如下:
window.onload = function(){
var cont = 5;
var box = document.getElementsByClassName("box")[0];
var con1 = document.getElementsByClassName("con1")[0];
var con2 = document.getElementsByClassName("con2")[0];
con2.innerHTML = con1.innerHTML;
function scroll(){
if(con2.offsetWidth - box.scrollLeft <= 0){
// box.scrollLeft = 0; //重置为0 (这两项都行,不太明白???)
// box.scrollLeft -= con1.offsetWidth; //此值非0 一般情况为负值 (效果和重置为0一样)
}else{
box.scrollLeft += 1;
}
}
var timer = setInterval(scroll,cont);
box.onmouseover = function(e){
clearInterval(timer);
}
box.onmouseout = function(e){
timer = setInterval(scroll,cont);
}
}
js 实现图片无限横向滚动效果的更多相关文章
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- 利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
随机推荐
- java 文件的上传和下载
主要介绍使用 smartupload.jar 包中的方法对文件的上传和下载.上传时文件是存放在服务器中,我用的是tamcat. 首先建立一个servlet 类,对文件的操作 package com.d ...
- JavaScript 事件委托
JavaScript事件委托,或者叫事件代理,是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 借花献佛的例子(取快递): 有三个同事预计会在周一收到快递.为签收快递,有两种办法 ...
- ef使用dbfirst方式连接mysql
1.安装 mysql connector net 6.9.9 https://dev.mysql.com/downloads/file/?id=463758 和mysql for visual st ...
- Java 之初(1)
省赛结束之后有相当长一段空闲时间,于是就想先提前自学一点Java语言的知识,在这里纪录一下学习过程,希望能给自学Java的同学提供一点小帮助!(当然,也能方便我以后的复习用^_^) 在学习过程中有什么 ...
- 【Web crawler】爬虫之百度首页
刚开始学习爬虫,照着教程手打了一遍,还是蛮有成就感的.使用版本:python2.7 *注意:python2的默认编码是ASCII编码而python3默认编码是utf-8 import urllib2 ...
- 自学git心得-2
趁着最近还没忙起来,抓紧更新一下学习心得. 现在的情景是,我们已经在本地创建了一个Git仓库,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备 ...
- PHP | 别家网站都有的登录功能,你的网站也可以有!
如果说一个网站是一个独立的王国,那登录功能就相当于这个[王国]的大门.进出往来的人必须要通过这道[门]才能进出这个[王国],这样才能有效的达到对人流量和用户的有效监管,也可以进一步了解每个用户的喜好, ...
- 如何阅读 Redis 源码?ZZ
原文链接 在这篇文章中, 我将向大家介绍一种我认为比较合理的 Redis 源码阅读顺序, 希望可以给对 Redis 有兴趣并打算阅读 Redis 源码的朋友带来一点帮助. 第 1 步:阅读数据结构实现 ...
- javascript 时间日期处理相加,减操作方法js
javascript 时间日期处理相加,减操作方法js function dateAddDays(dataStr,dayCount){ var strdate = dataStr; // 2017年0 ...
- Topshelf Configuration z
Topshelf Configuration While the Quickstart gives you enough to get going, there are many more featu ...