jQuery+css3動畫屬性制作獵豹瀏覽器寬屏banner焦點圖

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

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

jQuery結(jié)合css3動畫屬性制作獵豹瀏覽器寬屏banner焦點圖切換支持手機觸屏滑動焦點圖切換代碼

<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>

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

您可能感興趣的文章:

相關(guān)文章

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