分別用css3、JS實現圖片簡單的無縫輪播功效
本文主要介紹分別使用CSS3、JS實現圖片簡單無縫輪播功效;
一、使用CSS3實現:利用animation屬性
(實現一張一張的輪播,肉眼只看見一張圖片)
HTML部分比較簡單,兩個div下包著幾個img標籤;為了實現無縫輪播,注意第一張圖片要與最後一張圖片相同;
<div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img src="img/child.jpg"/> <img src="img/girl.jpg"/> <img src="img/milk.jpg"/> <img src="img/cup.jpg"/> <img src="img/dog.jpg"/> <img src="img/beatuy.jpg"/> </div> </div>
最外層div設定ovflow:hidden;position: relative;既然最外層div設定了position: relative;所以內層div需要設定position: absolute;使得其運動相對父元素而言;
CSS程式碼如下:
1 .out{ 2 width: 200px; 3 height: 100px; 4 overflow: hidden; 5 position: relative; 6 } 7 .imgs{ 8 width: 1400px; 9 height: 100px; 10 position: absolute; 11 animation: ppt 10s linear infinite; 12} 13 14 img{ 15 float: left; 16 width: 200px; 17 height: 100px; 18 } 19 @keyframes ppt{ 20 0%{left:0px} 21 20%{left:-250px} 22 40%{left:-500px} 23 60%{left:-750px} 24 80%{left:-1000px} 25 100%{left:-1200px} 26 }
這樣圖片就可以輪播了,但是滑鼠放上去的時候圖片還是一直在輪播的,如果我們想讓滑鼠放在圖片上時,輪播停止,或者出現一些資訊,我們需要加上:hover;設定動畫的狀態,程式碼很簡潔:如下
1 .out:hover .imgs{ 2 animation-play-state:paused 3 }
這樣我們的輪播效果就出來啦;
效果圖什麼的也懶得貼了;
二、使用JS實現:利用定時器setInterval
(多張圖片輪播,肉眼可以看到多張圖片)
同樣HTML部分比較簡單,需要設定外層DIV ovflow:hidden;之所以每個div既有class,也有id,是因為樣式我是通過class控制的,DOM是通過ID獲取的
1 <div class="out" id="out"> 2 <div class="main" id='main'> 3 <div class="pic" id="pic"> 4 <img src="img/0.jpg"/> 5 <img src="img/6.jpg"/> 6 <img src="img/hehua2.2.png"/> 7 <img src="img/tupian1.png"/> 8 </div> 9 <div class="copyPic" id="copyPic"> 10 11 </div> 12 </div>
可以看到class="copyPic" 的DIV為空的,沒有內容,不急,在JS部分會為他賦上內容,其內容與class="pic"的一樣;當然我們也可以直接在HTML中為其新增內容;現在為其加上一點CSS樣式吧
1 .out{ 2 width: 820px; 3 overflow: hidden; 4 } 5 .main{ 6 width: 1650px; 7 height: 100px; 8 } 9 img{ 10 width: 200px; 11 height: 100px; 12 border: 0; 13 } 14 .pic,.copyPic{ 15 float: left; 16 }
這樣,我們的基本樣式就完成了,下面就開始實現輪播效果吧:
首先,為了程式碼方便,先封裝一個簡單函式
1 function $(str){ 2 return document.getElementById(str) 3 }
然後為class="copyPic" 的DIV加上內容:
1 (′copyPic′).innerHTML=(′copyPic′).innerHTML=('pic').innerHTML;
好啦,開始寫輪播函式:
1 function move(){ 2 if ($('out').scrollLeft-$('copyPic').offsetWidth>=0) { 3 $('out').scrollLeft-=$('out').offsetWidth; 4 } else{ 5 $('out').scrollLeft++; 6 } 7 } var t=setInterval(move,10);
這樣我們的圖片就可以輪播啦,同樣的如果希望滑鼠放上去後輪播停止,還需要加上幾句程式碼,使用滑鼠事件,清除定時器
1 $('out').onmousemove=function(){ 2 clearInterval(t); 3 } 4 $('out').onmouseout=function(){ 5 t=setInterval(move,10); 6 }
OK,這樣我們使用JS實現圖片輪播的效果也就完成了!
相關推薦
分別用css3、JS實現圖片簡單的無縫輪播功效
本文主要介紹分別使用CSS3、JS實現圖片簡單無縫輪播功效; 一、使用CSS3實現:利用animation屬性 (實現一張一張的輪播,肉眼只看見一張圖片) HTML部分比較簡單,兩個div下包著幾個img標籤;為了實現無縫輪播,注意第一張圖片要與最後一張圖片相同;
JS實現一個簡單的輪播圖
主要程式碼如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
原生js實現最簡單的輪播圖
程式碼部分:html:<div> <ul> <li><img src="01.jpg" width="300px"></li> <li><img src="02.jpg" width="300px"
用css、js實現字幕橫向滾動
最近,在寫電子房價牌頁面時,關於電子房價的提示,需要用到橫向滾動字幕的效果,本文用的是jquery.js的方法來實現的。在網上查閱資料的時候,發現以前會使用<marque>的html標籤來處理,但是,最新的MDN已將該標籤廢棄。一、例項相關情況介紹
用Vue實現一個簡單的輪播效果
Vue實現簡單的輪播效果,用的的一些常用系統指令: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
原生JS實現一個完整的輪播圖
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d
JS實現小圖放大輪播效果
JS實現小圖放大輪播頁面效果入下(圖片為優行商旅頁面照片): 實現效果:圖片自動輪播,滑鼠移入停止,移出繼續輪播點選下方小圖可以實現切換 步驟一:建立HTML佈局,具體如下: <body> <div id="carousel" class=
原生 js 實現移動端 Touch 輪播圖
小編推薦:Fundebug專注於JavaScript、微信小程式、微信小遊戲,Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務,眾多大佬公司都在使用。 Touch 輪播圖 touch輪播圖其實就是通過手指的滑動,來左右切換輪播圖,下面我們通過一個
Android之ViewPager實現圖片無限迴圈輪播
很久沒有寫部落格了,之前花時間寫了一個Viewpager實現的無限圖片輪播,個人感覺還是很好用的QAQ,原始碼和思路都還算清晰 實現的效果圖如下: 這裡要補充一下,在這個專案中我把圖片輪播寫進了一個Viewholder裡內嵌在了Recyclelistview裡。但本文只介
JS實現八種焦點輪播圖(下)
佈局同(上),略 5.定時上下無縫滾動 思路: 1.思路1: 將ul複製一份,但滾動一半距離重新歸位;(大型網站效能略低); 2.思路2: 通過相對定位,將第一個li移動到最後,再將ul和
js實現淡入淡出輪播圖
1.圖片淡入淡出自動輪播. 2.可以用按鈕控制輪播. 效果圖: 程式碼如下: html+scc: *{ margin: 0; padding: 0; } html,bo
vue2.0實現一個簡單的輪播圖
因為之前一直在忙公司的專案,vue這塊就生疏了不少,正好借這個小demo複習下vue的知識。 先來個效果圖: 如圖所示,實現的就是一個間隔2.5s自動向左切換下一張的輪播圖,同時滑鼠移入停止輪播,移出回覆輪播; 而下方按鈕會根據當前圖片自動變紅且可以手動控制當前圖片
JS實現八種焦點輪播圖(上)
注:基於完美運動框架move2.js而完成的八種焦點錄播圖 基本佈局: <div id="box"> <ul id="ul">
iOS:實現圖片的無限輪播---之使用第三方庫SDCycleScrollView
支援pod匯入 如果發現pod search SDCycleScrollView 搜尋出來的不是最新版本,需要在終端執行cd轉換檔案路徑命令退回到desktop,然後執行pod setup命令更
每次移一張圖片的無縫輪播圖
end 3.0 doctype () 定時 ora title order console <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
用js實現圖片(小球)在屏幕上上下左右移動
tin doctype ctx eight doc itl 左右 idt ext <html> <head> <title>Document</title> </head> <body style
用js實現一個簡單的mvvm
這裡利用的object.defineproperty() 方法; <input id='input'><p id='p'><p/>js: const data={}; const input=documen
用html、js、css實現通訊錄功能
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width
用原生JS實現 圖片輪播切換 功能
效果如圖:程式碼如下:<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title
用jquery面向物件實現的簡單的圖片輪播,還能學習一下閉包哦
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title