知识大全 jquery实现的一个导航滚动效果

Posted 2022-07-20 知

篇首语：人有知识，则有力矣。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jquery实现的一个导航滚动效果相关的知识，希望对你有一定的参考价值。

　　现在先把代码拷贝到这里以后再逐一简化修改实现滚动效果脚本代码如下

代码如下: var all= ; var no= ; var s_width= ; $(document) ready(function() all=$( slide ) length; s_width=$( slide ) eq( ) width(); $("#slides") css( width all*s_width); var contiar=$( control_links ); for(var i= ;i<all;i++) contiar append("<li></li>"); $( control_links li ) bind( click mouseenter function() var index=$(this) index(); no=index; var no_= no%all; $("#slides") animate(left:( *no_*s_width)+ px ); $(this) css( background color #fff ); $(this) siblings() css( background color # ); ); setInterval(function() var no_= no%all; $("#slides") animate(left:( *no_*s_width)+ px ); var curr= $( control_links li ) eq(no_); curr css( background color #fff ) curr siblings() css( background color # ); no++; ); );

　　 css 代码如下

代码如下: img border:none; #daohangpic width: px; margin: auto; padding: px; overflow:hidden; #daohangpic img height: px; width: px; #contiar position:relative; width: px; height: px; overflow:hidden; margin: auto; #slides position:absolute; border:none; slide float:left; width: px; height: px; overflow:hidden; border:none; control_links position:absolute; bottom: px; right: px; z index: ; control_links control_links li list style: none; control_links li float:left; width: px; height: px; margin right: px; text align: center; background:# ; border: px solid # ; cursor: pointer; opacity: ; caption position:absolute; height: px; width: %; background color:# ; bottom: px; padding left: px; padding top: px; overflow:hidden; z index: ; background:url(hdpng png) no repeat scroll px; caption h color: #FFF; font size: px; font weight: bold; line height: px; caption p display: block; color: # ; font size: px; line height: px; 代码如下: <div id="daohangpic"> <div id="contiar"> <div id="slides"> <div > <a href="格莱美获奖名单揭晓众大腕颁奖礼现场飙歌" target="_blank"><img src= jpg > </a> <div > <h >格莱美获奖名单揭</h > <p>格莱美获奖名单揭晓众大腕颁奖礼现场飙歌</p> </div> </div> <div > <a href="海内外人气明星齐聚鸟叔林志玲大跳骑马舞" target="_blank"><img src= jpg ></a> <div > <h >格莱美获奖名单揭</h > <p>格莱美获奖名单揭晓众大腕颁奖礼现场飙歌</p> </div> </div> <div > <a href="令狐冲东方不败任盈盈三段虐恋催人泪下" target="_blank"><img src= jpg ></a> <div > <h >格莱美获奖名单揭</h > <p>格莱美获奖名单揭晓众大腕颁奖礼现场飙歌</p> 下 </div> </div> <div > <a href="陈键锋恋上剩女陈紫函人仙之恋如何收场？" target="_blank"><img src= jpg ></a> <div > <h >格莱美获奖名单揭</h > <p>格莱美获奖名单揭晓众大腕颁奖礼现场飙歌</p> 场？ </div> </div> <div > <a href="感悟生命之美沐浴信仰之光" target="_blank"><img src= jpg ></a> <div > <h >格莱美获奖名单揭</h > <p>格莱美获奖名单揭晓众大腕颁奖礼现场飙歌</p> </div> </div> </div> <ul > </ul> </div> <div id="back_img"> </div> </div> cha138/Article/program/Java/JSP/201311/20572