热门标签 | 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部分


 



推荐阅读
  • SQLite数据库CRUD操作实例分析与应用
    本文通过分析和实例演示了SQLite数据库中的CRUD(创建、读取、更新和删除)操作,详细介绍了如何在Java环境中使用Person实体类进行数据库操作。文章首先阐述了SQLite数据库的基本概念及其在移动应用开发中的重要性,然后通过具体的代码示例,逐步展示了如何实现对Person实体类的增删改查功能。此外,还讨论了常见错误及其解决方法,为开发者提供了实用的参考和指导。 ... [详细]
  • 原文网址:https:www.cnblogs.comysoceanp7476379.html目录1、AOP什么?2、需求3、解决办法1:使用静态代理4 ... [详细]
  • Spring – Bean Life Cycle
    Spring – Bean Life Cycle ... [详细]
  • IOS Run loop详解
    为什么80%的码农都做不了架构师?转自http:blog.csdn.netztp800201articledetails9240913感谢作者分享Objecti ... [详细]
  • 本文介绍了在 Java 编程中遇到的一个常见错误:对象无法转换为 long 类型,并提供了详细的解决方案。 ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
  • MySQL 5.7 学习指南:SQLyog 中的主键、列属性和数据类型
    本文介绍了 MySQL 5.7 中主键(Primary Key)和自增(Auto-Increment)的概念,以及如何在 SQLyog 中设置这些属性。同时,还探讨了数据类型的分类和选择,以及列属性的设置方法。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 装饰者模式(Decorator):一种灵活的对象结构设计模式
    装饰者模式(Decorator)是一种灵活的对象结构设计模式,旨在为单个对象动态地添加功能,而无需修改原有类的结构。通过封装对象并提供额外的行为,装饰者模式比传统的继承方式更加灵活和可扩展。例如,可以在运行时为特定对象添加边框或滚动条等特性,而不会影响其他对象。这种模式特别适用于需要在不同情况下动态组合功能的场景。 ... [详细]
  • 使用 ListView 浏览安卓系统中的回收站文件 ... [详细]
  • 深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]
  • 本文详细介绍了使用 Python 进行 MySQL 和 Redis 数据库操作的实战技巧。首先,针对 MySQL 数据库,通过 `pymysql` 模块展示了如何连接和操作数据库,包括建立连接、执行查询和更新等常见操作。接着,文章深入探讨了 Redis 的基本命令和高级功能,如键值存储、列表操作和事务处理。此外,还提供了多个实际案例,帮助读者更好地理解和应用这些技术。 ... [详细]
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社区 版权所有