js实现幻灯片效果(基于jquery插件)
更新时间：2013年11月05日 16:08:26 作者：
说起幻灯片效果，想必大家都不陌生吧，接下来为大家介绍下使用jquery插件jquery.smallslider.js实现幻灯片效果示例代码，喜欢的朋友可以学习下
使用jquery插件jquery.smallslider.js也能实现幻灯片效果。
htm代码如下：
<div id="flashbox" class="smallslider">
<ul style="position: absolute; top: 0px; width: 3225px;">
<li class="" style="float: left;"><a ><img title="" alt="400hPa" src=" /HT-400hPa-20.png" width="645"></a> </li>
<li class="" style="float: left;"><a ><img title="" alt="500hPa" src=" /HT-500hPa-20.png" width="645"></a> </li>
<li class="current-li" style="float: left;"><a ><img title="" alt="700hPa" src=" /HT-700hPa-20.png" width="645"></a> </li>
<li class="" style="float: left;"><a ><img title="" alt="850hPa" src=" /HT-850hPa-20.png" width="645"></a> </li>
<li class="" style="float: left;"><a ><img title="" alt="1000hPa" src=" /HT-1000hPa-20.png" width="645"></a>
</li></ul>
</div>
js代码：
$(document).ready(function(){
$('#flashbox').smallslider({onImageStop:true, switchEffect:'ease',switchEase: 'easeOutSine',switchPath: 'left', switchMode: 'hover', showText:true, textSwitch:2});
});
使用到的脚本，样式jquery-1.7.2.min.js，jquery.smallslider.js，smallslider.css
htm代码如下：
复制代码 代码如下:
<div id="flashbox" class="smallslider">
<ul style="position: absolute; top: 0px; width: 3225px;">
<li class="" style="float: left;"><a ><img title="" alt="400hPa" src=" /HT-400hPa-20.png" width="645"></a> </li>
<li class="" style="float: left;"><a ><img title="" alt="500hPa" src=" /HT-500hPa-20.png" width="645"></a> </li>
<li class="current-li" style="float: left;"><a ><img title="" alt="700hPa" src=" /HT-700hPa-20.png" width="645"></a> </li>
<li class="" style="float: left;"><a ><img title="" alt="850hPa" src=" /HT-850hPa-20.png" width="645"></a> </li>
<li class="" style="float: left;"><a ><img title="" alt="1000hPa" src=" /HT-1000hPa-20.png" width="645"></a>
</li></ul>
</div>
js代码：
复制代码 代码如下:
$(document).ready(function(){
$('#flashbox').smallslider({onImageStop:true, switchEffect:'ease',switchEase: 'easeOutSine',switchPath: 'left', switchMode: 'hover', showText:true, textSwitch:2});
});
使用到的脚本，样式jquery-1.7.2.min.js，jquery.smallslider.js，smallslider.css
您可能感兴趣的文章:
- 基于vue.js轮播组件vue-awesome-swiper实现轮播图
- 非常优秀的JS图片轮播插件Swiper的用法
- AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
- 基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
- Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
- 内容滑动切换效果jquery.hwSlide.js插件封装
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- jQuery插件zepto.js简单实现tab切换
- jQuery图片切换插件jquery.cycle.js使用示例
- 移动端触屏幻灯片图片切换插件idangerous swiper.js
相关文章
本文主要分享了用JavaScript实现购物车特效的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家介绍了JS组件Bootstrap按钮组与下拉按钮的相关资料，感兴趣的小伙伴们可以参考一下2016-05-05
下面小编就为大家带来一篇在html中引入外部js文件,并调用带参函数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
JSChart是一个轻量级的在线图表生成工具，本身十分小巧，简单易用，相对来讲功能也不是特别强大，但是对于一些要求不高的应用来讲已经够用了，最近两天在做一个监控系统，想到了它。2010-10-10
Bootstrap DateTime Picker日历控件简单应用
这篇文章主要介绍了Bootstrap DateTime Picker日历控件的简单应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
Webpack-cli安装成功后查看webpack -v报错案例详解
这篇文章主要介绍了Webpack-cli安装成功后查看webpack -v报错案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
本文主要介绍了js实现登录验证码的方法，代码简洁明了，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
浅析javascript异步执行函数导致的变量变化问题解决思路
下面小编就为大家带来一篇浅析javascript异步执行函数导致的变量变化问题解决思路。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
听说这是一道腾讯的面试题,可能网上已经有不少答案了,晚上没事看到这道题就自己做了下,下面这篇文章主要给大家介绍了关于如何用Js写一个简单的五子棋小游戏的相关资料,需要的朋友可以参考下2022-07-07
js+html5通过canvas指定开始和结束点绘制线条的方法
这篇文章主要介绍了js+html5通过canvas指定开始和结束点绘制线条的方法,涉及html5属性的操作技巧,需要的朋友可以参考下2015-06-06
最新评论