使用Javascript簡(jiǎn)單實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)
js無(wú)縫滾動(dòng)效果幾乎在任何網(wǎng)頁(yè)上都能看到它的身影,有的可能是使用插件,其實(shí)使用原始的javascript比較簡(jiǎn)單。
主要的是使用js位置知識(shí)。
1.innerHTML:設(shè)置或獲取元素的html標(biāo)簽
2.scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見(jiàn)內(nèi)容的最左端之間的距
3.offsetWidth:設(shè)置或獲取指定標(biāo)簽的寬度
4.setInterval():設(shè)置方法定時(shí)啟動(dòng)
5.clearInterval();清除定時(shí)器
效果圖:
先睹為快: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 class="container">
<h1 class="text-center">圖片滾動(dòng)制作</h1>
<hr>
<div class="scroll">
<div class="wrap" id="wrap">
<div id="content" class="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');
//創(chuàng)建復(fù)制一份內(nèi)容列表
list2.innerHTML=list1.innerHTML;
//向左循環(huán)滾動(dòng)
function scroll(){
if(wrap.scrollLeft>=list2.offsetWidth){
wrap.scrollLeft=0;
}
else{
wrap.scrollLeft++;
}
}
timer = setInterval(scroll,1);
//鼠標(biāo)停留使用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++;
}
}
//向右滾動(dòng)
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>
很簡(jiǎn)潔實(shí)用的代碼,小伙伴們根據(jù)自己的項(xiàng)目需求,適當(dāng)美化下即可。
- javascript實(shí)現(xiàn)多張圖片左右無(wú)縫滾動(dòng)效果
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)
- Javascript 實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)
- 可自定義速度的js圖片無(wú)縫滾動(dòng)示例分享
- JS圖片無(wú)縫滾動(dòng)(簡(jiǎn)單利于使用)
- jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
- JS實(shí)現(xiàn)單張或多張圖片持續(xù)無(wú)縫滾動(dòng)的示例代碼
相關(guān)文章
Bootstarp 基礎(chǔ)教程之表單部分實(shí)例代碼
這篇文章主要介紹了Bootstarp 基礎(chǔ)教程之表單部分實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-02微信小程序按鈕點(diǎn)擊跳轉(zhuǎn)頁(yè)面詳解
這篇文章主要介紹了微信小程序按鈕點(diǎn)擊跳轉(zhuǎn)頁(yè)面,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JavaScript中boolean類型之三種情景實(shí)例代碼
下面小編就為大家?guī)?lái)一篇JavaScript中boolean類型之三種情景實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11HTML5開(kāi)發(fā)Kinect體感游戲的實(shí)例應(yīng)用
這篇文章主要介紹了HTML5開(kāi)發(fā)Kinect體感游戲的實(shí)例應(yīng)用的相關(guān)資料,希望通過(guò)本文能夠幫助到大家,需要的朋友可以參考下2017-09-09uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果
這篇文章主要介紹了uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12Bootstrap編寫一個(gè)在當(dāng)前網(wǎng)頁(yè)彈出可關(guān)閉的對(duì)話框 非彈窗
這篇文章主要介紹了Bootstrap編寫一個(gè)在當(dāng)前網(wǎng)頁(yè)彈出可關(guān)閉的對(duì)話框,不用跳轉(zhuǎn),非彈窗,感興趣的小伙伴們可以參考一下2016-06-06js對(duì)象屬性名駝峰式轉(zhuǎn)下劃線的實(shí)例代碼
這篇文章主要介紹了js對(duì)象屬性名駝峰式轉(zhuǎn)下劃線的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09