使用Javascript简单实现图片无缝滚动_Javascript教程-查字典教程网
使用Javascript简单实现图片无缝滚动
使用Javascript简单实现图片无缝滚动
发布时间:2016-12-30 来源:查字典编辑
摘要:js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单。主要的是使用js位置知识。...

js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单。

主要的是使用js位置知识。

1.innerHTML:设置或获取元素的html标签

2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距

3.offsetWidth:设置或获取指定标签的宽度

4.setInterval():设置方法定时启动

5.clearInterval();清除定时器

效果图:

先睹为快:demo

复制代码 代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>javascript scroll制作</title>

</head>

<body>

<style>

/*conment*/

*{

margin: 0;

padding: 0;

}

img{max-width: 100%;}

.container{

max-width: 620px;

margin: 0 auto;

padding-top: 50px;

}

.text-center{text-align: center;}

.list-inline li{

display: inline-block;

}

.hide{display: none;}

hr{

margin:20px 0;

}

.tag{

background-color: #ccc;

padding: 5px 0;

}

.tag li{

padding: 0 10px;

border-left: 1px solid #fff;

cursor:pointer;

}

.tag li:first-child{

border-left: transparent;

}

.tag li.active{

background-color: #ddd;

}

.scroll{

position: relative;

padding: 10px;

margin-bottom: 20px;

background-color: #ddd;

}

.wrap{

overflow: hidden;

}

.content{

min-width: 3000px;

height: 200px;

}

.content ul{

float: left;

}

.content ul li{

display: inline-block;

max-width: 200px;

}

#prev,#next{

width: 50px;

height: 50px;

margin-top: -25px;

background-color: #ccc;

line-height: 50px;

text-align: center;

cursor: pointer;

}

#prev{

position: absolute;

left: 0;

top:50%;

border-radius: 0 25px 25px 0;

}

#next{

position: absolute;

right: 0;

top:50%;

border-radius: 25px 0 0 25px;

}

</style>

<div>

<h1>图片滚动制作</h1>

<hr>

<div>

<div id="wrap">

<div id="content" >

<ul id="list1">

<li> <img src="freelance.gif" alt=""> </li>

<li> <img src="button.gif" alt=""></li>

<li> <img src="load.gif" alt=""></li>

<li> <img src="straw.gif" alt=""></li>

</ul>

<ul id="list2">

</ul>

</div>

</div>

<div id="prev">

prev

</div>

<div id="next">

next

</div>

</div>

</div>

<script>

var wrap=document.getElementById('wrap');

var list1=document.getElementById('list1');

var list2=document.getElementById('list2');

var prev=document.getElementById('prev');

var next=document.getElementById('next');

//创建复制一份内容列表

list2.innerHTML=list1.innerHTML;

//向左循环滚动

function scroll(){

if(wrap.scrollLeft>=list2.offsetWidth){

wrap.scrollLeft=0;

}

else{

wrap.scrollLeft++;

}

}

timer = setInterval(scroll,1);

//鼠标停留使用clearInterval()

wrap.onmouseover=function(){

clearInterval(timer);

}

wrap.onmouseout=function(){

timer = setInterval(scroll,1);

}

//向左加速

function scroll_l(){

if(wrap.scrollLeft>=list2.offsetWidth){

wrap.scrollLeft=0;

}

else{

wrap.scrollLeft++;

}

}

//向右滚动

function scroll_r(){

if(wrap.scrollLeft<=0){

wrap.scrollLeft+=list2.offsetWidth;

}

else{

wrap.scrollLeft--;

}

}

prev.onclick=function(){

clearInterval(timer);

change(0)

}

next.onclick=function(){

clearInterval(timer);

change(1)

}

function change(r){

if(r==0){

timer = setInterval(scroll_l,60);

wrap.onmouseout = function(){

timer = setInterval(scroll_l,60);

}

}

if(r==1){

timer = setInterval(scroll_r,60);

wrap.onmouseout = function(){

timer = setInterval(scroll_r,60);

}

}

}

</script>

</body>

很简洁实用的代码,小伙伴们根据自己的项目需求,适当美化下即可。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类