适合手机页面微信页面pc页面用的幻灯片

最新推荐文章于 2021-06-17 07:46:03 发布

师远鹏

最新推荐文章于 2021-06-17 07:46:03 发布

阅读量1.9k

点赞数

分类专栏： JQuery javascript小技巧

javascript小技巧同时被 2 个专栏收录

47 篇文章 25 订阅

订阅专栏

JQuery

22 篇文章 0 订阅

订阅专栏

适合手机页面、微信网页的幻灯图插件

首先是css文件 style.css


@charset "utf-8";
*{margin:0;padding:0;list-style:none;border:0;}
body{width:100%;margin:0 auto;overflow:hidden}

/* main_image */
.main_visual{height:422px;border-top:1px solid #d7d7d7;overflow:hidden;position:relative;}
.main_image{height:422px;overflow:hidden;position:relative;}
.main_image ul{width:9999px;height:422px;overflow:hidden;position:absolute;top:0;left:0}
.main_image li{float:left;width:100%;height:422px;}
.main_image li span{display:block;width:100%;height:422px}
.main_image li a{display:block;width:100%;height:422px}
.main_image li .img_1{background:url('../images/img_main_1.jpg') center top no-repeat}
.main_image li .img_2{background:url('../images/img_main_2.jpg') center top no-repeat}
.main_image li .img_3{background:url('../images/img_main_3.jpg') center top no-repeat}
.main_image li .img_4{background:url('../images/img_main_4.jpg') center top no-repeat}
.main_image li .img_5{background:url('../images/img_main_5.jpg') center top no-repeat}


div.flicking_con{position:absolute;top:360px;left:50%;z-index:999;width:300px;height:21px;margin:0 0 0 -50px;}
div.flicking_con a{float:left;width:21px;height:21px;margin:0;padding:0;background:url('../images/btn_main_img.png') 0 0 no-repeat;display:block;text-indent:-1000px}
div.flicking_con a.on{background-position:0 -21px}
#btn_prev,#btn_next{z-index:11111;position:absolute;display:block;width:73px!important;height:74px!important;top:50%;margin-top:-37px;display:none;}
#btn_prev{background:url(../images/hover_left.png) no-repeat left top;left:100px;}
#btn_next{background:url(../images/hover_right.png) no-repeat right top;right:100px;}

接下来呈上页面及jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>jQuery touchSlider插件</title>

<link type="text/css" href="css/style.css" rel="stylesheet"/>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".main_visual").hover(function(){
		$("#btn_prev,#btn_next").fadeIn()
	},function(){
		$("#btn_prev,#btn_next").fadeOut()
	});
	
	$dragBln = false;
	
	$(".main_image").touchSlider({
		flexible : true,
		speed : 200,
		btn_prev : $("#btn_prev"),
		btn_next : $("#btn_next"),
		paging : $(".flicking_con a"),
		counter : function (e){
			$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
		}
	});
	
	$(".main_image").bind("mousedown", function() {
		$dragBln = false;
	});
	
	$(".main_image").bind("dragstart", function() {
		$dragBln = true;
	});
	
	$(".main_image a").click(function(){
		if($dragBln) {
			return false;
		}
	});
	
	timer = setInterval(function(){
		$("#btn_next").click();
	}, 5000);
	
	$(".main_visual").hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		},5000);
	});
	
	$(".main_image").bind("touchstart",function(){
		clearInterval(timer);
	}).bind("touchend", function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		}, 5000);
	});
	
});
</script>
</head>
<body>

<div class="main_visual">
	<div class="flicking_con">
		<a href="#">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
	</div>
	<div class="main_image">
		<ul>
			<li><span class="img_3"></span></li>
			<li><span class="img_4"></span></li>
			<li><span class="img_1"></span></li>
			<li><span class="img_2"></span></li>
			<li><span class="img_5"></span></li>
		</ul>
		<a href="javascript:;" id="btn_prev"></a>
		<a href="javascript:;" id="btn_next"></a>
	</div>
</div>
<!--main_visual end-->

</body>
</html>

代码如下：

Slider.rar

师远鹏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
适合手机页面微信页面pc页面用的幻灯片

适合手机页面、微信网页的幻灯图插件首先是css文件 style.css@charset "utf-8";*{margin:0;padding:0;list-style:none;border:0;}body{width:100%;margin:0 auto;overflow:hidden}/* main_image */.main_visual{height:422p
复制链接

扫一扫