当前位置：
|
主题：[分享] 分享一个jQuery图片轮播切换代码，美女效果，调用方便 [收藏主题] |
 今天给大家带来一个《jQuery图片轮播切换代码》，演示为美女效果，有图片+底部标题+右下角图片数量，显示效果不错，
 可以先看演示：http://www.youzhan5.com/jiaoben/201609/170.html 下载整体文件后有一个网页文件（index.html），三个文件夹（css，images，js），不要丢掉，否则显示不正常。 我们要修改的便是网页文件index.html 以下为原始index.html代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>jQuery美女网站图片轮播切换代码 - 优站网素材</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <center> <div class="demo"> <a class="control prev"></a><a class="control next abs"></a><!--自定义按钮，移动端可不写--> <div class="slider"><!--主体结构，请用此类名调用插件，此类名可自定义--> <ul> <li><a href=""><img src="images/1.jpg" alt="两弯似蹙非蹙笼烟眉，一双似喜非喜含情目。" /></a></li> <li><a href=""><img src="images/2.jpg" alt="态生两靥之愁，娇袭一身之病。" /></a></li> <li><a href=""><img src="images/3.jpg" alt="泪光点点，娇喘微微。" /></a></li> <li><a href=""><img src="images/4.jpg" alt="闲静似娇花照水，行动如弱柳扶风。" /></a></li> <li><a href=""><img src="images/5.jpg" alt="心较比干多一窍，病如西子胜三分。" /></a></li> </ul> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/YuxiSlider.jQuery.min.js"></script> <script> $(".slider").YuxiSlider({ width:800, //容器宽度 height:450, //容器高度 control:$('.control'), //绑定控制按钮 during:4000, //间隔4秒自动滑动 speed:800, //移动速度0.8秒 mousewheel:true, //是否开启鼠标滚轮控制 direkey:true //是否开启左右箭头方向控制 }); </script> </center> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.youzhan5.com/jiaoben/ " target="_blank">优站网</a></p> </div> </body> </html> 其中 “<link rel="stylesheet" href="css/style.css">”为调用css文件 “<script src="js/jquery.min.js"></script> <script src="js/YuxiSlider.jQuery.min.js"></script>”为调用js文件 这三个不能忘了，都不用修改，直接复制 以下这些是需要我们修改，加入我们系统的标签调用， <li><a href=""><img src="images/1.jpg" alt="两弯似蹙非蹙笼烟眉，一双似喜非喜含情目。" /></a></li> <li><a href=""><img src="images/2.jpg" alt="态生两靥之愁，娇袭一身之病。" /></a></li> <li><a href=""><img src="images/3.jpg" alt="泪光点点，娇喘微微。" /></a></li> <li><a href=""><img src="images/4.jpg" alt="闲静似娇花照水，行动如弱柳扶风。" /></a></li> <li><a href=""><img src="images/5.jpg" alt="心较比干多一窍，病如西子胜三分。" /></a></li> 以上可以替换为我们科讯可以调用出来的标签格式（机子没有装科讯，装好后标签给补充上去），大家将这段代码替换掉原来html里面的代码即可，好了，大家可以看下效果了，如果有问题，随时跟帖！ 下载地址：http://www.youzhan5.com/jiaoben/201609/170.html |
|
 支持(0) |  反对(0)
 顶端  底部
|
![电子邮件:[ zhaohonglin@126.com ]](http://bbs.kesion.com/club/images/email.gif){kind=small}
|
支持(1) | 反对(0)
顶端 底部
|
| ＜上一主题 | 下一主题 ＞ |