文档章节

手动图片轮播 留作参考

abelieve
 abelieve
发布于 2016/11/11 14:00
字数 896
阅读 2
收藏 0
<div class="main">
		<div class="list">
			<h2>卡通动漫</h2>
			<div class="light_list">
				<span class="current">1</span><span>2</span><span>3</span><span>4</span>
			</div>
			<div class="page">
				<span class="prev">上一页</span>
				<span class="next">下一页</span>
			</div>
			<em><a href="#">更多>></a></em>
		</div>
		<div class="v_content">
			<div class="v_content_list">
				<ul>
					<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
					<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
					<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
					<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
					<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
					<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
					<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
					<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
					<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
					<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
					<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
					<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
					<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
					<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
					<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
					<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				</ul>
			</div>
		</div>
	</div>
*{
	margin:0;
	padding:0;
}
ul, li { list-style:none; }
fieldset, img { border:none; }

.main{
	width:595px; 
	margin:0 auto;
}
.list{
	height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat 0 0; 
}
.list h2{
	float:left;
	width:84px; height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px;background-position:0 -100px;
}
.list .light_list{
	float:left;
	margin:14px 0 0 10px;
	display:inline;
}
.list .light_list span{
	display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; 
}
.list .light_list .current{
	background-position:0 -220px;
}
.list .page{
	float:left;
	margin:6px 0 0 5px;
}
.list .page span{
	display:inline; float:left;width:30px;height:23px; background:url(img/btn_cartoon.gif) no-repeat;cursor:pointer;text-indent:-999px;
}
.list .page .prev{
	background-position:0 -400px;
}
.list .page .next{
	background-position:-30px -400px;
}
.list em{
	width:50px;
	float:right;
	margin:6px 0 0 0;
}
.v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; }
.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }
.v_content ul {float:left;}
.v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(img/v_bg.gif) no-repeat; }
.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }
.v_content ul li img {  width:128px; height:96px; }
.v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }
.v_content ul li h4 a { display:inline !important; height:auto !important; }
.v_content ul li span { color:#666; }
.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }
$(document).ready(function(){
	var page = 1;
	var i = 4;
	var $v_list = $(".v_content_list");
	var v_width = $(".v_content").width();
	var len = $v_list.find("li").length;
	var page_count = Math.ceil(len/i);
	$(".next").click(function(){
	if( !$v_list.is(":animated") ){
		if(page == page_count){
			$v_list.animate({left:"0px"},"normal");
			page = 1;
		}else{
			$v_list.animate({left:"-="+v_width},"normal");
			page++;
			}
		}
	$(".light_list span").eq(page-1).addClass("current").siblings().removeClass("current");
	});
	$(".prev").click(function(){
	if(!$v_list.is(":animated")){
		if(page == 1){
			$v_list.animate({left : '-='+v_width*(page_count-1) },"normal");
			page = page_count;
		}else{
			$v_list.animate({left:"+="+v_width},"normal");
			page--;
			}
		}
		$(".light_list span").eq(page-1).addClass("current").siblings().removeClass("current");
	})
});

 

© 著作权归作者所有

abelieve
粉丝 0
博文 4
码字总数 982
作品 0
青岛
私信 提问
bootstrap大图轮播手机端不能手指滑动解决办法

网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上就找到...

蓓蕾心晴
2017/03/10
0
0
Android中广告轮播框架Banner----(功能很全面

转载地址:https://github.com/youth5201314/banner 参考视频:http://ke.atguigu.com/course/150 Android图片轮播控件 新框架发布,欢迎大家Star XFrame - Android快速开发框架 XFrame详细功...

丁佳辉
2018/08/02
4K
0
Rxjava + ViewPager 打造实用图片轮播

背景 说到图片轮播,之前写过一篇文章《造轮子:android自定义专属广告轮播控件》,不过当时是采用ViewFlipper实现图片轮播的,最近开始研究Rxjava技术,发现有个interval的方法,觉得很实用,...

码无止境
2016/09/22
0
0
轮播图优化-实现子view的复用

轮播图控件刚毕业的同学们就会写了,这里简单介绍下自己在做RN轮播图时一些心得: 回收与复用弃用的子view,至多只会存在有3个子View的实例。 手动滑动与自动播放的优雅处理,不重写onTouch...

牟乘风
2018/05/22
0
0
图片轮播框架--XRCarouselView

XRCarouselView是一款超简单好用的图片轮播框架,仅仅两个imageView实现图片轮播。 XRCarouselView的优点 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 ...

匿名
2016/03/18
2.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
3
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部