账号通
    

账号  

密码  

2961

查看

1

回复
主题:[分享] 分享一个jQuery图片轮播切换代码,美女效果,调用方便 [收藏主题]  
honglin 当前离线

16

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:355 分
登录次数:27 次
注册时间:2008/10/28
最后登录:2016/10/9
honglin 发表于:2016/10/9 11:49:33   | 只看该作者 查看该作者主题 楼主 
科汛在线网校系统
今天给大家带来一个《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) 回到顶部顶端 回到底部底部
hasdiff 当前离线

802

主题

2

广播

11

粉丝
添加关注
级别:七年级

用户积分:4156 分
登录次数:443 次
注册时间:2011/10/28
最后登录:2024/11/18
hasdiff 发表于:2016/10/9 18:01:12   | 只看该作者 查看该作者主题 沙发 
 
  支持(1) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.09375秒 powered by KesionCMS 9.0