分享一个jQuery图片轮播切换代码，美女效果，调用方便帝国cms

帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → 分享一个jQuery图片轮播切换代码，美女效果，调用方便

【本版专题贴子】

1/3 1 2 3 ›› ›|

honglin
用户头衔：秀才

精华贴   ：0
发贴数   ：40
经验值   ：347
注册时间：2007-09-14

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

分享一个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文件

这三个不能忘了，都不用修改，直接复制

以下这些是需要我们修改，加入我们系统的标签调用，

以上可以替换为：

[e:loop={栏目ID,显示条数,操作类型,只显示有标题图片,附加SQL条件,显示排序}]
<li><a href="<?=$bqsr['titleurl']?>"><img src="<?=$bqr[titlepic]?>" alt="<?=$bqsr[title]?>" /></a></li>
[/e:loop]

以上使用的是灵动标签，当然我们的万能标签制作模板也可以使用，大家将这段代码替换掉原来html里面的代码即可，好了，大家可以看下效果了，如果有问题，随时跟帖！
下载地址：http://www.youzhan5.com/jiaoben/201609/170.html