轮播图，实现图片的水平移动

Posted 2022-03-05 zylbky

 

<div id="slider_wrap">
<div id="slider_content">
<div><a href="html/chanpin/yinzhu.html"><img src="img/yinzhu/DT-YZ-101.png" /></a><br />音柱</div>
<div><a href="html/chanpin/baojinghe.html"><img src="img/BJH/DT-BJH-601.png" /><br /></a>报警盒</div>
<div><a href="html/chanpin/baojingxiang.html"><img src="img/baojingxiang/DT-BJX-302.png" /><br /></a>报警箱</div>
<div><a href="html/chanpin/baojingzhu.html"><img src="img/baojingzhu/DT-BJZ-201.png" /><br /></a>报警柱</div>
<div><a href="html/chanpin/guanlizxj.html"><img src="img/glzxj/DT-ZXJ-G10.png" /><br /></a>管理中心机</div>
<div><a href=""><img src="img/main/4gqiu01.png" /><br /></a>4G球型摄像头 </div>
<div><a href=""><img src="img/qiangji/q00.png" /><br /></a>枪机摄像头 </div>
<div><a href=""><img src="img/wifi/w8.png" /><br /></a>WiFi摄像机</div>
<div><a href=""><img src="img/taiyangneng/tai002.png" /><br /></a>太阳能摄像机</div>
<div><a href=""><img src="img/main/zfjly.png" /><br /></a>执法记录仪</div>
</div>
</div>

   CSS样式

<style media="screen">
/*样式设置*/
*
margin: 0px;
padding: 0px;

#slider_wrap /*宽高自由设置*/
width: 78%;/*根据实际情况调整宽度*/
height: 130px;
margin: 10px auto;
position: relative;
overflow: hidden;
margin-left: 70px;

#slider_content /*宽高自由设置*/
width: 2200px;/*根据实际情况调整宽度*/
height: 110px;
position: absolute;

#slider_content img
width: 100px;/*自己设置图片的宽度*/
height: 110px;
float: left;

#slider_content div
width: 100px;
height: 120px;
float: left;
text-align: center;
margin-left: 10px;

</style>

 

<script type="text/javascript">
var sliderContent = document.getElementById(‘slider_content‘);
// 定义一个变量x，记录x轴的位置
var x = 0;
// 将slider_content中的图片复制一次
sliderContent.innerHTML += sliderContent.innerHTML;
// 添加鼠标点击事件
function btnLeft()
if (x == -1100) //假如图片移动到最后一个时，将x设置为0；
x = 0;

x -= 1; //图片沿x轴方向向左移动1px
sliderContent.style.left = x + ‘px‘; //图片左移

setInterval(‘btnLeft()‘, 50);//定义毫秒数
</script>