jquery插件jCarouselLite实现图片无缝滚动-天翼云

jquery插件jCarouselLite实现图片无缝滚动

2024-08-06 09:36:58 阅读次数：23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
<html xmlns>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>关于jquery插件jCarouselLite的问题</title>
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="jcarousellite_1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function(){
    $(".carousel").jCarouselLite({
        auto:800,
        speed:1000
    });  
   });
   
</script>
<style type="text/css">
body {
    color:#000000;
    font-family:verdana,sans-serif;
    font-size:80%;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    letter-spacing:1px;
    line-height:160%;
}
ul{
    margin:0;
    padding:0;
    list-style-type:none;
}
 
.clear{
    clear:both;
}
.carousel{
    margin:0pt 0pt 20px 40px;
    padding:10px 0pt 0pt;
    position:relative;
}
.jCarouselLite{
    background-color:#DFDFDF;
    border:1px solid black;
    float:left;
    /* 官方有这段不知道有何用处,如果放进去就会显示不了图片了,js动态产生的值为何没有替换掉 */
/*  left:-5000px;
    position:relative;
    visibility:hidden;*/
}
.jCarouselLite li img{
    background-color: #fff;
    width: 150px;
    height: 118px;
    margin: 10px;
}
/* jCarouselLite 动态计算产生的css如下(用firebug查看的值) start */
/*.jCarouselLite{
    overflow: hidden; visibility: visible; position: relative; z-index: 2; left: 0px; width: 510px;
}
.jCarouselLite ul{
    margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 2890px; left: -510px;
}
.jCarouselLite li{
    overflow: hidden; float: left; width: 170px; height: 144px;
}
.jCarouselLite li img{
    overflow:hidden;
}
*//* end */
 
/* 最终想要的结果是是左边按钮-中间图片-右边按钮,如果把插件的js去掉,把上面注释掉的css应用上去就是想要的结果 */
</style>
</head>
<body>
<div class="carousel">
    
    <div class="jCarouselLite">
        <ul>
            <li><img src="image/1.jpg" alt="" width="150" height="118" /></li>
            <li><img src="image/2.jpg" alt="" width="150" height="118" /></li>
            <li><img src="image/3.jpg" alt="" width="150" height="118" /></li>
            <li><img src="image/4.jpg" alt="" width="150" height="118" /></li>
            <li><img src="image/5.jpg" alt="" width="150" height="118" /></li>
            <li><img src="image/6.jpg" alt="" width="150" height="118" /></li>
        </ul>
    </div>
   
    <div class="clear"></div>   
</div>
</body>
</html>
 

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

jquery插件jCarouselLite实现图片无缝滚动

jquery插件jCarouselLite实现图片无缝滚动

相关文章

【知识科普】作为一个开发不认识Jeninks怎么行

jquery实现checkbox全选和反选

【知识科普】设计模式之-责任链模式

【知识科普】今天聊聊前端打包工具webpack

【第一章：初识Python】1.6 常用的第三方开发工具

在Eclipse里配置Maven插件

【Kubernets】容器网络基础二：通讲CNI（Container Network Interface）容器网络接口实现方案

【Mybatis相关】mybatis框架基础以及自定义插件开发

logstash之multiline插件，匹配多行日志

jquery的介绍及使用

作者介绍

最新文章

jquery实现checkbox全选和反选

【知识科普】设计模式之-责任链模式

Logstash input插件

Dom对象与Jquery对象

jquery.validate.js 验证例子

jquery制作一个简单的loading

热门文章

pfSense常用插件简介

jQuery Pagination分页插件的使用

jquery获取easyui-filebox的值

jquery-全选按钮

cookie(读取、写入、删除)基于jquery.cookie.js

jquery全选按钮下-30

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

jquery-王者荣耀手风琴效果

jquery ajax 使用layer的超时提示

mvc 中使用jquery ajax与action传值

jquery-幻灯片的移动分析

jquery如何书写一个根据下拉选择列表的选择值 控制其他标签时候显示的功能

jquery和dom对象转换-7

jquery如何书写一个根据下拉选择列表的选择值控制其他标签时候显示的功能