基于javascript實(shí)現(xiàn)圖片切換效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)圖片切換效果,供大家參考,具體內(nèi)容如下
用js實(shí)現(xiàn)點(diǎn)擊按鈕,圖片切換的效果:
<div class="box" id="box"> <div class="img_box" id="img_box"> <img src="../raw/b1.jpg" class="image" > <img src="../raw/b2.jpg" class="image" > <img src="../raw/b3.jpg" class="image" > <img src="../raw/b4.jpg" class="image" > </div> <div id="left" class="switch"></div> <div id="right" class="switch"></div> </div>
結(jié)構(gòu):用一個(gè)固定寬高的div來(lái)做最外層的容器,設(shè)置overflow為hidden,
然后內(nèi)層img_box設(shè)置寬度為四倍box的寬度,高度相同,也就是說(shuō)img_box里面盛放四張img,但是可見(jiàn)的只有一張,下面的兩個(gè)div,left和right是充當(dāng)按鈕實(shí)現(xiàn)點(diǎn)擊切換圖片,切換圖片也就是改變img_box的left屬性,所以img_box應(yīng)該設(shè)置position為absolute,為了方便起見(jiàn),box的position設(shè)置為relation,這樣img_box就是相對(duì)box進(jìn)行定位了。四張圖片設(shè)置float為left,寬度和高度與box相同.
CSS代碼:
*{ margin: 0; padding: 0; } .box{ width: 800px; height: 400px; margin: 20px auto; position: relative; overflow: hidden; } .img_box{ height: 400px; width: 3200px; position: absolute; -moz-transition: 0.5s; -webkit-transition: 0.5s; } img{ width: 800px; height: 400px; float: left; } .switch{ width: 200px; height: 100%; position: absolute; } #left{ left: 0px; top: 0px; background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0)); background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0)); } #right{ right:0px; top: 0px; background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5)); background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5)); } #left:hover{ background: -moz-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0)); background: -webkit-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0)); } #right:hover{ background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5)); background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5)); }
left和right用到了背景顏色和透明度漸變的屬性,只添加了火狐瀏覽器和webkit瀏覽器,另外現(xiàn)在有的IE瀏覽器是IE和webkit雙內(nèi)核如360安全瀏覽器
background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
為了實(shí)現(xiàn)切換的時(shí)候平滑過(guò)渡,所以添加了transition屬性:
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
js代碼:
var box; var count=1; window.onload=function(){ box=document.getElementById("img_box"); var left=document.getElementById("left"); var right=document.getElementById("right"); left.addEventListener("click",_left); right.addEventListener("click",_right); document.body.addEventListener("mouseover",demo); } function _right(){ var dis=0; if(count<4){ dis=count*800; }else{ dis=0; count=0; } box.style.left="-"+dis+"px"; count+=1; } function _left(event){ var dis=0; if(count>1){ dis=(2-count)*800; }else{ dis=-3*800; count=5; } box.style.left=dis+"px"; count-=1; }
用全局變量count來(lái)記錄當(dāng)前顯示的第幾張圖片,當(dāng)點(diǎn)擊切換按鈕的時(shí)候根據(jù)count來(lái)計(jì)算應(yīng)該顯示第幾張照片,然后計(jì)算并設(shè)置img_box的left屬性即可。
以上就是為大家介紹的js實(shí)現(xiàn)圖片切換效果的代碼,希望能夠幫助大家實(shí)現(xiàn)圖片切換效果。
- js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)
- javascript圖片切換綜合實(shí)例(循環(huán)切換、順序切換)
- 輕松實(shí)現(xiàn)JavaScript圖片切換
- js實(shí)現(xiàn)索引圖片切換效果
- js鼠標(biāo)點(diǎn)擊圖片切換效果實(shí)現(xiàn)代碼
- js帶前后翻頁(yè)的圖片切換效果代碼分享
- js鼠標(biāo)點(diǎn)擊圖片切換效果代碼分享
- 最簡(jiǎn)單的js圖片切換效果實(shí)現(xiàn)代碼
- 用html+css+js實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的圖片切換特效
- 靈活使用數(shù)組制作圖片切換js實(shí)現(xiàn)
相關(guān)文章
微信小程序?qū)崿F(xiàn)分類(lèi)菜單激活狀態(tài)隨列表滾動(dòng)而自動(dòng)切換效果詳解
這篇文章主要介紹了微信小程序分類(lèi)菜單激活狀態(tài)跟隨列表滾動(dòng)自動(dòng)切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01JavaScript三大重點(diǎn)同步異步與作用域和閉包及原型和原型鏈詳解
這篇文章主要介紹了JavaScript同步異步與作用域和閉包及原型和原型鏈,每個(gè)對(duì)象都連接到一個(gè)原型對(duì)象,并且它可以從中繼承屬性。所有通過(guò)對(duì)象字面量創(chuàng)建的對(duì)象都連接到object.prototype,它是JavaScript中的標(biāo)配對(duì)象<BR>2022-07-07JS獲取當(dāng)前時(shí)間的年月日時(shí)分秒及時(shí)間的格式化的方法
這篇文章主要介紹了js獲取當(dāng)前時(shí)間的年月日時(shí)分秒及時(shí)間的格式化,本文通過(guò)實(shí)例代碼講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12javascript中的有名函數(shù)和無(wú)名函數(shù)
javascript中的有名函數(shù)和無(wú)名函數(shù)...2007-10-10asp.net HttpHandler實(shí)現(xiàn)圖片防盜鏈
這個(gè)例子來(lái)自于《Maximizing ASP.NET Real World, Object-Oriented Development》一書(shū), 需要的朋友可以參考下。2009-11-11JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條
對(duì)于有很多流程的東西,我們希望能夠根據(jù)不同的階段,用流程條對(duì)應(yīng)地進(jìn)行顯示,非常直觀,給用戶(hù)帶來(lái)極好的用戶(hù)體驗(yàn),下面小編給大家分享JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條功能,需要的的朋友參考下2017-03-03