点击轮播图片左右按钮,实现轮播效果

点击左右按钮,实现图片轮播效果,js代码如下:

$(function () {
    var index = 1;
    var pPage = 1;
    var $v_citemss = $(".citemss");
    var $v_show = $v_citemss.find("ul");
    v_width = $v_citemss.width();     //图片展示区外围div的大小

    //注:若为整数,前边不能再加var,否则会被提示underfine
    p_count = $v_citemss.find("li").length;   //获取此处li的个数
    $(".slideprev1").click(function () {
        if (!$v_show.is(":animated")) {
            if (pPage == index) {
                $v_show.animate({ right: '0px' }, "3000");
                pPage = 4;
            } else {
                $v_show.animate({ right: '-=' + v_width }, "3000");
                pPage--;
            }
        }
    });

    $(".slidenext").click(function () {
        if (!$v_show.is(":animated")) {
            if (pPage == p_count) {
                $v_show.animate({ left: '0px' }, "3000");
                pPage = 1;
            } else {
                $v_show.animate({ left: '-=' + v_width }, "3000");
                pPage++;
            }
        }
    });

});

对于鼠标悬浮上去,下方出现横条描述、左右出现按钮等效果,完全可以用css实现,不需要使用js来实现了。

具体操作:css中绝对或相对定位,left,right或bottom为负数,鼠标悬浮上去后,分别正确显示,再设置一下transition,作为动画的缓冲即可。

时间: 2024-10-06 19:40:32

点击轮播图片左右按钮,实现轮播效果的相关文章

淘宝店如何加入全屏轮播图片

淘宝店如何加入全屏轮播图片? | 浏览:5779 | 更新:2014-06-11 11:31 | 标签: 淘宝 1 2 3 4 5 分步阅读 百度经验:jingyan.baidu.com 开淘宝店的朋友,看到很多店铺有各式各样的轮播大图,很高端大气,您是否也想拥有一款属于自己的轮播图呢?今天我就交给大家如何制作全屏轮播图. 百度经验:jingyan.baidu.com 工具/原料 电脑/网络 百度经验:jingyan.baidu.com 方法/步骤 1 登录淘宝店. 登录到您的淘宝店,点击“卖家

原生DOM方法实现,多个图片的横向左右轮播

轮播页面的构成: 页面中间有多个同样大小的图片,在图片群的左右两侧有左右方向播动的可点击钮,图片群就会往左侧翻转,并且在最后一张图片的时候,第一张图片就会继续出现在最后一张图片,属于无裂痕翻转. 右侧按钮也是同样. 实现逻辑: 左侧按钮,通过获取图片所在上一级(父级)目录,对出现在最左侧的第一个child用removeChild()方法删除第一个,然后将删除的该子元素添加到父级元素的最后,每次点击事件就会重复前面操作. 实现效果: (初始化图): (点击左侧按钮): 为了使一个界面只出现所需要的

SuperSlidev2.1 轮播图片和无缝滚动

SuperSlidev2.1 轮播图片和无缝滚动 使用方法点击链接:http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class="bd"><ul><li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a hr

一个html+css+js的轮播图片 -- 仅供参考

好久没打网页程序了,标签和css 之类都忘的跟空白一样,花几天时间把丢掉的东西给捡起来. 附上 html+css+js 代码 html: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3

JQuery和html+css实现带小圆点和左右按钮的轮播图

是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ overflow: hidden; width:100%; height:420px; border:1px solid; position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none;

轮播图片 高效图片轮播,两个imageView实现

该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 性能好,占用内存少,轮播流畅 实际使用 我们先看demo,代码如下 运行效果 轮播实现步骤 接下来,笔者将从各方面逐一分析. 层级结构 最底层是一个UIView,上面有一个UIScrollView以及UIPageControl,scrollView上有两个UIImageView,imageView

分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容. 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下面去了,没有给浏览者一种平滑的感觉.所以自己就计划着能不能做一种类似的比较平滑的效果呢? 当然是可以的.这篇博客中的特效要用到如下的函数和属性,大家没见过或者见过用过已经忘了的,可以到w3cshool上恶补下: eq(index):相当于数组吧,可以根据index索引到具体的对象 scrollTo(

JQuery轮播图片效果

[目标] 制作一个有5张图片的轮播图 [分析] 想要制作轮播图,需要如下3个步骤: 1.页面打开之后,第一个图片显示,其余的图片,隐藏 2.图片间隔5秒轮播一次 3.传到第5个图后回到第1张 [制作] 1.页面打开之后,第一个图片显示,其余的图片,隐藏: $(“.bg”).not(“:eq(0)”).hide(); 2.间隔5秒轮播: Var i=0; $(function(){ $(“.bg”).not(“:eq(0)”).hide();   //不是第一张图片的其余图片都隐藏 setInte