jquery焦點圖自動滾動文字和圖片動畫焦點圖展示



119 472 158



特效描述:jquery 焦點圖 自動滾動 動畫焦點圖,jquery焦點圖切換效果文字和圖片動畫效果來焦點圖展示,支持滑動焦點圖、淡出淡現焦點圖等。

代碼結構

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/MogFocus.js"></script>

3. HTML代碼

<h1 class="logo"><a href="#" id="btn">查看參數說明</a>MogFocus V1.1<span>作者:蘑菇<a href="http://www.jq-school.com">http://www.jq-school.com</a></h1></span>
<h2>默認為左右滑動</h2>
<div id="warpper">
    <div id="focus">
        <div class="focusWarp">
            <ul class="imgList">
                <li><a href="http://www.17sucai.com"><img src="images/one.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/two.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/thr.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/four.jpg" width="800" height="320" /></a></li>
            </ul>
            <ul class="imgList_two">
                <li><img src="images/one_size.png" width="375" height="150" /></li>
                <li><img src="images/two_size.png" width="367" height="105" /></li>
                <li><img src="images/thr_size.png" width="412" height="94" /></li>
                <li><img src="images/four_size.png" width="372" height="96" /></li>
            </ul>
        </div>
    </div>
</div>
<div class="code">
	<h3>代碼</h3>
    <p class="notextIn">$(function(){</p>
    <p class="textIn">$("#focus").mogFocus()</p>
    <p class="notextIn">})</p>
</div>
<h2>設置上下滑動</h2>
<div id="warpper2">
    <div id="focus2">
        <div class="focusWarp">
            <ul class="imgList">
                <li><a href="http://www.17sucai.com"><img src="images/one.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/two.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/thr.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/four.jpg" width="800" height="320" /></a></li>
            </ul>
            <ul class="imgList_two">
                <li><img src="images/one_size.png" width="375" height="150" /></li>
                <li><img src="images/two_size.png" width="367" height="105" /></li>
                <li><img src="images/thr_size.png" width="412" height="94" /></li>
                <li><img src="images/four_size.png" width="372" height="96" /></li>
            </ul>
        </div>
    </div>
</div>
<div class="code">
	<h3>代碼</h3>
    <p class="notextIn">$(function(){</p>
    <p class="textIn">$("#focus2").mogFocus({</p>
    <p>loadAnimation : false,</p>
    <p>time : 4000,</p>
    <p>animationWay : 'tbSliding',</p>
    <p>prevNextToggle : 'toggle',</p>
    <p>focusTime : {duration: 1300, easing: "easeOutBounce"},</p>
    <p>focusTwoTime : {duration: 1300, easing: "easeOutBounce"}</p>
    <p class="notextIn">})</p>
</div>
<h2>設置淡入淡出</h2>
<div id="warpper3">
    <div id="focus3">
        <div class="focusWarp">
            <ul class="imgList">
                <li><a href="http://www.17sucai.com"><img src="images/one.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/two.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/thr.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/four.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/one.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/two.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/thr.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/four.jpg" width="800" height="320" /></a></li>
            </ul>
            <ul class="imgList_two">
                <li><img src="images/one_size.png" width="375" height="150" /></li>
                <li><img src="images/two_size.png" width="367" height="105" /></li>
                <li><img src="images/thr_size.png" width="412" height="94" /></li>
                <li><img src="images/four_size.png" width="372" height="96" /></li>
                <li><img src="images/one_size.png" width="375" height="150" /></li>
                <li><img src="images/two_size.png" width="367" height="105" /></li>
                <li><img src="images/thr_size.png" width="412" height="94" /></li>
                <li><img src="images/four_size.png" width="372" height="96" /></li>
            </ul>
        </div>
    </div>
</div>
<div class="code">
	<h3>代碼</h3>
    <p class="notextIn">$(function(){</p>
    <p class="textIn">$("#focus2").mogFocus({</p>
    <p>loadAnimation : false,</p>
    <p>time : 2500,</p>
    <p>animationWay : 'fade',</p>
    <p>prevNextToggle : 'hide',</p>
    <p>thumlen : 4	</p>
    <p class="notextIn">})</p>
</div>
<h2>設置隨機滑出圖片</h2>
<div id="warpper4">
    <div id="focus4">
        <div class="focusWarp">
            <ul class="imgList">
                <li><a href="http://www.17sucai.com"><img src="images/one.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/two.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/thr.jpg" width="800" height="320" /></a></li>
                <li><a href="http://www.17sucai.com"><img src="images/four.jpg" width="800" height="320" /></a></li>
            </ul>
            <ul class="imgList_two">
                 <li><img src="images/one_size.png" width="375" height="150" /></li>
                <li><img src="images/two_size.png" width="367" height="105" /></li>
                <li><img src="images/thr_size.png" width="412" height="94" /></li>
                <li><img src="images/four_size.png" width="372" height="96" /></li>
            </ul>
        </div>
    </div>
</div>
<div class="code">
	<h3>代碼</h3>
    <p class="notextIn">$(function(){</p>
    <p class="textIn">$("#focus2").mogFocus({</p>
    <p>loadAnimation : false,</p>
    <p>time : 3000,</p>
    <p>scrollWidth : 1000,</p>
    <p>animationWay : 'randomImg',</p>
    <p>btnStyle : 'hidden',</p>
    <p>randeasing : 'easeOutQuad'</p>
    <p class="notextIn">})</p>
</div>
<blockquote id="parameters">
<h2>參數說明文檔</h2>
<p class="notextIn">$(function(){</p>
<p class="textIn">$("#focus").mogFocus({</p>
<p>loadAnimation : true,  <span>//效果初次加載是否有動畫效果</span></p>
<p>loadswitch : false,<span>//是否開啟loading</span></p>		
<p>loading : "images/loading.gif",<span>//loading圖片路徑</span></p>		
<p>time : 4000,<span>//間隔時間</span></p>		
<p>scrollWidth : "100%",<span>//焦點圖寬度,任意數值,設置為100%或者auto時,占滿全屏</span></p>		
<p>autoScroll : true,<span>//是否自動滾動</span></p>		
<p>conversionImg : true,<span>//此參數是用來兼容第二層滑動層IE的PNG圖片,開啟為true,反之為false</span></p>		
<p>animationWay: 'tbSliding',<span>//此參數提供fade(淡入淡出),lrSliding(左右滑動),tbSliding(上下滑動),隨機展示(randomImg)</span></p>		
<p>prevNextPos : 70,<span>//上一頁下一頁初始位置調整</span></p>		
<p>prevNextAnima : {duration: 600, easing: "easeInOutBack"},<span>//按鈕滑動出來的方式,支持緩動公式,如果直接設置數值,那么就沒有緩動效果</span></p>				
<p>prevNextToggle : "show",<span>//設置為toggle時鼠標放到滑動圖上顯示,離開影藏。設置show時一直顯示,設置hide時影藏</span></p>				
<p>btnStyle : "thumbnail",<span>//參數有四個分別是number(數字),noNumber(非數字,任意圖形),thumbnail(縮略圖),hidden(影藏)</span></p>				
<p>thumWidth : 90,<span>//縮略圖寬度</span></p>				
<p>thumHeight : 36,<span>//縮略圖高度</span></p>				
<p>thumlen : 5,<span>//縮略圖顯示個數</span></p>				
<p>thumCSS : {"right":"50%","margin-right":-390},<span>//提供當全屏滑動時縮略圖位置</span></p>				
<p>thumSubsty : {"border":"1px solid #ccc","padding":1,"background":"#fff"},<span>//縮略圖樣式</span></p>				
<p>thumSelected : {"border":"1px solid #6d6d6d","background":"#fff"},<span>//縮略圖選中樣式</span></p>				
<p>single: true,<span>//設置true則顯示第二層,false則第二層影藏</span></p>				
<p>focusDelay: 0,<span>//焦點圖延遲時間</span></p>				
<p>focusDelayTwo : 300,<span>//第二層焦點圖延遲時間</span></p>				
<p>focusTime : {duration: 1000, easing: "easeOutBounce"},<span>//左右焦點圖時間,支持緩動公式,如果直接設置數值,那么就沒有緩動效果</span></p>				
<p>focusTwoTime : {duration: 1300, easing: "easeOutBounce"} ,<span>//左右第二層焦點圖時間,支持緩動公式,如果直接設置數值,那么就沒有緩動效果</span></p>				
<p>fadeTime : 400,<span>//該參數使用淡入淡出動畫生效,控制淡入速度</span></p>				
<p>fadeTwoTime : 600,<span>//該參數使用淡入淡出動畫生效  控制第二層淡入速度</span></p>				
<p>randomsImgTime : 600,<span>//該參數在使用隨機動畫生效,控制滑動速度</span></p>					
<p>randeasing : 'easeInOutBack'<span>//該參數在使用隨機動畫生效,控制easing滑動樣式</span></p>	
<p class="textIn">});</p>	
<p class="notextIn">});</p>
</blockquote>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 加載動畫 滑動選項卡 滑動切換 滾動切換 滾動條切換 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 焦點圖 幻燈片 輪播圖 bar焦點圖 h5按鈕動畫 html5按鈕動畫 滾動切換 滾動條切換 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子