原生js实现图片叠加滚动切换代码



35 136 46



特效描述:原生js实现 图片叠加 滚动切换,原生js实现图片叠加滚动切换代码

代码结构

1. 引入CSS

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

2. HTML代码

<div id="box">
	<div id="container">
    	<div class="item">
        	<div class="pic">
            	<a href="http://51qianduan.com/"><img src="images/1.jpg" /></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">必图拳馆</a></dt>
                    <dd class="info">不要把自己困住 你需要释放!</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">过瘾</span><span class="blue">带劲</span><span class="green">有活力</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                        <li><b>thaifight:</b>是一个非常好的一个拳...</li>
                        <li><b>快乐小友:</b>散打课的实战机会挺多...</li>
                        <li><b>爱情赛车:</b>白天人很少,喜欢安静...</li>            
                        </ul>
                    </div>
                </div>
            </div>            
        </div>
        <div class="item">
            <div class="pic">
                <a href="http://51qianduan.com/"><img  src="images/2.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">北京「七田阳光」全脑教育培训中心</a></dt>
                    <dd class="info">点亮孩子智慧人生</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">亲切</span><span class="blue">耐心</span><span class="green">干净</span></dd>
                </dl>            
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>Jcenter:</b>如此诚恳的教育机构 ...</li>
                            <li><b>citaslin:</b>孩子的进步很大</li>
                            <li><b>甲鱼爱媛媛:</b>七田阳光很注重品质,...</li>
                        </ul>
                    </div>
                </div>
            </div>        
        </div>
    	<div class="item">
        	<div class="pic">
            	<a href="http://51qianduan.com/"><img src="images/3.jpg" /></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">慕纱莹雪婚纱礼服馆</a></dt>
                    <dd class="info">物超所值的性价比,尽在慕纱莹雪!</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">精致</span><span class="blue">做工好</span><span class="green">专业</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>小企鹅快跑:</b>这个周末去取了我定的...</li>
                            <li><b>月逢明时:</b>这家婚纱店的婚纱做工...</li>
                            <li><b>日历本丢了:</b>上周末去取了婚纱,婚...</li>                            
                        </ul>
                    </div>
                </div>
            </div>            
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/4.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">北京金三优装饰有限责任公司</a></dt>
                    <dd class="info">一站式服务让你省时、省力、省钱、省心</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">口碑好</span><span class="blue">规模很大</span><span class="green">讲信誉</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>紫婧之梦:</b>这家店不错哦!</li>
                            <li><b>gotometop:</b>装修工都还挺朴实的,...</li>
                            <li><b>libangcheng1:</b>这家公司还可以,去年...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/5.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">鸿喜族休闲俱乐部—潘家园店</a></dt>
                    <dd class="info">专注人类健康,打造财富传奇!</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">真好</span><span class="blue">专业</span><span class="green">手法好</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>永封de铁盒:</b>环境挺不错,灯光控制...</li>
                            <li><b>老冯爱国:</b>不错的地方,是个很有...</li>
                            <li><b>白云寺方丈:</b>我不会打台球,但朋友...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/6.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">北京心拓城拓展培训</a></dt>
                    <dd class="info">客户第一 执行有力 激情勤奋 简单团结</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">专业</span><span class="blue">安全</span><span class="green">积极</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>janice19891:</b>很负责任~</li>
                            <li><b>旺达是条鱼:</b>朋友参加过他们的拓展...</li>
                            <li><b>bjftxiaoniu:</b>吼吼,在这里看到他们...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/7.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">韩医生专业祛痘连锁机构北京直营店</a></dt>
                    <dd class="info">我们只祛痘 所以更专业</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">效果好</span><span class="blue">细心</span><span class="green">专业</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>天涯hehaijiao:</b>这家店很好,顾客很多...</li>
                            <li><b>爱神马geili:</b>我治疗了两天感觉的好...</li>
                            <li><b>天上的语言:</b>这几天已经看到明显效...</li>
                        </ul>
                  </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="http://51qianduan.com/"><img src="images/8.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="http://51qianduan.com/">罗曼卡婚纱摄影</a></dt>
                    <dd class="info">口碑好 性价比高 无额外消费</dd>
                    <dd><span>总体评价:</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象:</span><span class="pink">口碑好</span><span class="blue">很喜欢</span><span class="green">完美</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>明确指出i:</b>拍的很不错,老妈都夸...</li>
                            <li><b>爱就一直走吧:</b>他们家服务态度好,衣...</li>
                            <li><b>爱过你me:</b>最后照片拍出来后朋友...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>	
    <div id="control"></div>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 图片叠加 图片层叠 图片拖动 图片拖拽 图片翻转 图片旋转 图片延迟加载 图片延迟 图片加载 图片淡出淡进 图片淡出 图片淡进 图片全屏 头像上传 图片上传 二维码 图片放大镜 h5图片动画 h5图标动画 html5图片动画 html5图标动画 带缩略图的幻灯片 地图 中国地图 世界地图 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 滚动切换 滚动条切换 滑动选项卡 滑动切换 图片广告 图片滚动 图片滚动条 图片滑动 图片滑块 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 纯图片轮播 图片轮播 图片切换 图片选项卡 图标选项卡 图片收缩展开 图片收缩 图片展开 图标导航 图标菜单 自动滚动图片轮播 叠加浮动层 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 背景切换 大图切换 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 层叠叠加 叠加层叠 层叠 叠加 加载更多 旋转翻转 旋转 翻转 图表 图片 图片插件 头像截图 图片叠加 图片层叠 滚动切换 滚动条切换 图片切换 图片选项卡 图标选项卡 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 选项卡自动切换 图片文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到