手机滑动焦点图,滑屏

最新推荐文章于 2020-12-07 15:54:08 发布

ffshenghui

最新推荐文章于 2020-12-07 15:54:08 发布

阅读量1.7k

点赞数

分类专栏： JQuery 文章标签：手机 wap 焦点图滑动滑屏

本文链接：https://blog.csdn.net/ffshenghui/article/details/8705524

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<title>焦点图轮播 主要是为了在手机上面可以手指滑动的效果</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<style>

@charset "utf-8";
/*--------------
lastTime : 2012.09.28
tags : img_ad | reset
----------------*/
/*------reset-------*/
body, h1, h2, h3, h4, h5, h6, p,
dl, dt, dd, ul, ol, li, th, td, img, input{border:medium none;margin: 0;padding: 0;}
body{ font-size:14px; font-family:HelveticaNeue,Helvetica,sans-serif;}
input{ font-size:16px;}
img{ border:0 none;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
p,ul,li{list-style:none;}
a,a:link{color:#19446f;text-decoration:none; outline:none;}
a:hover{text-decoration:none; color:#de0003;}
header, nav, section, footer{ display:block;}
/*------img_ad-------*/
.img_ad{ height:188px; width:320px; margin:0 auto; overflow:hidden;position:relative;}
.img_ad img{width:320px; height:188px;}
.img_ad_titleP1{ text-transform:uppercase; margin-right:20px;}
.img_wrap{position:absolute;left:0; top:0;height:188px; width:320px; background:#666;}
.img_wrap ul{position:absolute; left:0px;}
.img_wrap ul li{ float:left;display:inline;height:188px; width:320px;}
.imgFlashIco{width:144px;overflow:hidden; margin:0 auto; position:relative; top:-30px; background:url(../images/ico_base.png) no-repeat -336px 6px; }
.imgFlashIco li{ float:left; font-weight:bold;  width:20px; font-size:14px; margin-top:2px;margin-left:6px; text-align:center;line-height:26px;height:26px; cursor:pointer; color:#FFF;}
.imgFlashIco li.on{ color:#000;}
.imgFlashSpan{ display:inline-block; height:26px;line-height:26px;  color:#F00;overflow:hidden;margin-left:8px; cursor:pointer;}


</style>
</head>
<body>
<p style="height:40px; line-height:40px; text-align:center"><a href="http://www.xiaobai8.com" title="杭州-小白">回到首页</a></p>

<div class="wrapper">
    <div class="module">
    	<div class="img_ad">
        	<div class="img_wrap">
                <ul id="J-Touch">
                    <li><a href="#"><img src="images/ad20120622.jpg" alt="Fall in love with fall Autumn new 10% off" /></a></li>
                    <li><a href="#"><img src="images/ad20120701.jpg" alt="Fall in love with fall Autumn new 10% off" /></a></li>
                    <li><a href="#"><img src="images/ad20120716.jpg" alt="Fall in love with fall Autumn new 10% off" /></a></li>
                    <li><a href="#"><img src="images/ad20120701.jpg" alt="Fall in love with fall Autumn new 10% off" /></a></li>
                    <li><a href="#"><img src="images/ad20120716.jpg" alt="Fall in love with fall Autumn new 10% off" /></a></li>
                </ul>
            </div>
        </div>
        <div class="imgFlashIco">
            <ul id="J-Touch-ico">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
    <div class="module">
    	<div class="img_ad">
        	<div class="img_wrap">
                <ul id="J-Touch1">
                    <li><a href="#"><img src="images/ad20120622.jpg" alt="Fall in love with fall Autumn new 10% off" /></a></li>
                    <li><a href="#"><img src="images/ad20120701.jpg" alt="Fall in love with fall Autumn new 10% off" /></a></li>
                    <li><a href="#"><img src="images/ad20120716.jpg" alt="Fall in love with fall Autumn new 10% off" /></a></li>
                </ul>
            </div>
        </div>
        <div class="imgFlashIco">
            <ul id="J-Touch-ico1">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div> 
</div>
<script src="asset/jquery-1.7.2.min.js"></script>
<script src="asset/imgScroll.js"></script>
<script>
var test=new mobileImgScroll();
test.init();

var test1=new mobileImgScroll();
test1.init({
	Touch:"#J-Touch1",
	TouchIco:"#J-Touch-ico1",
	Width:320,
	Current:"on",
	isAuto:true,
	offSet:3000
});
</script>



</body>
</html>

ffshenghui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
手机滑动焦点图,滑屏

焦点图轮播主要是为了在手机上面可以手指滑动的效果 @charset "utf-8";/*--------------lastTime : 2012.09.28tags : img_ad | reset----------------*//*------reset-------*/body, h1, h2, h3, h4, h5, h6, p,dl, dt, dd, u
复制链接

扫一扫