wap网页手机触屏js图片滑动

[html]代码库
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;wap网页手机触屏js图片滑动&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/scroll.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, &quot;新宋体&quot;;}
 
.scroll{width:480px;height:181px;margin:20px auto 0 auto; position:relative;overflow:hidden;}
.mod_01{float:left;width:480px;}
.mod_01 img{display:block;width:480px;height:181px;}
.dotModule_new{padding:0 5px;height:11px;line-height:6px;-webkit-border-radius:11px;background:rgba(45,45,45,0.5);position:absolute;bottom:5px;right:10px;z-index:11;}
#slide_01_dot{text-align:center;margin:3px 0 0 0;}
#slide_01_dot span{display:inline-block;margin:0 3px;width:5px;height:5px;vertical-align:middle;background:#f7f7f7;-webkit-border-radius:5px;}
#slide_01_dot .selected{background:#66ff33;}
&lt;/style&gt;
 
&lt;/head&gt;
&lt;body&gt;
 
&lt;div class=&quot;scroll&quot;&gt;
    &lt;div class=&quot;slide_01&quot; id=&quot;slide_01&quot;&gt;
        &lt;div class=&quot;mod_01&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/51352100.jpg&quot; alt=&quot;腾讯视频&quot;&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;mod_01&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/50849300.jpg&quot; alt=&quot;神雕侠侣【金庸正版】&quot;&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;mod_01&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/54330800.jpg&quot; alt=&quot;装机必备&quot;&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;mod_01&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/21651800.jpg&quot; alt=&quot;优酷视频播放器&quot;&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;mod_01&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/52208700.jpg&quot; alt=&quot;天翼精品&quot;&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;mod_01&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/02856300.jpg&quot; alt=&quot;梦想海贼王(送路飞)&quot;&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;mod_01&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/92191400.jpg&quot; alt=&quot;折800&quot;&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;mod_01&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/44452000.jpg&quot; alt=&quot;安全管家&quot;&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;dotModule_new&quot;&gt;
        &lt;div id=&quot;slide_01_dot&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
 
&lt;script type=&quot;text/javascript&quot;&gt;
if(document.getElementById(&quot;slide_01&quot;)){
    var slide_01 = new ScrollPic();
    slide_01.scrollContId   = &quot;slide_01&quot;; //内容容器ID
    slide_01.dotListId      = &quot;slide_01_dot&quot;;//点列表ID
    slide_01.dotOnClassName = &quot;selected&quot;;
    slide_01.arrLeftId      = &quot;sl_left&quot;; //左箭头ID
    slide_01.arrRightId     = &quot;sl_right&quot;;//右箭头ID
    slide_01.frameWidth     = 480;
    slide_01.pageWidth      = 480;
    slide_01.upright        = false;
    slide_01.speed          = 10;
    slide_01.space          = 30; 
    slide_01.initialize(); //初始化
}
&lt;/script&gt;
 
&lt;div style=&quot;text-align:center;clear:both&quot;&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
用户注册

用户登录

发表随想

该用户最新代码

编程随想

[html]代码库

网友评论 (发表评论)

回复评论

发表评论：

评论须知：

扫码下载

输入口令后可复制整站源码
