jquery焦点图自动滚动文字和图片动画焦点图展示



159 633 212



特效描述: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焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 html5弹窗动画 html5动画h5动画 焦点图幻灯片 html5按钮动画 滚动切换 html5图片动画 图片滚动 图片滑动 图片切换 图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到