jcarousel 图片滚动css

 jcarousel  jcarousel-skin-ie7

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #F0F6F9;
    /*border: 1px solid #346F97;*/
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    /*border: 1px solid blue;*/
    width: 461px;/*ul外部宽度*/
    +width: 531px;/*ul外部宽度 IE7、IE8*/
    padding: 10px 38px;/*外部与内部的填充*/
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    /*border: 1px solid #346F97;*/
    width:  459px;/*ul内部宽度*/
    height: 207px;/*ul内部高度*/
}

.jcarousel-skin-tango .jcarousel-item {
    /*border: 1px solid red;*/
    width: 149px;/*li宽度*/
    height: 205px;/*li高度*/
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 4px;/*li之间的间隔*/
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 90px;/*下一页按钮图标上边距*/
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 90px;/*上一页按钮图标上边距*/
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

兼容性问题:http://hotstrong.iteye.com/blog/1009212

jcarousel 图片滚动css

时间: 2024-10-13 16:29:12

jcarousel 图片滚动css的相关文章

JS+CSS打造的仿惠惠网带缓冲效果的图片滚动

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS打造的仿惠惠网带缓冲效果的图片滚动丨上谷战国红|亿诚</title> <style>* {margin:0;paddin

随机图片滚动(随机数+变化函数),可运行

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机图片滚动</title> <!--可成功执行,布局有点混乱...懒得改了.需要一个js文件,在上一文章中有--> <style type="text/css"> *{ padding:0; margin: 0;

wap图片滚动特效_无css3 元素js脚本编写

手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

图片切换特效(2):JS图片滚动代码(无缝、平滑)

转自:http://www.codefans.net/jscss/code/255.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

10款很好用的 jQuery 图片滚动插件

jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好用的 jQuery 图片滚动插件分享给大家. 1.Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次! 在线演示 源码下载 2.Slides Slides 是一款精巧的

JavaScript实现简单图片滚动 --9张图告诉你,C罗欲哭无泪

源码下载:http://download.csdn.net/detail/u011043843/7510425 昨晚德国和葡萄牙的焦点之战你看了吗?北京时间凌晨的比赛中,C罗领衔的葡萄牙0-4德国被完灭--他是金球奖得主.欧洲金靴.欧冠冠军核心,在葡萄牙队--9张图 C罗告诉你什么叫欲哭无泪 <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

图片滚动 初学JQuery

图片滑动效果一般用于首页的展示,这个按照别人的思路,自己扩充修改了下,纯属自己笔记. JS代码 1 <script src="jquery/jquery-2.1.1.js"></script> 2 <script> 3 var imgTotal = 8; //总的图片数量 4 var imgi = 1; //默认第一张图片 5 var autoRun; //自动滚动 6 function run(imgI) { //传递图片编号 7 imgi = i

JS图片滚动代码(无缝、平滑)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

【原生javascript】margin-top实现淘宝首页图片滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h