热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jQuery轮播图版本四:(jquery.SuperSlide.2.1.1.js)做轮播图,多张图向左翻页

效果如下  1.HTML部分

效果如下

 

 1.HTML部分

<div class="four_box">
<div class="cont1200">
<div class="picScroll-left">
<div class="hd">
<a class="next"><img src="__IMG__/index/white_right.png" alt="">a>
<a class="prev"><img src="__IMG__/index/white_left.png" alt="">a>
div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img4.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img5.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img6.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img4.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img5.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img6.png" />a>div>
li>
ul>
div>
div>
div>
div>

2.CSS部分

.four_box{
background
:url(../../images/index/bg_3.png) no-repeat;
background-size
: 100% auto;
}
.four_box .cont1200
{
padding
: 150px 0 10px;
height
: 400px;
}
.picScroll-left
{ width:100%;margin:0 auto;position:relative; }
.picScroll-left .hd .prev
{position: absolute;top:35%;left: -56px;
cursor
:pointer;}
.picScroll-left .hd .next
{position: absolute;top:35%;right: -52px;}
.picScroll-left .hd .prevStop
{ background-position:-60px 0; }
.picScroll-left .hd .nextStop
{ background-position:-60px -50px; }
.picScroll-left .hd ul
{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
.picScroll-left .hd ul li
{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; }
.picScroll-left .hd ul li.on
{ background-position:0 0; }
.picScroll-left .bd ul
{ overflow:hidden; zoom:1;height: 360px; }
.picScroll-left .bd ul li
{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.picScroll-left .bd ul li .pic
{ text-align:center; }
.picScroll-left .bd ul li .pic img
{ display:block; width: 282px; height: 360px;}
.picScroll-left .bd ul li .title
{ line-height:24px; }

3.JS部分


 



推荐阅读
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • Java源代码安全审计(二):使用Fortify-sca工具进行maven项目安全审计
    本文介绍了使用Fortify-sca工具对maven项目进行安全审计的过程。作者通过对Fortify的研究和实践,记录了解决问题的学习过程。文章详细介绍了maven项目的处理流程,包括clean、build、Analyze和Report。在安装mvn后,作者遇到了一些错误,并通过Google和Stack Overflow等资源找到了解决方法。作者分享了将一段代码添加到pom.xml中的经验,并成功进行了mvn install。 ... [详细]
  • 本文介绍了CSS样式属性text-overflow、overflow、white-space、width的使用方法和效果。通过设置这些属性,可以实现文本溢出省略号、隐藏溢出内容、禁止换行以及限制元素宽度等效果。详细讲解了每个属性的作用和用法,以及常见的应用场景和注意事项。对于前端开发者来说,掌握这些CSS样式属性的使用方法,能够更好地实现页面布局和文本显示效果。 ... [详细]
author-avatar
什锦平
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有