快捷導(dǎo)航

jQuery+css3動(dòng)畫(huà)屬性制作獵豹瀏覽器寬屏banner焦點(diǎn)圖

更新時(shí)間：2015年03月16日 15:19:11 投稿：hebedich

本文給大家分享的是使用jQuery結(jié)合CSS3制作的仿獵豹瀏覽器寬屏banner焦點(diǎn)圖特效，代碼很簡(jiǎn)單，效果卻非常棒，而且兼容各大瀏覽器，這里推薦給大家，有需要的小伙伴參考下。

jQuery結(jié)合css3動(dòng)畫(huà)屬性制作獵豹瀏覽器寬屏banner焦點(diǎn)圖切換支持手機(jī)觸屏滑動(dòng)焦點(diǎn)圖切換代碼

<div class="slide-main" id="touchMain">

    <a class="prev" href="javascript:;" stat="prev1001"><img src="images/l-btn.png" /></a>

    <div class="slide-box" id="slideContent">

        <div class="slide" id="bgstylec">

            <a stat="sslink-3" href="" target="_blank">

                <div class="obj-e"><img src="images/baomi-t-1.png" /></div>

                <div class="obj-f"><img src="images/baomi-kl.jpg" /></div>

            </a>

        </div>

        <div class="slide" id="bgstylea">

            <a stat="sslink-1" href="" target="_blank">

                <div class="obj-a"><img src="images/bao.png" /></div>

                <div class="obj-b"><img src="images/nt-1.png" /></div>

            </a>

        </div>

        <div class="slide" id="bgstyleb">

            <a stat="sslink-2" href="" target="_blank">

                <div class="obj-c"><img src="images/bao-2.png" /></div>

                <div class="obj-d"><img src="images/st-2.png" /><p>全新chrome內(nèi)核，內(nèi)存占用最低，輕巧炫酷皮膚</p></div>

            </a>

        </div>

    </div>

    <a class="next" href="javascript:;" stat="next1002"><img src="images/r-btn.png" /></a>

    <div class="item">

        <a class="cur" stat="item1001" href="javascript:;"></a><a href="javascript:;" stat="item1002"></a><a href="javascript:;" stat="item1003"></a>

    </div>

</div>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/main.js"></script>

以上就是本文所述的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

基于jquery實(shí)現(xiàn)放大鏡效果
大家在逛淘寶的時(shí)候，把鼠標(biāo)放在寶貝上就會(huì)放大，奇怪這種效果怎么實(shí)現(xiàn)的，下面小編就給大家分享基于jquery實(shí)現(xiàn)放大鏡效果，有需要的朋友可以參考下
2015-08-08
jQuery動(dòng)畫(huà)效果相關(guān)方法實(shí)例分析
這篇文章主要介紹了jQuery動(dòng)畫(huà)效果相關(guān)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果所用到的常見(jiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2015-12-12
Javascript中的異步編程規(guī)范Promises/A詳細(xì)介紹
這篇文章主要介紹了Javascript中的異步編程規(guī)范Promises/A詳細(xì)介紹,同時(shí)介紹了jQuery 中的 Deferred 和 Promises,需要的朋友可以參考下
2014-06-06
jQuery控制DIV層實(shí)現(xiàn)由大到小，由遠(yuǎn)及近動(dòng)畫(huà)變化效果
這篇文章主要介紹了jQuery控制DIV層實(shí)現(xiàn)由大到小，由遠(yuǎn)及近動(dòng)畫(huà)變化效果,涉及jQuery基于animate方法操作頁(yè)面元素實(shí)現(xiàn)動(dòng)畫(huà)漸變效果的相關(guān)技巧,需要的朋友可以參考下
2015-10-10
JQuery Ajax跨域調(diào)用和非跨域調(diào)用問(wèn)題實(shí)例分析
這篇文章主要介紹了JQuery Ajax跨域調(diào)用和非跨域調(diào)用問(wèn)題,結(jié)合具體實(shí)例形式分析了jQuery基于ajax的非跨域請(qǐng)求及跨域請(qǐng)求相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2019-04-04
使用Javascript實(shí)現(xiàn)選擇下拉菜單互移并排序
本文給大家介紹使用js實(shí)現(xiàn)下拉菜單可選擇互相移動(dòng)并實(shí)現(xiàn)菜單排序，代碼簡(jiǎn)單易懂，具有參考價(jià)值，需要的朋友參考下吧
2016-02-02
jQuery回到頂部的代碼
在一些網(wǎng)站上，我們經(jīng)常見(jiàn)到返回頂部的效果，本文給大家介紹基于jquery如何實(shí)現(xiàn)返回頂部效果，非常不錯(cuò)，感興趣的朋友可以參考下
2016-07-07
JQuery實(shí)現(xiàn)的購(gòu)物車(chē)功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
這篇文章主要介紹了JQuery實(shí)現(xiàn)的購(gòu)物車(chē)功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格),本文的這個(gè)模擬實(shí)現(xiàn)的購(gòu)物車(chē)難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識(shí)點(diǎn),需要的朋友可以參考下
2015-01-01
jquery判斷密碼強(qiáng)度的驗(yàn)證代碼
本文主要介紹了jquery判斷密碼強(qiáng)度的驗(yàn)證代碼，這是一個(gè)非常常見(jiàn)的功能，在輸入密碼的時(shí)候提示密碼的強(qiáng)度，本文使用jQuery來(lái)實(shí)現(xiàn)，有需要的小伙伴可以參考下。
2015-11-11
jquery.post用法之type設(shè)置問(wèn)題
這篇文章主要介紹了jquery.post用法之type設(shè)置問(wèn)題,需要的朋友可以參考下
2014-02-02