基于jquery的适合电子商务网站首页的图片滑块

今天给大家分享一款基于Sequence.js 的图片滑动效果,特别适合电子商务网站或者企业产品展示功能。带有图片缩率图,能够呈现全屏图片浏览效果。结合 CSS3 Transition 实现响应式的滑块效果。

在线预览   源码下载

实现的代码。

html代码:

 <div class="sequence-theme">
        <div id="sequence">
            <img class="sequence-prev" src="images/bt-prev.png" alt="Previous Frame" />
            <img class="sequence-next" src="images/bt-next.png" alt="Next Frame" />
            <ul class="sequence-canvas">
                <li class="animate-in">
                    <h2 class="title">
                        Built using Sequence.js</h2>
                    <h3 class="subtitle">
                        The Responsive Slider with Advanced CSS3 Transitions</h3>
                    <img class="model" src="images/model1.png" alt="Model 1" />
                </li>
                <li>
                    <h2 class="title">
                        Creative Control</h2>
                    <h3 class="subtitle">
                        Create unique sliders using CSS3 transitions</h3>
                    <img class="model" src="images/model2.png" alt="Model 2" />
                </li>
                <li>
                    <h2 class="title">
                        Cutting Edge</h2>
                    <h3 class="subtitle">
                        Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</h3>
                    <img class="model" src="images/model3.png" alt="Model 3" />
                </li>
            </ul>
            <ul class="sequence-pagination">
                <li>
                    <img src="images/tn-model1.png" alt="Model 1" /></li>
                <li>
                    <img src="images/tn-model2.png" alt="Model 2" /></li>
                <li>
                    <img src="images/tn-model3.png" alt="Model 3" /></li>
            </ul>
        </div>
    </div>

via:http://www.w2bc.com/Article/23396

时间: 2024-11-07 20:16:40

基于jquery的适合电子商务网站首页的图片滑块的相关文章

jWriter一个基于jQuery的阅读写作网站的效果库

看了一下据上次更新已经四个月了,时间过的好快.自从上次面试前端岗时js的能力遭到深深的鄙视后,就在补js的坑了.先是各种看书,接着是期末考试,然后家里有事又耽搁了.在此期间想把用来练手的网站的前端部分重构一下,于是手写了一些jQuery的效果,也就是jWriter了.话说扔了几个月又捡起来的结果就是,看书时都感觉清楚无比的方法什么的全部都忘了,三天不练手生,真理啊. jWriter,一个基于jQuery的阅读写作网站的效果库,用到了部分js原生代码不过都有注释.全部代码都没进行封装过,看起来可能

基于jQuery的新浪游戏首页幻灯片

分享一款基于jQuery的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: Html代码   <br><center> <div class='Homeslide'> <div class='Homeslide_bigwrap'> <div class='Homeslide_hand0'></div> <div class='H

实现基于LNMP的小米电子商务网站平台

1.环境准备:(安装后最好检查一遍是否全部安装成功) yum install nginx php php-mysql php-fpm mariadb mariadb-server 2.路径创建:mkdir -p /data/web 3.进入/data/web目录:cd /data/web 4.上传模板包:rz xiaomi.zip 5.解压模板包:unzip -d . xiaomi.zip (unzip -d /data/web xiaomi.zip  -d指定解压到哪个目录 "."表

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><

基于jQuery图文排版图片预览特效

基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 在线预览   源码下载 实现的代码. html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscreen-inner-button">&

基于jQuery遮罩图片hover翻转效果

基于jQuery遮罩图片hover翻转效果.这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="index_hd"> <div class="fr hd_r major-list-outer"> <ul class="major-list"> <li class="major-item&qu

分享22款响应式的 jQuery 图片滑块插件

响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助你在 Web 项目中实现有吸引力的图片滑块效果. 1. Slides.js SlidesJS 是一款响应式的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作出优雅的幻灯片效果.

基于jQuery适合做图片类网站的特效

分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="common"> <ul> <li class="listbox mr20"> <div class="listimg"> <a href="/"><img src="im

基于jQuery的网站首页宽屏焦点图幻灯片

今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <!-- index-focus begin --> <div class="sliderWrap"> <section class="banner-TAL"> <div class