|
有些学员在学习制作网站时，想在自己的网站上添加一些左右滚动的切换图效果，这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图的功能，可以通过DIV+CSS的模板制作出来。（如果你是一个懒站长，可以直接在js网页特效代码大全中找相应写好的代码。）
如何在自己做网站时添加左右滚动的切换图的步骤：
在自己网站需要添加切换图的位置放上以下的HTML代码（如果你对HTML不了解，请学习html5从入门教程）；图片可以是固定的几张图片，也可以使用动态调用代码来调用网站文章中的图片。
文章标题1
文章标题2
文章标题3
文章标题4
文章标题5
文章标题6
文章标题7
文章标题8
;;
在网站的CSS文件的底部粘贴下面的CSS样式，用来控制版块的样式。可以对CSS进行适当的修改来符合自己做网站的尺寸的需要。
/*
*代码来源：学做网站论坛 https://www.xuewangzhan.net/
*案例滚动图片样式
*/
.anli8{width:980px; margin:0px auto;}
.anli_fot{width:980px; height:7px; background:url(../images/net2_07.jpg) no-repeat; margin-bottom:15px;}
.infiniteCarousel {
border-left:1px solid #ccc; border-right:1px solid #ccc; background-color:#F6F5F5; width:978px; position: relative; height:190px;
}
.infiniteCarousel .wrapper8 {
width:865px; height:198px; position:absolute; top:0; margin-left:53px;
}
.infiniteCarousel ul a img {
border:4px solid #E5E5E5; width:190px; height:130px; overflow:hidden;
}
.infiniteCarousel li{
text-align:center; font-weight:normal; font-size:12px; color:#333; line-height:26px;
}
.infiniteCarousel .wrapper8 ul{
width:865px; margin:0; position:absolute; padding-top:10px;
}
.infiniteCarousel .wrapper8 ul li {
display:block; float:left; padding:10px;
}
.infiniteCarousel .arrow {
display: block; text-indent: -999px; position:absolute; top:65px; cursor:pointer;
}
.infiniteCarousel .forward {
width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px; overflow:hidden;
}
.infiniteCarousel .back {
width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat;left:5px;
}
.infiniteCarousel .forward:hover {
width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px;
}
.infiniteCarousel .back:hover {
width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat; left:5px;
}
添加了DIV和CSS之后，只能将图片显示出来，但图片还不能动起来，还需要添加二个JS文件才能让它们自动切换起来。
下载二个JS文件，然后上传到自己网站空间的根目录下。（js文件下载地址：https://pan.baidu.com/s/1eQENhJG）
完成以上步骤之后，即可实现在自己网站上制作左右滚动的切换图的效果了。
以上就是制作JS+DIV左右滚动的切换图的方法，如果你想制作轮播图，可以参照这个方法：如何制作网站轮播图。也欢迎大家去使用更多的JS特效代码。
|