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



65 258 87



特效描述:原生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>



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


热门标签: 文字叠加 滚动导航菜单 导航切换 图片叠加 图片翻转旋转 缩略图 滚动切换 文字翻转旋转 图片相册 图片滚动 图片切换 旋转木马 图片墙 文字滚动 文字切换 百叶窗 背景切换 图片网格 图片文字滚动 手风琴 图片九宫格 全屏滚动 选项卡自动切换 页面滚动 视频切换 图片高亮 列表切换 图片对比 图片文字 渐隐切换 单排图片 全屏切换 响应式图片 切换按钮 图片列表 缩放切换 滚动流动 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 滚动切换 滑动选项卡切换 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 叠加浮动层 选项卡切换 滑动手风琴 背景切换 手风琴 重叠层叠叠加 转动旋转翻转 图表 图片 头像截图

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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