博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第145天:jQuery.touchSlider触屏满屏左右滚动幻灯片
阅读量:6241 次
发布时间:2019-06-22

本文共 2899 字,大约阅读时间需要 9 分钟。

1、HTML

1  2  3  4 
5 jQuery.touchSlider触屏满屏左右滚动幻灯片 6
7 8 9 10 52 53 54
55
56
57
158
259
360
461
562
63
64
65
    66
  • 67
  • 68
  • 69
  • 70
  • 71
72
73
74
75
76 77

2、CSS

1  2 @charset "utf-8"; 3 *{
margin:0;padding:0;list-style:none;border:0;} 4 img{
border:none;} 5 6 .main_image { 7 width:100%; 8 height:422px; 9 border-top:1px solid #d7d7d7;10 overflow:hidden;11 margin:0 auto;12 position:relative13 }14 .main_image ul {15 width:9999px;16 height:422px;17 overflow:hidden;18 position:absolute;19 top:0;20 left:021 }22 .main_image li {23 float:left;24 width:100%;25 height:422px;26 }27 .main_image li span {28 display:block;29 width:100%;30 height:422px31 }32 .main_image li a {33 display:block;34 width:100%;35 height:422px36 }37 .main_image li .img_1 {38 background: url('../images/img_main_1.jpg') center top no-repeat39 }40 .main_image li .img_2 {41 background: url('../images/img_main_2.jpg') center top no-repeat42 }43 .main_image li .img_3 {44 background: url('../images/img_main_3.jpg') center top no-repeat45 }46 .main_image li .img_4 {47 background: url('../images/img_main_4.jpg') center top no-repeat48 }49 .main_image li .img_5 {50 background: url('../images/img_main_5.jpg') center top no-repeat51 }52 div.flicking_con {53 width:990px;54 margin:0 auto;55 position:relative56 }57 div.flicking_con .flicking_inner {58 position:absolute;59 top:360px;60 left:90px;61 z-index:999;62 width:300px;63 height:21px64 } /* 121126 */65 div.flicking_con a {66 float:left;67 width:21px;68 height:21px;69 margin:0;70 padding:0;71 background:url('../images/btn_main_img.png') 0 0 no-repeat;72 display:block;73 text-indent:-1000px74 }75 div.flicking_con a.on {76 background-position:0 -21px77 }78 #btn_prev, #btn_next {79 z-index:11111;80 position:absolute;81 display:block;82 width:73px!important;83 height:74px!important;84 top:50%;85 margin-top:-37px;86 display:none;87 }88 #btn_prev {89 background:url(../images/hover_left.png) no-repeat left top;90 left:100px;91 }92 #btn_next {93 background:url(../images/hover_right.png) no-repeat right top;94 right:100px;95 }

3、js插件下载引入:

 运行结果:

 

 

转载地址:http://yrpia.baihongyu.com/

你可能感兴趣的文章
《Android游戏开发详解》——第3章,第3.5节继承
查看>>
《Docker生产环境实践指南》——2.6 编排
查看>>
Docker学习(一)
查看>>
云端架美购,精品零距离
查看>>
Java设计模式--享元模式
查看>>
码栈开发手册(五)---可视化方式开发(模块详解--浏览图)
查看>>
每天一个设计模式之装饰者模式
查看>>
基于自定义日志打印的UDAF调试
查看>>
JVM源码分析之Metaspace解密
查看>>
CSS 各种定位(position)方式的区别
查看>>
每周聚划算 超值软件汇总:云市场迎新年大礼包 专场五折封顶劲省2100元
查看>>
【区块链之技术进阶】扒一扒某乎上面对于区块链的理解(二)
查看>>
如何从PostgreSQL源码分析哪些操作需要超级用户权限 - 阿里云rds superuser提供了哪些权限...
查看>>
用java进行面向对象编程,面向对象是什么意思
查看>>
博拉科技浅谈中国企业的智能制造之路
查看>>
[LeetCode]--29. Divide Two Integers
查看>>
php如何获取原生请求体
查看>>
java web开发 高并发处理
查看>>
PHP 高级编程之多线程(二)
查看>>
ART世界探险(12) - OAT文件分析(2) - ELF文件头分析(中)
查看>>